[Day32] Hexo - 修改主题样式及一些问题排除

虽然 Hexo 要完成架设 Blog 仅仅是几秒钟的时间就完成，但是在细部调整时还是会遇到不少困难，以下记录了一些问题排除，也简介该如何运用 Hexo 的主题做出个人化的配置修改。

1. 启动本地服务器（hexo server）时出现告警

使用版本：
Hexo: 5.4.0

错误讯息：

$ hexo -s                              
(node:87224) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:87224) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:87224) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:87224) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:87224) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:87224) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

参考资料：爬了一些文章，大概从 2020 年起就有相关的资讯，後续改版会不会修正不得而知，最後参考好一则博部落格的文章解决。
发生原因：Hexo 依赖的 [email protected] 套件指定使用较旧版本的 stylus，这个套件已经停止维护，所以需要自己修改解决。
解决方式：
1. 编辑 package.json 专案设定档，加入以下设定指定最新的 stylus 版本：
```
"resolutions": {
  "stylus": "^0.54.8"
}
```
1. 执行指令 yarn install 安装完就完成了。（** npm install 无效 **）
注意事项：如果透过指令安装了其他的主题，该设定可能会被覆盖，再次出现告警，只要再次执行 yarn install 应该就能修复。

2. 让 Hexo 在 Github Page 专案中与其他档案共存

问题说明：在 Hexo 发布到 Github 时会覆盖掉整个专案目录，如果想要在里面放自己写好的其他静态页面，或是专案根目录存放 README.md 来打造华丽的页面（可以参考Will 保哥的 Github）都会因为 deploy 这个动作被盖掉。
解决方式：
1. 先将要跟着一起部署到 Github 的档案放到 source 资料夹里面。
2. 修改 _config.yml 设定档，找到 skip_render 这个字眼，并加入档名或是资料夹名称
```
skip_render: 
  # 单档案
  - README.md
  # 整个资料夹（包含底下所有档案）
  - mypage/*
```

3. Hexo 套用主题

到 Hexo Themes 寻找喜欢的版型。
(如果点进去发现连结已经失效，就换一个吧！)
范例页面通常有这个主题的 Github 连结，本次以 Hueman 这个主题为例，找到小猫的图示就可以顺利到达他的 Github 专案。
接着就来找他的说明文件（Hueman 是放在 Github 首页的最底下），每个主题因为撰写人不同，摆放位置都不太一样。
找到安装方式（有些主题可能放在首页，有些是写在文件里）。
开始安装，有些主题是用 git clone 的方式让你将专案复制下来，有些可以使用 npm install 的方式安装，就看文件怎麽写，还要注意以下几点：
- 使用 git clone 的方法可能会需要在终端机切换当前目录位置，需看清楚文件说明。
- 安装步骤可能还有其他的额外设定，请将文件看完确保没有遗漏。
修改 Hexo 里面的 _config.yml 设定档，把 theme 的内容改成主题的名称。
```
thene: hueman
```
完成修改後可以先执行一次 hexo cl && hexo g && hexo s 来重建页面并启动本地服务器检查是否成功。

4. Hexo 个人化样式设定

布景主题的设定方式大致有两种：
- 编辑在 themes/主题名称的 _config.yml 档案（通常是使用 git clone 下载的主题）。
- 在网站根目录建置 _config.主题名称.yml 来编辑（部分使用 npm 安装的主题），这种类型的主题在安装完後网站资料夹不会新增任何档案，而是整个套件都被放在 node_modules 里面，可以到里面找到主题的_config.yml 档案，复制到自己网站根目录，并变更档名为 _config.主题名称.yml 来做修改。
本次介绍的 Hueman 主题属於前者，所以可以开启 themes/hueman/_config.yml 这个档案来修改，至於修改方式当然就是参考专案文件啦！
如果有些颜色想改掉，但是配置里面没有，可以在主题的资料夹里面搜寻关键字 variable，通常会用这个名称来存放各种颜色、单位样式，以 Hueman 为例，可以找到 _variables.styl 这个档案，应该大部分的颜色都能在这边更改了！
如果是版面配置想要做颜色以外的调整，可以搜寻关键字 style，以 Hueman 为例，可以找到 style.styl 这个档案，来加入自己想设定的样式了（需要具备自行撰写 css 的能力）。