hexo新主题：Hexo历险记之四美改Stun主题
hexo新主题：Hexo历险记之四美改Stun主题从hexo的主题官网搜索框里找到stun，点开页面之后，点击页面内github图标，打开项目页面。认真阅读项目Readme文件，了解如何安装和配置主题。以下载stun主题为例，给大家进行示例，在2020.7.17的最新版本为v4.2.1，我一直使用到现在没有出现过明显Bug，所以本文会继续沿用这个版本的主题。Hexo历险记之四美改Stun主题向官方文档致敬，附上一张Stun主题 v2.1.1结构图。主题文件目录结构
前言接下来，我们来换一个合心意的主题！
2019年的时候，网上最出名的应该就是Next主题了，只要在搜索引擎上寻找，几乎都是建议使用Next。而我之所以另寻出路，只是主观不太喜欢，而且我在官网上浏览后，发现了很戳我审美的stun主题。
所以，我也是建议你，先去hexo的主题官网遍览三百大道（截止到2022.7.26号已经有369个公开主题了），再具体考虑选择某个主题，微调后就成为你自己最喜欢的博客主题啦。
时隔四年，重启Hexo历险计划！
Hexo历险记之四美改Stun主题
向官方文档致敬，附上一张Stun主题 v2.1.1结构图。
主题文件目录结构
下载主题以下载stun主题为例，给大家进行示例，在2020.7.17的最新版本为v4.2.1，我一直使用到现在没有出现过明显Bug，所以本文会继续沿用这个版本的主题。
从hexo的主题官网搜索框里找到stun，点开页面之后，点击页面内github图标，打开项目页面。认真阅读项目Readme文件，了解如何安装和配置主题。
第一步，切换到你的hexo站点目录下，克隆项目文件到themes/stun文件夹内。
$gitclonehttps://github.com/liuyib/hexo-theme-stun.gitthemes/stun
第二步，去Hexo 根目录的_config.yml文件里修改渲染主题，就算完成了切换主题。
theme:stun
接下来，你需要分清下面这两个配置文件的作用：
- Hexo 根目录下的 _config.yml。这是站点配置文件，里面的配置作用于整个网站。
- Stun 根目录下的_config.yml。这是主题配置文件，里面的配置只对当前主题生效。
由于我选择的这个主题比较特别，还需要单独下载另一个插件辅助渲染。
npminstall--savehexo-render-pug
美化主题新增自定义页面
请参考官方文档-添加新页面，我想要新增四个页面，分别是用来展示分类、标签、阅读书目以及自我介绍。
image-20220726175704266
第一步，启用分类页，标签页，阅读页，博主页。
hexonewpagecategories
hexonewpagetags
hexonewpageread
hexonewpageabout
第二步，找到 themes\stun\languages目录下的语言文件进行修改。
#导航栏菜单
menu:
home:首页
archives:归档
categories:分类
tags:标签
about:博主
read:阅读
#网站底部
footer:
powered:由%s大力支持
#提示信息
prompt:
copy_success:恭喜亲亲，复制成功咧
copy_error:哎呀，复制失败了
第三步，找到 themes\stun\_config.yml 修改，图标的名称可以在https://fontawesome.com/v4.7.0/icons/获取。
menu:
home:/||fasfa-home
archives:/archives/||fasfa-folder-open
categories:/categories/||fasfa-layer-group
tags:/tags/||fasfa-tags
about:/about/||fasfa-user
read:/read/||fasfa-book
最后一步，修改站点配置文件，就完成了自定义页面的添加。
language:zh-CN
展开文章目录
image-20220726180109353
修改主题配置文件。是否始终展开所有文章目录。true：始终展开，false：当文章中对应的标题到达顶部时自动展开。
toc:
#是否始终展开所有文章目录。true：始终展开，false：当文章中对应的标题到达顶部时自动展开。
expand_all:true
顶部栏设置
image-20220726180137179
将自己喜欢的图片复制后放到主题的资源配置文件夹中，比如Stun主题就是myblog\themes\stun\source\images文件夹，我将图片命名为3.jpg，如下修改主题配置文件。
header:
#网站顶部的高度（设置为百分数，表示所占屏幕高度的百分比。支持所有 CSS 长度单位）
height:60%
#顶部背景图片
bg_image:
enable:true
#填写图片路径或链接，图片放在myblog\themes\stun\source\images
url:/images/3.jpg
#顶部背景图的遮罩效果
mask:
enable:true
#透明度（取值：0~ 1）
opacity:0.1
底部栏信息
image-20220726180152066
与修改顶部栏相似，修改主题配置文件。
footer:
#顶部背景图
bg_image:
#是否启用
enable:true
#填写图片路径或链接
url:/images/1.jpg
mask:
enable:true
#Opacityofmask(value:0~1)
opacity:0.5
copyright:
enable:false
#Hexo链接（PoweredbyHexo）
powered:
enable:true
#备案信息（只有中国开发者会用到）详情:http://www.miitbeian.gov.cn/
beian:
enable:true
icp:冀ICP备19023374号
#支持任何自定义文本，支持 Html（例如：托管于<a href="https://pages.github.com/" rel="noopener" target="_blank">Github Pages</a>）
custom:
enable:true
text:君匡博客-为了成为更好的自己
侧边栏作者信息
image-20220726180213435
我就是将圆形头像复制到了主题的资源配置文件夹，修改主题配置文件。
author:
#侧边栏头像
avatar:
#填写图片路径或链接
url:/images/君匡.jpg
#是否显示为圆形
rounded:true
#头像透明度（取值：0~ 1）
opacity:1
#hover 动画，可选值：trun(旋转)或 shake(抖动)
animation:trun
#格言
motto:为了成为更好的自己
社交链接
image-20220726180236345
如果不想启用某个社交链接，直接注释掉即可，修改主题配置文件，
#`||`分隔符前面表示社交链接的链接或信息，后面表示社交链接图标。
#图标的名称在这里查找：https://fontawesome.com/v4.7.0/icons/
#如果你找不到想要的图标，可以考虑用文字来代替图标显示。
#通过添加`origin:`前缀即可显示文字。例如：`origin:知`会以`知`代替图标显示。
social:
github:https://github.com/JunKuangKuang/hexo-abbrlink3||fabfa-github
zhihu:https://www.zhihu.com/people/ke-en-da-di-27||origin:知
bilibili:https://space.bilibili.com/130257724/article||origin:Bili
wechat:junxiaokuang.jpg||fabfa-weixin
jianshu:https://www.jianshu.com/u/9e90f8e6089c||origin:简书
CSDN:https://blog.csdn.net/qq_41461536||origin:CSDN
toutiao:https://www.toutiao.com/c/user/token/MS4wLjABAAAAYXwxuP1jBhP4f6VzzfZ9PMXOPQXZKg5iFtjHQyKEAvM||origin:头条号
#你可以自行添加这里没有的社交链接，格式如下：
#xxx:xxx||(origin:)xxx
#社交链接的一些设置
social_setting:
#是否启用
enable:true
#是否只显示图标
icon_only:true
找到 languages 目录下的语言文件zh-CN.yml，对应于鼠标经过图标时，显示的文字。
social:
juejin:掘金
开启fancybox
开启fancyBox
点击图片会放大到全屏幕，左右点击会切换当前文章内的所有图片，再点击空白处会恢复如初。修改主题配置文件。
fancybox:true
代码溢出换行
image-20220726180800325
对于程序猿来说，一行代码过长是很容易遇见的，修改主题配置文件。
codeblock:
#Whethertowrapwhencodeoverflow.
word_wrap:true
Pjax
Pjax 结合 pushState 和 ajax 技术， 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。
pjax:
enable:true
已知问题有两个：
- 不兼容 MathJax（必须手动刷新页面一次后，MathJax 才能正常使用，KaTex 可以正常使用）。
- 有些 JS、CSS 文件只会在特定的页面加载，如果启用了 Pjax，则会在所有页面加载。
image-20220726180849619
修改主题配置文件。
busuanzi:
#是否启用
enable:true
#统计站点用户
site_uv:
enable:false
#统计站点浏览数量
site_pv:
enable:true
#统计每篇文章的PV数量
post_pv:
enable:true
favicon图标设置
image-20220726180921899
将你自己做的指定像素大小的图片放在文件夹themes\stun\source\images\icons，修改配置文件。
favicon:
small:/images/icons/16x16.jpg
medium:/images/icons/32x32.jpg
quicklink
使浏览器在空闲时间预取可视区内的链接，以加快后续页面的加载速度。修改主题配置文件。
quicklink:
#是否启用。这里启用之后并不会对所有页面生效，你还需要进行下面的设置
enable:true
#设置home页面和archive页面是否启用
home:true
archive:true
感谢
感谢19年8月份的自己，能够坚持到现在。
官方文档致敬
hexo的主题官网
