hexo-theme-chi主题开发小记

前言

　　2019 年 2 月 20 日，Shaun 的站点主题终于完成了，终于能用上自己的主题了，开心～(￣▽￣～)。

　　在网上看到的建议都是多写内容少整主题，但强迫症表示受不了，Shaun 就是想要一个自己的主题，自己怎么看着舒服就怎么来，即使没有一个访客，至少也要让自己看着舒服，自己想怎么设计就怎么设计，想用什么技术就用什么技术，想怎么排版就怎么排版，尽量少受写约束，总而言之，Shaun 喜欢自由。

回顾篇

　　自己写主题的想法由来已久，应该是从 17 年 12 月份开始的吧，当时就感觉自己魔改的 spfk_x 主题只能勉强符合自己的需求，但是因为已经用的是别人已经完成的框架，大体框架也不好做太多修改（如果要改的话还不如自己重新写一个），而且里面由于经手太多人的修改，里面的代码结构在 Shaun 看起来有点混乱，而且有很多冗余的代码，有些代码甚至完全没有用上，导致修改起来有点麻烦。

　　至于为什么不在 17 年寒假期间就开始写，而要拖到 18 年 12 月份才开始动手，一部分原因是 Shaun 的拖延症，一部分原因是还没具体想好该怎么布局，该用什么技术，还有一部分就是外在客观原因了。

　　18 年 12 月份开始动手写，是因为这段时间稍显空闲，虽然白天还是一样的忙，但至少没那么多心里负担了，而且此时 Shaun 对于自己想要的大体布局已经十分清楚了（虽然一些具体细节还没不是那么清楚），所以就趁着晚上有时间写写，有时候晚上高兴或没事干就写写，有时候没想法或还没想好具体怎么实现就不写，就这样断断续续的写，总算在 19 年 2 月完成了。

　　本来想在 19 年之前完成的，可是由于本人的拖延症和一些客观原因，还是超期了很久，侯世达定律总是存在的（ sigh~😔），不过总的开发时间也差不多是一个月吧。感觉花费这一个月的晚上时间还是挺值得的，虽然从中学到的东西不多，但总算也有点自己的东西了。

实现篇

