Staller博客主题配置美化教程

本站是使用Staller主题搭建而成,阅读主题配置文件确实是个费劲的事。之前配置博客的时候有记笔记,正好朋友最近也在使用这个主题搭建自己的博客,于是决定分享一下我的主题配置

部分内容参考自其他博主的分享,更多美化请见官方分享链接:

分类和说说

网站刚生成时是这样,没有分类和标签的导航页面

image.png

这两个页面不需要自己手动生成和配置,一但你在某个文章的头部添加了tagscategories配置,这两个对应的导航页面便会自动生成

1
2
3
4
5
6
7
8
---
title: hello world
date: 2023-06-29 21:51:38
tags:
- 建站
categories:
- 建站
---

使用 hexo 指令重新生成页面后便会出现对应的导航页

image.png

文章页顶部导航栏

首先生成独立的页面,例如生成留言页指令如下

1
hexo new page comments

修改主题配置文件_config.stellar.yml,添加标题和链接

1
2
3
4
5
6
######## Index ########
post-index: # 近期发布 分类 标签 归档 and ...
'安全圈': /cyberblogs/index.html
'安全资讯': /cybernews/index.html
'留言板': /comments/index.html
'主站': https://c2red.com

渲染后添加的实现效果如下,首页导航栏中会出现我们添加的页面

要注意:必须在目录后添加index.html才能让模块选中时高亮

image.png

修改博客字体

修改网站详细字体的教程可以查看作者文档:

我个人总结了两种引入字体的方法,更推荐使用方法二,这也是本站目前使用的方法

编辑根目录配置文件config.yml,引入字体CSS,在CSS中引入引入整个字体文件

1
2
3
inject:
head:
- <link rel="stylesheet" href="https://upyun.thatcdn.cn/hexo/stellar/css/font.css">

修改主题配置文件 _config.stellar.yml,修改字体

1
2
3
4
5
6
7
8
9
10
11
style:
font-size:
root: 19.3px
body: .9999rem # 15px
code: 85% # 14px
codeblock: 0.8125rem # 13px
font-family:
logo: 'ZFonts, system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
body: 'ZFonts, system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'

这种方法每次无缓存访问网站时,都需要下载完整字体文件,会占用3M网络资源,让本不富裕的网络加载速度雪上加霜,不是很推荐

使用「霞鹜文楷」的分片字体提速,项目地址:https://github.com/chawyehsu/lxgw-wenkai-webfont

直接在config.yml文件中引入CSS

1
2
head:
- <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css" media="print" onload="this.media='all'">

然后修改主题配置文件_config.stellar.yml中使用的字体

1
2
3
font-family:
logo: '"LXGW WenKai Screen", system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
body: '"LXGW WenKai Screen", system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif;'

每次访问网页,只会加载该页面所需要用到的文字的字体切片,加载速度非常之快,可以说是丝滑

image.png

侧边栏欢迎语

由于侧边栏支持使用 markdown 语法,而 markdown 又支持 HTML 语言,因此可以通过 HTML 自定义各种样式的侧边栏

在主题文件目录下的_data/wodgets.yml文件中新增一项侧边栏配置,写下你的网站欢迎语,我这还是用了今日诗词的接口

1
2
3
4
5
6
7
8
welcome:
layout: markdown
title: '🎉欢迎, 先生亦或是女士: '
content: |
本站托管于Github, 可能会出现加载缓慢或丢失问题,欢迎在评论区交流技术知识。
<br><hr>
今日诗词: <span id="jinrishici-sentence"></span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

修改主题配置_config.stellar.yml,设置欢迎语出现在哪个位置

1
2
3
4
widgets:
#### 自动生成的页面 ####
# 主页
home: search, welcome, recent, tagcloud, timeline # for home

实现效果如下:

侧边栏免责声明

和侧边栏欢迎语一样,也是在主题文件目录下的_data/wodgets.yml文件中新增一项侧边栏配置,使用 markdown 布局

1
2
3
4
5
6
7
8
9
10
11
12
statement:
layout: markdown
title: '<br>'
content: |
<hr>
<center>
<h4 id="免责声明">免责声明</h4>
<p>本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。</p>
<p>不得将上述内容用于商业或非法用途,否则一切后果自负。</p>
<p>本站信息来自网络收集整理,版权争议与本站无关。</p>
<p>如果有侵权之处请第一时间联系站长删除。敬请谅解!</p>
</center>

实现效果如下,在本站首页侧边栏滑到最底下就能看到

页面布局占比调整

修改电脑分辨率时发现,博客网页布局不是居中布局,而是歪向了一边

