Hexo Blog 网站初步定制

本博文讨论 Hexo 的网站架构设置，以及默认的 landscape 主题定制。实际上，本博客网站已经全面转换到 NexT 主题了。保留本文是为了让喜欢 landscape 主题的人留个参考，也是让我自己的自学过程留点痕迹。建议选择 1080p 品质观看配套视频 (为了让大家听懂我的闽南地瓜腔，学习了制作字幕。现在终于知道后期制作的艰辛乏味，12 分钟的视频花了近 200 分钟来制作字幕，即录入字幕文字和时间对齐工作)

为了清晰概念，我把 Blog 网站的整体配置分为两部分: 架构配置，以及主题配置。本博文中分别对应于 /hexo-dir (代表 /2T/smb/git/hexo) 目录和 /hexo-dir/themes/landscape 里的 _config.yml 文件。

Hexo 基本定制

Hexo 使用 yml 文件来设定网站的架构，架构配置文件可以设定网站的标题 (title)、外观主题 (there)，以及博文的URL等等。此外，为了扩展 md 的功能，本博客不采用 Hexo 默认的渲染器，而是采用功能极其强大又易用的 pandoc 渲染器。

架构配置

网站的架构配置文件为 /hexo-dir/_config.yml 文件，在自学 Hexo 搭建 GitHub 免费 Blog 里只是简单的修改，这里给出更完整的脚本 HexoSite.sh

#!/bin/bash
#修改站点架构设置 title author language url permalink
sed -ne '/# Site/ {p; r HexoSite' -e ':a; n; /^permalink_defaults/ {p; b}; ba}; p' -i $1/_config.yml
#替换主题
sed "s/^theme.*/theme: $2/" -i $1/_config.yml

ooNoIndent00其中 HexoSite 的内容为

title: 灯塔 · 随记随想
subtitle:
description:
author: CHEN Deng-Ta
language: default
timezone:

# URL
## If your site is put in a subdirectory, set url as ‘http://yoursite.com/child’ and root as ‘/child/’
url: https://maxchendt.github.io/
root: /
permalink: Blog/:year:month:day:title.html

ooNoIndent00需要补充的是 permalink 设置下，将博文默认的 2016/09/02/instHexo/index.html 修改为 Blog/20160902instHexo.html，避免建立繁杂目录结构，将博文按时间和标题命名后统一保存在 Blog 目录下。

本小节相关代码文件为 HexoSite.tar.xz，下载后解开，只需要修改 HexoSite 文本即可，再执行

./HexoSite.sh /hexo-dir landscape

ooNoIndent00即可 (第一个参数为 Hexo 目录，第二个参数为主题)。

特别提醒：手动方式修改时， yml 配置文件的冒号后必须有一个空格。

补 (2016-10-12 20:04)：HexoSite.tar.gz 更名为 HexoSite.tar.xz，由于增加了 Sitemap 配置

npm install hexo-generator-sitemap --save

ooNoIndent00hexo g 就能生成 sitemap.xml 文件，提交给 Google Search Console¹ 方便其索引工作，用户更容易搜索到相应的网页。

更换渲染器

Hexo 默认的渲染器为 marked (hexo-renderer-marked) 渲染器。该渲染器仅支持 md 的基本规范，比如我喜欢使用脚注²，基本规范里是不支持的。因此，经过多日的探索，我发现使用 pandoc 进行渲染，让我心花怒放 (我是 2016-09-12 日启用她的。需先安装 pandoc 软件，例如安装版本 1.17.2 到操作系统中)

1 2	npm un hexo-renderer-marked --save npm install hexo-renderer-pandoc --save

ooNoIndent00卸载默认的 marked 渲染器，安装 pandoc 渲染器。使用了 pandoc 进行渲染后，写博客简直就是一种乐趣。Pandoc is a universal document converter, 她真的不是一般的牛！对 md 扩展支持让我拜倒，例如脚注的支持部分 http://pandoc.org/MANUAL.html#footnotes 。

关于脚注的支持，hexo-footnotes 真的是误人子弟，太粗糙了，脚注要人工编号，也不支持 inline 脚注。我给他发了个 issue 之后，他终止了该项目，转而推荐改用 Markdown-it (hexo-renderer-markdown-it)。实际上，早在尝试 pandoc 渲染器之前就测试过 Markdown-it 了，它对脚注等支持体验不佳，不仅需要改变渲染器，并且配置复杂，此外还需要 markdown-it-footnote 插件。

