Hexo历险记之四美改Stun主题

前言

接下来，我们来换一个合心意的主题！

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文件夹内。

$ git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun

第二步，去Hexo 根目录的_config.yml文件里修改渲染主题，就算完成了切换主题。

theme: stun

接下来，你需要分清下面这两个配置文件的作用：

• Hexo 根目录下的 _config.yml。这是站点配置文件，里面的配置作用于整个网站。

• Stun 根目录下的_config.yml。这是主题配置文件，里面的配置只对当前主题生效。

由于我选择的这个主题比较特别，还需要单独下载另一个插件辅助渲染。

npm install --save hexo-render-pug

美化主题

新增自定义页面

请参考官方文档-添加新页面，我想要新增四个页面，分别是用来展示分类、标签、阅读书目以及自我介绍。

image-20220726175704266

第一步，启用分类页，标签页，阅读页，博主页。

hexo new page categories
hexo new page tags
hexo new page read
hexo new page about

第二步，找到 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: / || fas fa-home
  archives: /archives/ || fas fa-folder-open
  categories: /categories/ || fas fa-layer-group
  tags: /tags/ || fas fa-tags
  about: /about/ || fas fa-user
  read: /read/ || fas fa-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
    # Opacity of mask (value: 0 ~ 1)
    opacity: 0.5
    
  copyright:
    enable: false
  # Hexo 链接（Powered by Hexo）
  powered:
    enable: true
  # 备案信息（只有中国开发者会用到）详情: http://www.miitbeian.gov.cn/
  beian:
    enable: true
    icp: 冀ICP备19023374号
  # 支持任何自定义文本，支持 HTML（例如：托管于 Github Pages）
  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 || fab fa-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 || fab fa-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:
 # Whether to wrap when code overflow.
 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的主题官网