NexT 主题私人定制

Posted on   |   In   |  

“精于心，简于形”，NexT 主题是简洁优雅的，本博客将居于该主题，进行私人定制。

建议先观看配套视频 (最好选择 1080p 品质播放)，以获得一些感性认识。 本文的全部配置打包为 HexoNext.tar.xz, 解开后执行 ./fixNext.sh /hexo-dir/themes/next , 将实现

  1. NexT 主题个性定制: 菜单设置，启用 Mist scheme, Sidebar 设置为隐藏, 以及启用 Disqus 留言评论功能
  2. JS 方式定制：纯 JavaScript 方式实现 MathJax, 侧边栏的便捷关闭, 标题自动编号, 特定段落首行不缩进, 和脚注 tip 显示
  3. CSS 定制： 段落首行缩进, 脚注, 脚注 Tip, 块引用, 代码块加圆角, 行内代码颜色

ooNoIndent00在进行定制之前，需要说明的是，Hexo Blog 网站初步定制 的部分内容，对 NexT 主题的定制也是有参考价值的的，例如：

主题配置修改

首先，需要定制好架构，参见 Hexo 基本定制: 记得改用 pandoc 渲染器, 以及启用 NexT 主题。 如下命令实现架构设定，并启用 NexT 主题

./HexoSite.sh /hexo-dir next

ooNoIndent00然后，进行 NexT 主题私人定制 ./fixNext.sh /hexo-dir/themes/next，其中主题配置部分的主要修改为

  • 菜单设置为 “Home Categories Tags Archives About” 的顺序
  • 默认的 Muse scheme 改为 Mist scheme
  • 修改 Sidebar 的默认行为，原先为进入博文页面自动打开侧栏, 改为隐藏侧栏，只有主动点击 Sidebar 按钮时，才弹出侧栏
  • 配置文件中启用 Disqus 留言评论功能，还需要其他工作，具体参考留言评论

JavaScript 定制

自己编写了 custom.js, 通过 JavaScript 实现一些特定的功能，例如有些段落的首行不缩进，鼠标停留在脚注标记上时将弹出 tooltip 显示脚注内容等。

MathJax

在 Hexo Blog 网站初步定制中， MathJax 是通过插入代码片段实现的，每个博文页面都需要包含该片段。为了减少流量，遵照 Loading and Configuring MathJax 的指引，这里我们改成纯 JavaScript 代码，对于整个博客网站，只需要载入一次，任何页面都不需要重复载入。

侧边栏的关闭

侧边栏 (Sidebar) 如果打开，NexT 主题默认情况下，需要点击关闭按钮方能关闭。参考 theme-next issues/947 的代码，使得侧边栏的关闭更加方便：边栏内非链接区或者边栏外点击，即可关闭侧边栏。

章节编号

与 landscape 定制时的章节编号并没有本质的区别，只是那里每个页面都需要载入代码片段，这里采用 js 文件实现后，无需重复载入。

特定段落不缩进

对于中文的出版物，无论是纸质的还是电子的，习惯上段落的首行缩进两个字符1。可是像段落中间插入行间公式 (display formula) 或者行间代码，随后的文字是同一段落的，不应该缩进。因此，对于不需要缩进的段落，采用特定标志 ooNoIndent00 添加在段落的最前面，js 预处理去掉该标志，并设置不缩进。

弹出 tip 显示脚注

网页显示方式，来回跳转去读脚注的方式2，让人不爽。因此，我参考了 Lukas Mathis 的 Footnotes 并进行改造，得到自己希望的形式：

  • 默认在正下方
  • 如果下方被遮挡，换到正上方
  • 如果左边超出边界，平移使得左边进入窗口
  • 如果右边超出窗口，平移使得右边进入窗口 (如果浏览器窗口太小，此时可能左边溢出窗口)

ooNoIndent00更漂亮的 tooltip 显示如 2013 Northeastern China smog, 简直太棒了：鼠标放在引用 2 时，reference 里面的对应条目被加亮；在引用 16 上则弹出 tooltip，而且可以进入 tooltip 里面点击链接。wiki 的 js 代码有点长，研究了一会，我就放弃了。