需要提醒的是：pandoc 渲染器对 md 的格式要求更加规范些，例如链接需要用< >括号显式包含；quoteblock 每行必须跟两空格表示换行(如果后续行没有>标记的话)。诸如此类的，写两篇 md 博文，也就明白了 (指导硕、博研究生时，我也是要求他们在做中学，这里是不是也改成脚注？)。当然，把 Pandoc’s Markdown 浏览一下是很有必要的，或者 pdf 版本。

Landscape 主题定制

本节的全部配置打包为 HexoLandscape.tar.xz, 解开后执行

./fixLandscape.sh /hexo-dir/themes/landscape

ooNoIndent00将实现

功能方面的扩展：如数学公式显示和留言评论
数字编号：博文章节编号，视觉上感受层次清晰
页面布局：目录，横幅(banner)图片, 主区域布局调整
显示样式：引文样式, 代码块加圆角, 行内代码颜色

ooNoIndent00脚本 fixLandscape.sh 基本上是调用 sed 命令，修改相应的配置文件。感兴趣的话建议读一下其中的 ReadMe.txt 文件，自行查看源代码，博文中不再重复，其中有关 sed 命令的语句建议参考 Sed - An Introduction and Tutorial by Bruce Barnett。

数学

数学公式的网页显示³，对我非常重要 (博客肩负教学和科研的任务) Simple inline $a = b + c$. And block math: Black-Schole\[ c=S_{t}N\left( d_{1}\right) -e^{-r(T-t)}KN\left( d_{2}\right) \] with \[ d_{1}=\frac{\ln\left( S_{t}/K\right) +\left( r+\sigma^{2}/2\right) (T-t)}{\sigma\sqrt{T-t}}\qquad d_{2}=d_{1}-\sigma\sqrt{T-t}\] 这种称为行间公式哦。只要有 LaTeX 基础，理解这些公式就很简单：比如其中的 $d_{1}=\frac{\ln( S_{t}/K) +( r+\sigma^{2}/2) (T-t)}{\sigma\sqrt{T-t}}$ 的源代码为

d_{1}=\frac{\ln(S_{t}/K)  +(r+\sigma^{2}/2)(T-t)}{\sigma\sqrt{T-t}}