虽然是无关大雅,作者这个宽度设计在一些分辨率下挺好看的,但是考虑到各设备分辨率通用性,还是决定对布局宽度稍作修改

image.png

打开主题文件下的themes/stellar/source/css/_layout/main.styl,删除下面这行 CSS 代码,就能实现页面居中

image.png

主题最大宽度偏窄,在缩放比例小的宽屏上看会感觉很别扭,这里参考 butterfly 主题宽度修改 CSS 代码,添加下面这一行

再修改左右两栏的宽度为百分比

底部网站运行时间

原教程参考自酷小呵,代码我进行了少许改动,实现效果如下

image.png

在主题配置文件_config.stallar.ymlcontent配置中添加对应 HTML 代码就行,网站运行时间和作者请自行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
content: | # 支持 Markdown 格式
<center>
</br>
</br>
<!--不蒜子计数器-->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!--添加一个访问量-->
<span>
👨‍💻本站由 <a href="/" style="color: rgb(13, 109, 252); font-weight: bold;">@鱼龙</a> 使用 <a href="https://github.com/xaoxuu/hexo-theme-stellar" style="color: rgb(13, 109, 252); font-weight: bold;">Stellar</a> 主题创建
</span>
</br>
</br>
<span>
📃本"<span style="color: rgb(13, 109, 252); font-weight: bold;">页面</span>"访问 <span id="busuanzi_value_page_pv" style="color: rgb(13, 109, 252); font-weight: bold;"></span> | 👀总访问 <span id="busuanzi_value_site_pv" style="color: rgb(13, 109, 252); font-weight: bold;"></span>次 | 🥷总访客 <span id="busuanzi_value_site_uv" style="color: rgb(13, 109, 252); font-weight: bold;"></span>
</span>
</br>
</br>
<script type="text/javascript">
function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("6/28/2023 21:34:18");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
runtime_day.innerHTML = A;
runtime_hour.innerHTML = B;
runtime_minute.innerHTML = C;
runtime_second.innerHTML = D
}
show_runtime();
</script>
<span>⏱️本站已运行</span>
<span id="runtime_day" style="color: rgb(13, 109, 252); font-weight: bold;"></span>
<span >天</span>
<span id="runtime_hour" style="color: rgb(13, 109, 252); font-weight: bold;"></span>
<span>小时</span>
<span id="runtime_minute" style="color: rgb(13, 109, 252); font-weight: bold;"></span>
<span>分</span>
<span id="runtime_second" style="color: rgb(13, 109, 252); font-weight: bold;"></span>
<span>秒</span>
</center>

永久链接插件

永久链接指用一串随机字符替代文章名作为网页访问链接,这样即使修改文章名称也不会改变文章访问链接,有助于网站SEO优化

首先在项目根路径下安装永久链接插件

1
npm install hexo-abbrlink --save

然后修改_config.yaml中的配置,启用永久链接

1
permalink: posts/:abbrlink.html

在配置文件底部添加如下配置,可以实现更优算法生成永久链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# abbrlink 配置
abbrlink:
alg: crc32 #算法,支持crc16(default)和crc32
rep: hex #进制,支持dec(default)和hex
drafts: false #true:对草稿也进行处理,false:不处理草稿。默认为false
# 从目录树生成类别
# depth: 您想生成的目录树的最大深度, 需要大于0
auto_category:
enable: true #默认为 true
depth: #默认为 3
over_write: false
auto_title: false #启用自动标题,它可以按路径自动填充标题
auto_date: false #启用自动日期,可以按今天的时间自动填写日期
force: false #启用Force模式,在这种模式下插件将忽略缓存,并为每一篇文章计算生成永久链接,即使它已经有了永久链接。这个设置只会更新永久链接,而不是更新其他前置变量。

然后在生成静态页面时,插件会自动在 Markdown 文件头部生成永久链接参数

1
2
3
4
---
title: Hello World
abbrlink: 4a17b156
---

重新生成网页发布后,网页访问链接就变成了:https://xx.com/posts/4a17b156.html

文章加密插件

本来不打算把这个插件使用也写在文章中,避免某个安全老哥闲着没事把这个插件加密给破解了。不过想想自己加密的文章也没啥隐私,就还是选择了公开

首先在博客根目录下运行下面的指令,安装插件

1
npm install --save hexo-blog-encrypt

快速使用,在文章头部添加password字段,就能对该文章进行加密

1
2
3
4
5
---
title: Hello World
date: 2020-03-13 21:12:21
password: 123456
---

也可以实现对指定某个标签所有文章加密,首先在博客根目录_config.yml下添加如下字段,通过tags指定标签和密码