　　既然要开始写主题了，首先当然要想一个主题名字，本来最初是直接取原来主题的首尾字母作为名字，但后面想了想感觉有点不对劲，有点骂人的意味在里面 (´ ; ω ; `)，后面又想了想，就用尾字母 X 算了，反正站点图标也是那个，后面感觉还是不好，单字母太单一了，后面突然想到希腊字母，就以希腊字母的英语命名了。

　　名字想好之后，就要决定用什么技术了，由于 Shaun 只是一个前端小白，无论用什么技术对 Shaun 来说难度都差不多，Shaun 理想的主题是能够支持响应式的，所以为了尽可能简单的支持响应式，CSS 方面的库就采用 Bootstrap4，CSS 预处理器当然是用 Stylus 了， JS 方面最令 Shaun 纠结，到底是采用现代的 Vue 还是传统的 jQuery，最终从相对熟悉程度和相关资料广度方面考虑，Shaun 最终选择了 jQuery3（以后有机会再尝试一下 Vue 吧），接下来要选择的是 Node.js 模板引擎，候选的主要有三个 EJS、Swig 和 Jade（现已更名Pug），Shaun 原来的主题是用 EJS 的，著名的 NexT 主题用的 Swig，而 Pug 的语法目前有点接受不能，所以直接放弃了，而 Swig 早已停止更新，所以也放弃了，所以最终选择的还是相对熟悉的 EJS（而 EJS 最近的一次提交时间为 2018 年 11 月 28 日，看来应该也是要停止更新了，以后有机会试试 Pug 吧）。

　　技术决定之后，就要开始写了，最开始写的时候，由于不清楚 hexo 的工作机制，导致完全无法显示页面，后面查阅了几篇关于如何写 hexo 主题的文章，加上自己的慢慢摸索，终于弄懂了，hexo 的最初页面需要有一个 index 文件，在 index 中写入的东西，将会显示在 http://localhost:4000/ 页面中，好了，终于能显示内容了，接下来要解决的是布局问题，hexo 的所有页面渲染都会通过一个叫 layout 的文件，layout 文件中必须存在一个 <%- body %> 语句，在渲染时，hexo 会用其它页面的内容替换 layout 中的 <%- body %> 语句，包括 index 中，所以在 layout 中写好 HTML 框架之后，其它页面只需要负责写内容就行。实现一个最简单的主题（只有纯文字版网页），只需要下面几步：

在 index.ejs 文件中写入 <%- include('_partial/archive', {item: page, is_index: true}) %>；
然后在 _partial 文件夹中 archive.ejs 文件中写入：
1
2
3
4
5
6
7
8
9
10
<% page.posts.each(function(item) { %>
    <%- include('article', {item: item, is_index: true}) %>
<% }) %>

<% if (page.total > 1){ %>
    <%- paginator({
        prev_text: '&laquo; Prev',
        next_text: 'Next &raquo;'
    }) %>
<% } %>
在 _partial 文件夹中 article.ejs 文件中写入 <div><%- item.content %></div>；
最后在 layout.ejs 文件中写入：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div>
        <%- body %>
    </div>
</body>

</html>
即可将文章内容显示出来，前提是已有文章。当然也可把上面的1~3步合起来算作一步，直接在 index.ejs 文件中写入：
1
2
3
4
5
6
7
8
9
10
<% page.posts.each(function(post) { %>
    <div><%- post.content %></div>
<% }) %>

<% if (page.total > 1){ %>
    <%- paginator({
        prev_text: '&laquo; Prev',
        next_text: 'Next &raquo;'
    }) %>
<% } %>
这样就算是实现了一个最简单的主题，只是这个主题十分丑陋，文章也没有对应的标题。

※注： 在写这几步的时候，Shaun 在这里发现 hexo-browsersync 插件和 hexo s 命令有冲突，会造成一个bug：hexo s 启动后，页面加载错误，大BUG，具体表现为：当直接使用 <%- post.content %> 在首页显示文章时，index.html 将会无法加载完全，后面的一部分会加载错误。解决办法为：卸载 hexo-browsersync 插件。

　　完成上面几步，就算是写主题已经入门了，万事开头难，入门之后就相对简单了，只要按部就班的一步步走下去就行了，接下来就是慢慢进行排版布局问题，就这样，Shaun 一边参考其它一些主题的排版和写法，一边查阅网上资料实现自己的想法，一步一步的解决问题，直到完成该主题。

PS： 主题配置文件 _config.yml 中的配置变量的命名和其它编程语言一样，不能以数字作为第一个字符。

文档篇

　　Chi 主题涉及到的技术主要为：Bootstrap4、jQuery3、Stylus、EJS、HTML5、CSS3、ES6 等；运行环境为：node-v8.11.1、Hexo-3（hexo-cli-1.1.0）等；测试浏览器为Firefox 60.5.0 esr 和 Chrome 72.0.3626.109，其它浏览器没测过，也不考虑测，有兴趣的童鞋可以自己测自己改。

　　Chi 主题的配色主要参考 Shaun 原来的主题 spfk_x，排版部分参考了 hexo-theme-freemind，部分代码也是来自这两个主题。Chi 主题的一些动画实现优先采用 CSS，除了那些无法用 CSS 实现或 Shaun 不知道如何用 CSS 实现的，所以 JS 代码部分不算很多，网页加载速度也勉强能够接受吧。

　　Chi 主题的代码高亮部分本来想参考为hexo博客加入prettify高亮插件使用prettify替换默认的代码高亮，但使用了之后发现效果不是很好，就还是使用默认的样式了。

　　Chi 主题的使用文档暂时就不写了，毕竟这个主题只是 Shaun 个人使用（应该也不会有其他人使用了，万一真有人要用却不太会用，欢迎提 issue，以后酌情考虑添加使用文档 🙃），由于 Shaun 只是前端小白，这个主题也只是当学习练手开发，里面肯定会有各种各样的问题，欢迎提 issue 或 fork 或 clone 后自行修改，提 issue 的话，Shaun 不保证一定能解决，毕竟水平有限，当然如果有代码优化想法还望不吝赐教 (｡･ω･｡)ﾉ♡ （至于 px 换 em 或 rem 就不用提了，没什么原因，主要是 Shaun 懒，更深层的原因在于 Shaun 手头上还没有更高分辨率的显示器，不知道显示差距有多大，不好进行测试 😓）。

PS： Shaun 使用了 Hexo 博客美化代码块| 梦魇小栈中的脚本对 Markdown 代码部分进行了美化渲染，但是该脚本有时候渲染会出现一些问题，无法进行美化，可能是代码语法格式有错误，这时需要自己手动调整一下 Markdown 代码格式。

使用 Chi 主题推荐安装插件：

hexo-renderer-pandoc # 使用pandoc渲染markdown，安装前需卸载默认渲染器hexo-renderer-marked
hexo-generator-feed # RSS订阅
hexo-generator-searchdb # 本地搜索
hexo-abbrlink # 文章唯一永久链接
hexo-all-minifier # 快速压缩优化代码

好了，暂时就写到这里了。

后记

　　当 Shaun 有一天使用其它 blog 框架时，这个主题可能就不再维护更新了，但其中的排版样式应该还会或保留或更新。下面要做的事就不立 Flag 了，因为立了多半会完不成，这就很尴尬了，但不立又没有动力，真是让人脑壳疼啊 (๑•ั็ω•็ั๑)，反正是一件长期要做的事了，长到可能接下来的业余时间可能都在做这件事，或开源或不开源，看以后的心情和完成程度了（↖(^ ω ^)↗）。