记更换网站主题

2025-10-04

技术

更换了一下网站主题，写一下经历

前言

先前的ParticleX我一直用得非常舒服，但后来翻到了Reimu。加之我也是个车车人，就~~抛下了~~将ParticleX换成了Reimu，将过程记录下来

安装Reimu主题

写文章的时候偶然发现Reimu主题。心动就在一瞬间，决定更换ParticleX到Reimu

之前没有任何更换网站主题的经验，本身也没有任何编译功底。身为纯小白唯一能想到的方法：就是另外创建一个新主题博客，推到Github上面将原本的旧主题博客覆盖掉，再把文章复制过来

最初使用的方法是把Reimu仓库直接克隆到 themes 文件夹下并重命名为 Reimu

1	git clone https://github.com/D-Sketon/hexo-theme-reimu.git

在改完外层 _config.yml 后渲染网站，发现出现报错

　　　　抱着运行试试看的心理，启动了一下本地服务器
　　　　不出意外的，加载不出来网页
　　　　接着尝试了自行修改，根据报错提示
　　　　定义了它所示的 get_posts_by_lang 函数
　　　　结果发现出现了更多的问题

尝试把问题丢给了AI，并听取AI建议尝试修改了 archives.ejs 的内容，并在 _config.yml 主题配置中添加了helper；又试着根据Hexo新版本的语法修改了 tag.ejs 的代码，在 scirpts 文件夹添加了 helper.ejs自定义辅助函数

结果出现了更多的问题(╯°□°）╯︵ ┻━┻

无奈，使用作者提供的reimu-template模板，安装过程很顺利，本以为能美美使用Reimu主题，但配置过程却出现了问题：
我想要修改网站的 favicon 网站图标，自定义favicon的路径在 themes - source - images 里面，但是reimu-template模板不配备 themes 文件夹，我无法去修改网站 favicon 图标，倘若保存在 public 文件夹里面就会因清除网站缓存连带被清除

又只能回头安装并配置网站主题
这次尝试了升级npm

1
2
3

npm cache clean --force
npm update -g npm
npm update

竟然神奇地把问题解决了，始终都没搞清这里面的关系。不过好在主题成功安装，那就开始使用吧
美美配置完网站内容，就已经是凌晨1点了，临睡前打开了外层 config_yml 文件

# Site
title: ChiDuCD
subtitle: ''
description: ''
keywords:
author: ChiDuCD
language: en
timezone: ''

看见 language 一栏后面写的是 en ，索性改成了 cn

后面的事故都是因为这一个改语言的举措造成的
偏偏我睡前大脑不清醒，第二天忘了这件事(ノへ￣、)

第二天醒来开开心心准备继续配置网站的，本地运行又看见了报错信息，道心破碎，就把Reimu主题放弃了

第三天不服气，把删掉的主题文件又克隆回来，发现了相同的问题，尝试着去升级了下Hexo

npm i hexo-cli -g
npm install -g npm-check
npm-check
npm install -g npm-upgrade
npm-upgrade
npm update -g
npm update --save

又一次解决了问题，进行了跟昨天一样的配置过程，最后再次打开 _config.yml 修改语言、本地运行、发现报错，但这次发现了问题所在，并且通过查看文件，Reimu主题默认所有 en 与 zh-CN 两种语言，我是在没有添加语言的情况下在语言填入 cn 导致了报错

配置Reimu主题

图片加载优化

之后在查看过程中，发现网站部分图片默认引用了png格式的图片，将其转化为webp格式后并修改了引用，对于部分未发现代码，但发现被引用的图片，则对其压缩并进行了替换

原先网站的图片我是全部托管到服务器上面的，但对于新网站，考虑到弱网图片加载下的访问以及服务器带宽的限制，决定仅对于所有文章的封面都托管到PICUI图床上面，以平衡图床托管空间的和服务器网络带宽的限制

文章编写适配

在迁移老文章的时候发现新老主题对于Markdown和HTML的读取逻辑不一样，又稍微修改了一下文章。而且在之前编写文章中，我养成了用小号标题代替加粗字体与中号字体的坏习惯，导致新主题的文章目录显示十分混乱，后来决定使用过时的HTML标签来写中大号字体并规避目录的检测：

1	<font size="4">4号字体</font> #就像这样

❗注意，此方法在HTML5已被废弃，请谨慎使用

音乐播放器

照着Reimu官方文档同时采用了Aplayer与Meting，链接的 server 服务器是网易云。
最开始写配置的时候自作聪明地在Aplayer部分的 fixed 固定一栏填了 true ，后面渲染网站的时候发现死活改不了播放器的位置，在 position 那改了半天的位置，上网查了很多文档，最后差点就去Git issues问作者了

options:
  audio: []
  fixed: false #就是这里
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: true
  listFolded: true
  lrcType: 0

修改的契机是在回看Meting设置时，重新思考发现自己理解的 fixed 有误，在尝试修改了内层 _config.yml 后解决了问题

RSS订阅

配置RSS订阅在本地预览时，中文总是显示乱码。自查了编码格式，尝试更改了RSS订阅文件格式也无果

去贴吧找解决方法翻到了2014年的帖子，大家言辞友善幽默，感慨于当时网络氛围之和睦

部署到Github上面后发现RSS订阅的中文显示正常。此时我也无心研究了，就这样吧(/ω＼)

评论区

采用了Giscus评论，当时挑选评论系统还挑了半天。后面才发现其实都差不多（大嘘）
配置过程没什么深刻的记忆。我是新建了一个专门存放评论的Github仓库并与评论系统关联，后面不容易与我网站混淆

前言