1
2
3
4
5
6
7
8
9
10
# 安全
encrypt: # hexo-blog-encrypt
abstract: 这里有东西被加密了,需要输入密码查看哦。
message: 您好, 这里需要密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容

然后在需要加密的文章添加加密标签,也可以自定义一些内容

1
2
3
4
5
6
7
8
9
10
11
---
title: Hello World
tags:
- 加密文章tag
date: 2020-03-13 21:12:21
password: muyiio
abstract: 这里有东西被加密了,需要输入密码查看哦。
message: 您好,这里需要密码。
wrong_pass_message: 抱歉,这个密码看着不太对,请再试试。
wrong_hash_message: 抱歉,这个文章不能被纠正,不过您还是能看看解密后的内容。
---

还可以设置加密块的样式,在博客插件配置中通过theme字段指定,具体样式效果参考官方文档:

创建自定义CSS

在后面续的一些美化中需要我们自定义CSS,这里便先写一下提前写一下如何新建CSS文件并在博客中引入

首先在博客source目录下新建文件夹css,在 CSS 目录下新建我们自定义文件 my.css

然后博客配置文件_config.yml中引入我们新建的 CSS 文件,CSS 文件一般在head引入,JS文件一般在script里引入

1
2
3
4
5
6
7
8
inject:
head:
# 自定义css,静态文件后面加个"?任意内容",可以在每次更新之后用户自动重新请求,避免用户使用本地缓存
- <link rel="stylesheet" href="/css/my.css?1">
script:
# 自定义js
- <script type="text/javascript" src="/js/script.js?1"></script>
- <script src="/js/script.js?1"></script>

这样在my.css文件中自定义的 CSS 代码都会被页面渲染

添加评论功能

搭建博客怎么能没评论系统呢,搭建评论系统还能方便大家交流

目前 Staller 主题集成了多种评论功能插件,包括 beaudar、utterances、giscus、twikoo、waline、artalk,大家可以根据自己喜欢的类型随意选择,后面4个是网上使用比较多的

本站使用的评论系统是 twikoo,参考的搭建教程是下面这篇,篇幅有点长我就没自己记录了

如果对文章教程有什么不清楚的地方,可以查看官方文档进行补充

在上面的教程中,配置完 twikoo 云函数后在博客配置文件_config.stellar.yml中启用 twikoo 评论

1
2
3
4
5
6
7
8
9
######## Comments ########
comments:
service: twikoo

# Twikoo
# https://twikoo.js.org/
twikoo:
js: https://gcore.jsdelivr.net/npm/twikoo@1.6.8/dist/twikoo.all.min.js # 建议锁定版本
envId: https://xx.xx.com # twikoo云函数

然后评论功能就配置成功啦,可以在 page 或 post 文件头部添加comments字段指定该页面是否启用评论

1
2
3
---
comments: true
---

网站评论功能启用后,在 twikoo 管理面板中通过DEFAULT_GRAVATAR参数可以设置评论默认使用的头像类型,这些头像的区别如下

image.png

给评论添加输入提示框,教程参考自Leonus,在我们前面创建的自定义 CSS 文件中插入如下代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
content: '输入QQ号会自动获取昵称和头像🐧';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
content: '收到回复将会发送到您的邮箱📧';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
content: '可以通过昵称访问您的网站🔗';
}

/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
display: block;
}

/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
/* 先隐藏起来 */
display: none;
/* 绝对定位 */
position: absolute;
/* 向上移动60像素 */
top: -60px;
/* 文字强制不换行,防止left:50%导致的文字换行 */
white-space: nowrap;
/* 圆角 */
border-radius: 10px;
/* 距离左边50% */
left: 50%;
/* 然后再向左边挪动自身的一半,即可实现居中 */
transform: translate(-50%);
/* 填充 */
padding: 14px 18px;
background: #444;
color: #fff;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
display: none;
content: '';
position: absolute;
/* 内容大小(宽高)为0且边框大小不为0的情况下,每一条边(4个边)都是一个三角形,组成一个正方形。
我们先将所有边框透明,再给其中的一条边添加颜色就可以实现小三角图标 */
border: 12px solid transparent;
border-top-color: #444;
left: 50%;
transform: translate(-50%, -48px);
}

/* 带链接的用户名显示为红色 */
.tk-nick.tk-nick-link {
color: #f56c6c!important;
}



👨‍💻本站由 @鱼龙 使用 Stellar 主题创建

📃本"页面"访问 次 | 👀总访问 次 | 🥷总访客

⏱️本站已运行 小时