Staller博客主题配置美化教程
本站是使用Staller主题搭建而成,阅读主题配置文件确实是个费劲的事。之前配置博客的时候有记笔记,正好朋友最近也在使用这个主题搭建自己的博客,于是决定分享一下我的主题配置
部分内容参考自其他博主的分享,更多美化请见官方分享链接:
分类和说说
网站刚生成时是这样,没有分类和标签的导航页面
这两个页面不需要自己手动生成和配置,一但你在某个文章的头部添加了tags
或categories
配置,这两个对应的导航页面便会自动生成
1 2 3 4 5 6 7 8
| --- title: hello world date: 2023-06-29 21:51:38 tags: - 建站 categories: - 建站 ---
|
使用 hexo 指令重新生成页面后便会出现对应的导航页
文章页顶部导航栏
首先生成独立的页面,例如生成留言页指令如下
修改主题配置文件_config.stellar.yml
,添加标题和链接
1 2 3 4 5 6
| post-index: '安全圈': /cyberblogs/index.html '安全资讯': /cybernews/index.html '留言板': /comments/index.html '主站': https://c2red.com
|
渲染后添加的实现效果如下,首页导航栏中会出现我们添加的页面
要注意:必须在目录后添加index.html
才能让模块选中时高亮
修改博客字体
修改网站详细字体的教程可以查看作者文档:
我个人总结了两种引入字体的方法,更推荐使用方法二,这也是本站目前使用的方法
编辑根目录配置文件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 code: 85% codeblock: 0.8125rem 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;'
|
每次访问网页,只会加载该页面所需要用到的文字的字体切片,加载速度非常之快,可以说是丝滑
侧边栏欢迎语
由于侧边栏支持使用 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
|
实现效果如下:
侧边栏免责声明
和侧边栏欢迎语一样,也是在主题文件目录下的_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>
|
实现效果如下,在本站首页侧边栏滑到最底下就能看到
页面布局占比调整
修改电脑分辨率时发现,博客网页布局不是居中布局,而是歪向了一边
虽然是无关大雅,作者这个宽度设计在一些分辨率下挺好看的,但是考虑到各设备分辨率通用性,还是决定对布局宽度稍作修改
打开主题文件下的themes/stellar/source/css/_layout/main.styl
,删除下面这行 CSS 代码,就能实现页面居中
主题最大宽度偏窄,在缩放比例小的宽屏上看会感觉很别扭,这里参考 butterfly 主题宽度修改 CSS 代码,添加下面这一行
再修改左右两栏的宽度为百分比
底部网站运行时间
原教程参考自酷小呵,代码我进行了少许改动,实现效果如下
在主题配置文件_config.stallar.yml
的content
配置中添加对应 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: | <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: alg: crc32 rep: hex drafts: false auto_category: enable: true depth: over_write: false auto_title: false auto_date: false force: false
|
然后在生成静态页面时,插件会自动在 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: 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: - <link rel="stylesheet" href="/css/my.css?1"> script: - <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: service: twikoo
twikoo: js: https://gcore.jsdelivr.net/npm/twikoo@1.6.8/dist/twikoo.all.min.js envId: https://xx.xx.com
|
然后评论功能就配置成功啦,可以在 page 或 post 文件头部添加comments
字段指定该页面是否启用评论
网站评论功能启用后,在 twikoo 管理面板中通过DEFAULT_GRAVATAR
参数可以设置评论默认使用的头像类型,这些头像的区别如下
给评论添加输入提示框,教程参考自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
| .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; top: -60px; white-space: nowrap; border-radius: 10px; 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;
border: 12px solid transparent; border-top-color: #444; left: 50%; transform: translate(-50%, -48px); }
.tk-nick.tk-nick-link { color: #f56c6c!important; }
|