访问博客查看 本文 最新内容，排版更美观ヾ(•ω•`)o 如有错误欢迎指出~
Hello My World 的姊妹篇。
本站基于 Hexo + GitHub 搭建，采用 Fluid 主题。
这篇文章记录了博客的配置历程，包括：主题配置、域名配置、功能扩展。
主题配置
本站采用的是 Fluid 主题，以下的配置在路径 hewei2001/_config.fluid.yml 中可以实现。该文件的介绍参见 主题配置指南 。以下仅介绍部分较为特殊的配置，其他内容可在指南中找到。
代码高亮
lib: 选择生成高亮的库，可选项有 highlightjs 和 prismjs，对应下面两组配置。
这里选择 highlightjs，将 style 修改为 Night Owl 风格，将 bg_color 修改为 true 以适配暗色代码框。
其他尝试过的主题还有 Atom One Dark Reasonable、Vs 2015、Github Dark Dimmed，都是不错的暗色风格。
Mac 风格代码块
在 GitHub 的 Issue 发现有人提供了自定义样式实现 Mac 风格代码块的方法，遂尝试之。首先在路径 hewei2001/themes/fluid/source/css 下新建文件 mac.styl，复制以下代码：
.highlight
background: #011627
border-radius: 5px
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
padding-top: 30px
&::before
background: #fc625d
border-radius: 50%
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
content: ' '
height: 12px
left: 12px
margin-top: -20px
position: absolute
width: 12px
然后在路径 hewei2001/_config.fluid.yml 中找到 custom_css 选项，加入 /css/mac.css 代码，注意这里后缀名依然使用 .css，不然无法识别！
行内代码颜色
默认的行内代码颜色和正文颜色是继承关系，且行内代码背景色也不明显，因此视觉上难以区分。但是配置文件中又没有对应选项可以修改，查阅 GitHub 的 Issue 发现，有人曾提供过一个解决方案。
打开路径 hewei2001/themes/fluid/source/css/_pages/_base 下的 base.styl 文件，找到 code 配置项，修改颜色为 #E05B35。
评论功能
Valine 是国内的一款极简风格的评论软件，也是 Fluid 支持的评论软件之一。在 comment 中选择 valine，之后找到相应的配置区域进行如下操作：
进入官网 LeanCloud 完成注册，然后在控制台创建一个项目 Blog.Comments 后，获取密钥（App ID 和 App Key），在对应位置填入。其他内容选项可以在官网找到说明。
访问人数统计
Fluid 主题提供两种网站的 PV、UV 统计数来源：LeanCloud 与 不蒜子。不蒜子不需要申请账号，直接开启即可，但有时候会响应缓慢拖慢整个页面加载。LeanCloud 使用前需要申请账号，由于前面使用评论功能时已经注册，我们这边直接使用就行。
在控制台创建一个项目 Blog.Counter 后，获取密钥（App ID 和 App Key）和大陆服务器地址，填入 web_analytics 配置项中 leancloud API 相关参数。
内置 Tag 插件
Fluid 内置了一些 Tag 插件，用于实现 Markdown 不容易生成的样式，以下仅列出两种常用的使用语法，添加在 md 文件中：
- 脚注
正文[^1]
## 参考
[^1]: 参考资料1
[^2]: 参考资料2
- Tag 便签
在 markdown 中加入如下的代码来使用便签：
{% note success %}
文字 或者 `Markdown` 均可
可选便签：primary/secondary/success/danger/warning/info/light
{% endnote %}
或者使用 HTML 形式：
<p class="note note-primary">标签</p>
Latex 数学公式
post:
math:
enable: true
specific: false
engine: mathjax 或 katex
其中 specific 建议开启：当为 true 时，只有在文章 Front-matter 里指定 math: true 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度。
由于 Hexo 默认的 Markdown 渲染器不支持复杂公式，所以必须更换渲染器。
$ npm uninstall hexo-renderer-marked --save # 卸载原渲染器
$ npm install hexo-renderer-kramed --save # mathjax
$ npm install @upupming/hexo-renderer-markdown-it-plus --save # katex
这里选择 MathJax，是因为对 LaTeX 语法支持全面，且右键点击公式有扩展功能菜单。
但是 Hexo 中默认会将下划线解析为斜体，使得用 MathJax 渲染公式下标有时会出错，需要找到路径 node_modules\kramed\lib\rules\inline.js，修改：
//第11行：取消对 \ 和 {} 的转义 escape
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,
//第20行：
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
Tips1：在使用数学公式时，应当避免使用两个连续的
{}，否则会被 Hexo 解释为特殊标签，从而报错。Tips2：Hexo 对公式的支持不如 Typora 好，譬如多行公式需要用
\begin{aligned} ... \end{aligned}，换行符\\和定位符&。Tips3：Hexo 中变量的上下标只能用 LaTeX 实现而不能用 Enhanced Markdown 语法。
域名配置
部署到 Coding Pages
Coding 可以算是国内的 GitHub，尽管并不是特别流行，但部署到上面可以使国内访问速度更快，还可以提交百度收录（GitHub 禁止了百度的爬取）。
注意：由于 Coding 在前段时间改版后，原有的个人版 Pages 下架，以企业版的形式重新开放，新版的静态网站服务需调用腾讯云对象存储 COS、内容分发网络 CDN、SSL 证书产品等资源，其中 COS 和 CDN 采用用量计费模式。故本博客暂不采用 Coding 部署。
添加百度谷歌收录
如果仅部署在 GitHub Pages，是无法被百度收录的，因为 GitHub 禁止了百度爬虫，最常见的解决办法是双线部署到 Coding Pages 和 GitHub Pages。
本站暂不考虑。
自定义域名
有了 GitHub Pages 服务器自带的域名后，还可以到阿里云再购买一个自定义域名，然后将域名解析到博客的域名，具体过程如下：
- 注册阿里云，实名认证后在购买下 hwcoder.top 域名。
- 打开域名控制台，进入域名解析列表，进入新买的域名，添加两条记录：
- 主机记录：@；记录类型：A；记录值为 GitHub Pages 域名的 IP。
- 主机记录：www；记录类型：CNAME；记录值为 GitHub Pages 域名。
- 在路径
hewei2001/source下新建一个CNAME文件，里面填写我们买的域名，注意文件不需要任何后缀。 - GitHub 中打开对应仓库，在 Setting 中找到 Pages，添加 Custom Domain 为新买的域名，旁边的一个
Enforce HTTPS勾选后我们的网站就变为 https://hwcoder.top。 - 路径
hewei2001/_config.yml的#URL部分，更改为新域名。
以上操作后就可以在自定义的域名访问博客站点了，如果显示的内容与本地服务器查看内容不同，清除浏览器缓存后即可解决。如果不能解决，检查是否以上步骤有错。
其他功能扩展
以下配置是在 Fluid 主题中不具有的功能，通过各种插件实现。
备份博客到 GitHub
由于 Hexo 博客是静态托管的，所有的原始数据都保存在本地，如果哪一天电脑坏了，或者是误删了本地数据就很危险了。
GitHub 上可以找到一个 hexo-git-backup 插件，但似乎已经不再更新了，仅支持 Hexo 3.x.x 版本，尝试后放弃。
压缩静态资源
博客中有大量 HTML、CSS、JS 文件，这些文件为了阅读方便会加入许多回车和空行，但在页面解析时其实会浪费部分时间，此外如果有许多插图，也会拖慢网页加载，并占据 GitHub 仓库的存储空间。
目前有关插件有 gulp、hexo-neat、hexo-all-minifier。推荐采用集成度比较高的 hexo-all-minifier 来实现，由于在安装依赖包过程报错，本站最终采用了 hexo-neat。
$ npm install hexo-all-minifier --save # 出现 npm ERR! code ELIFECYCLE 错误
$ npm install hexo-neat --save # 换成这个后成功安装
之后在配置文件 hewei2001/_config.yml 中增加如下内容就行：
# hexo-neat
## Docs: https://github.com/rozbo/hexo-neat
neat_enable: true
# 压缩 html
neat_html:
enable: true
exclude:
# 压缩 css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩 js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