Bug 提醒：hexo issues/2064 提到了连续两个花括号的问题，即 { {。处理方式为

表达式 $EI=\{ {EI}_1,{EI}_2,\cdots,{EI}_V\}$ 代码为 $EI=\{ {EI}_1,{EI}_2,\cdots,{EI}_V\}$ (使用 \ 保留外层花括号)，当然，我是避免使用多字母的变量名的。
表达式 $\mathrm{cov}_{t_{b}}^{ {}}\left( S(t_{c}),F(t_{c})\right)$ 中使用了空上标，是为了$t_{b}$的位置显更低些，代码为 $\mathrm{cov}_{t_{b}}^{ {}}\left( S(t_{c}),F(t_{c})\right)$ (连续两个左花括号中间插入空格)。测试表明，本博客中空上标 ^{ {}} 无效果，应该改成 ^{\,}，例如 $y_{H}^{\,}$ (对比无空上标的 $y_{H}$, 使用空上标时下标 $H$ 的位置降低了一点点，美观一些)。这个对我有点影响，因为我用 SWP 版本⁴ 5 来录入数学公式，拷贝到 md 文件里面，需要预处理空上标里的空组。

留言评论

看客们往往有话要说，或者想每到一处，到此一游，留个脚印。对于博主来说，也是好事，有些留言评论是言者无意，听者有心啊。Hexo 支持多种方式的留言评论，我选择了 Disqus 免费系统。Hexo 博客要启用 Disqus, 需要先到 https://disqus.com 注册并创建 shortname ⁵，创建时选择 “I want to install Disqus on my site” 。然后再进行必要的设置，比如 (请用您的 shortname 替换示例中的 maxchendt): 进入 disqus.com settings/general 页面里将 “Website URL” 设置为 https://maxchendt.github.io 等等。

提示: 如果要使用 HexoLandscape.tar.xz 中的脚本，请修改其中 Disqus 文件里的 maxchendt 替换成您的 shortname，这是唯一需要修改的地方。如果还没有 shortname，请将 Disqus 文本文件的第一行注释掉，即第一行的最前面加入字符 #。

补 (2016-10-09 22:03)：theme-landscape pull/40 提到 “It is expected disqus_shortname is located in Hexo’s _config.yml”. 而我们这里修改的是主题的 _config.yml, 因此建议将 layout/_partial/ 里的 after-footer.ejs 和 article.ejs 文件中的 config.disqus_shortname 全部替换为 theme.disqus_shortname。个人认为，landscape 主题还有待完善，代码在主题里，配置也应该放在主题层次，而不是网站架构层次。

章节编号

当前似乎比较流行没有章节编号，只是字体不同(大小、字形等)。对于这里排版，我是很不喜欢的，阅读到中间，不知今昔是何年的感觉，分不清纲要层次。博文页面中，显示出章节编号是很容易的，完全不需要那么懒惰，而找一大堆理由进行苍白无力地搪塞。

设置的相关代码为 numHeading，我是到 3meng issues/1 进行请教的，不到两个小时，就得到回应了。显然，我们要保持像小朋友那样，有问题就提问。当然，不仅要敢提问，还要学会提问，善于提问。

Hexo 是支持目录的, 可惜 Landscape 主题并没有默认进行支持。配置代码⁶为 ToC, 相应的样式为 ToC-CSS。如果博文要显示目录，需要在 front-matter (文件最上方以 --- 分隔的区域，用于指定个别文件的变量) 添加 toc: true。开心的是，我喜欢的 NexT 主题默认支持目录，不需要任何额外工作。

布局和样式

整个页面中， banner (横幅) 图片最需要调整，首先是更换成与博主相关的，其次是不需要占据那么大的篇幅。图片 Lighthouse.jpg 是从网上找到的大风暴中、惊涛骇浪中的灯塔，再经过简单处理得到的。只有经历了风浪之后，感觉平静特别的美好。

主区域布局中，默认为 3:1，博文区相对教小，调整为 5:1，边栏毕竟是辅助性质的，太大了喧宾夺主。关于样式的修改

引文样式: Landscape 主题默认的引文样式感觉是为诗人设定的，不信到这里瞧瞧: landscape tag-plugins, 字体比正文还大，而且居中，太文学了，恕我难以接受。因此，采用 QuoteBlock 文件里面的 CSS 片段进行修改。
突出显示部分 (highlight): 代码块加圆角以及行内代码颜色修改。

小技巧

小小技巧，帮大忙。Hexo 给出了不少有用的 Tag Plugins, 如插入图片，插入代码片段等，短小精悍，犹如小匕首，这里演示一下插入 Youtube 视频。此外，当使用 https 方式的 git 命令时，可以让用户和密码记住一段时间，该时间段内 git 操作不再需要输入用户名和密码。

youtube 视频

本博客的重要目的之一就是教学，当然要能方便的链接到 Youtube 的视频。 Hexo 的 Tag Plugins 提供直接插入 Youtube 视频的方法，例如 {% youtube RiF6m3InMRM %} (这里使用了 Hexo 的 raw tag) 将插入十年前 (2006年) 的讲课视频如下

ooNoIndent00这种方式得到的视频框是 responsive 的，即视频框大小随浏览器窗口自动调节。如果想要得到固定大小的视频框，例如

ooNoIndent00视频框大小为 320x180, 相应的代码为 (直接插入 html 代码，视频框还可以居中)

1	<iframe width="320" height="180" src="https://www.youtube.com/embed/RiF6m3InMRM" frameborder="0" allowfullscreen></iframe>

缓存密码

在自学 Hexo 搭建 GitHub 免费 Blog 中，我建议用 https 协议 (deploy.sh) 提交网站内容到 GitHub 中。这带来一个问题，每次 commit 更新时，总要求输入用户名和密码。stackoverflow 6565357 给出了一些处理方法，我推荐的是 github caching 里的方法

1
2
3

git config --global credential.helper cache
git config --global credential.helper 'cache --timeout=1296000'
#1296000/3600/24 = 15 days

ooNoIndent00用户名和密码加密保存在内存中 15 天，该期间 git commit 免输入 GitHub 的用户名和密码。