由于没有学过 JavaScript, 对 jQuery 更是陌生，凭感觉改代码。这里特别感谢 stackoverflow:39558138 和 stackoverflow:39564117 里面热心的朋友。

Google Analytics

启用 Google Analytics (2016-10-11 20:20), 它代表了这个领域的最高水平：以便了解

  • 多少用户访问了博客
  • 访问的频度
  • 哪篇博文最受欢迎
  • 哪些搜索词引上门的
  • 访问者来自何处

提示：开通 Google Analytics 需要有 google 户头 (例如 gmail 帐号)，登录到 Analytics 后，遵照提示，获得跟踪 ID (tracking ID)。然后，修改 GoogleAnalytics 文本文件，换成自己的 tracking ID 即可。

CSS 定制

通过 CSS 样式，实现了段落首行缩进，脚注的格式，脚注 Tip 显示外观，块引用、代码块加圆角、行内代码颜色等的定制。详细的内容在 custom.styl 文件里面。

此外，NexT 主题的定制中，我们还修改了

  • 链接的颜色，默认的有点暗淡，改为鲜明一些的
  • youtube 视频：让 Youtube iframe3 不 Responsive，而使用 {% raw %} {% youtube RiF6m3InMRM %} {% endraw %} 则根据屏幕大小自动调整视频框大小。甚至是图文环绕
  • Read More 按钮：由 description 字段提供简介时, 增加段落首行缩进

完整定制

本节是后来 (2016-10-14 11:00) 补充的，目的是简化整个定制的实现。现在，只需要执行

./initHexo.sh

ooNoIndent00将完成整个配置过程：初始化 hexo 目录， 改造架构设置 (pandoc 渲染器, Sitemap 配置, 架构配置)，以及定制 NexT 主题设置。请注意，文件相对位置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── deploy.sh
├── fix
│   ├── HexoLandscape
│   ├── HexoNext
│   └── HexoSite
├── hexo
│   ├── _config.yml
│   ├── db.json
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── scaffolds
│   ├── source
│   └── themes
└── initHexo.sh

ooNoIndent00也就是说，HexoSite.tar.xz 和 HexoNext.tar.xz 要解压到 ./fix/ 目录下。否则，请自行修改 initHexo.sh 脚本.

后言

“百闻不如一见，百见不如一做”，是啊，做的过程会有更真切的体验。今天发现，这“一做”又不如“一博”，什么意思呢？fixNext.sh 代码写完了，也测试了，再通过写博文进行整理总结，还是能看到一些细节问题，进行修复和提升。

写程序，一定要整理出文档。

不是说博客要用来为教学和科研服务吗？唉，惭愧！只能说磨刀不负砍柴工了。

还有一点，我对我现在的博客网站挺满意的。有人看了有点羡慕和惊叹，其实不必，只需要半个月的时间，就从门外汉到做出这样的博客网站了。时间真的只需要两星期，但更需要的，是开放的心态和常驻的好奇心，敢于了解新知识，不让自己停留在心理舒适区的勇气，从而与时俱进，持久弥新。其实，我学习新知识，以及思考有疑问的知识点时，研究起来内心总是愉悦的。

更新历史
2016-10-14 11:16 增加完整定制小节 2016-10-12 20:49 添加配套视频，启用 Google Analytics
2016-10-07 19:35 初稿

  1. 不少人偷懒，首行不缩进，采用较大的段落间距，实现视觉感官的段落，并美之名曰：“时代在发展，···，开始摒弃锻炼首行缩进” 等等；甚至说缩进缺乏美感等。一句话，懒或者是无知，就不要找借口了。↩

  2. 再也不需要跳来跳去了。↩

  3. theme-next issues/824: NexT 主题使用 JavaScript 在前端对视频做一层包装处理。但我需要指定大小的 iframe, 只好修改其 utils.js 文件。↩