Hexo历险记之四美改Stun主题

前言

接下来,我们来换一个合心意的主题!

2019年的时候,网上最出名的应该就是Next主题了,只要在搜索引擎上寻找,几乎都是建议使用Next。而我之所以另寻出路,只是主观不太喜欢,而且我在官网上浏览后,发现了很戳我审美的Stun主题。

所以,我也是建议你,先去hexo的主题官网遍览三百大道(截止到2022.7.26号已经有369个公开主题了),再具体考虑选择某个主题,微调后就成为你自己最喜欢的博客主题啦。

时隔四年,重启Hexo历险计划!

Hexo历险记之四美改Stun主题_第1张图片

Hexo历险记之四美改Stun主题

向官方文档致敬,附上一张Stun主题 v2.1.1结构图。

Hexo历险记之四美改Stun主题_第2张图片

主题文件目录结构

下载主题

以下载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

展开文章目录

Hexo历险记之四美改Stun主题_第3张图片

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: 君匡博客-为了成为更好的自己

侧边栏作者信息

Hexo历险记之四美改Stun主题_第4张图片

image-20220726180213435

我就是将圆形头像复制到了主题的资源配置文件夹,修改主题配置文件。

author:
  #侧边栏头像
  avatar:
    #填写图片路径或链接
    url: /images/君匡.jpg
    #是否显示为圆形
    rounded: true
    #头像透明度(取值:0 ~ 1)
    opacity: 1
    #hover 动画,可选值:trun(旋转) 或 shake(抖动)
    animation: trun
  #格言
  motto: 为了成为更好的自己    

社交链接

Hexo历险记之四美改Stun主题_第5张图片

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

Hexo历险记之四美改Stun主题_第6张图片

开启fancyBox

点击图片会放大到全屏幕,左右点击会切换当前文章内的所有图片,再点击空白处会恢复如初。修改主题配置文件。

fancybox: true

代码溢出换行

Hexo历险记之四美改Stun主题_第7张图片

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,则会在所有页面加载。

卜蒜子统计

Hexo历险记之四美改Stun主题_第8张图片

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的主题官网

你可能感兴趣的:(君匡玩hexo,git,node.js,npm)