Hexo主题更换与魔改·零·布局记录

由于原先的Annie主题在时间的磨损下出现了滚轮移动和手机端滑动诡异失灵的情况，再加之它的系统过于复杂，不适合我进行理解和维护，访客们加载网页的速度也受到拖累。遂更换了一个轻量级的新主题Ascent，并自己加装了一系列必要功能，算是一次难得的网页前端实践。

本次主题更新及魔改主要体现在：加装搜索页面Search，目录显示及相关按钮toc，分类及标签汇总页面T&C，以及改动：支持数学Latex渲染Mathjax，将About集成到头部的DvJiang字样中，重设了Markdown的部分渲染风格，增加了尾部显示的不蒜子计数和版权声明，以及修改一些初始设置，使得界面使用更为流畅。

在魔改的过程中，不幸的地方在于，大多数能搜到的教程都是基于几个著名的集成度很高的主题的，其内容基本就是动动手指打开开关而已，因此浪费了我大量时间自己猜测试错，才最终完成。

为了方便今后的维护，我将大部分的维护过程与理解记录在专题Hexo主题更换与魔改中，希望对以后的改动有所帮助。

---

布局信息

众所周知，HTML在Hexo下的文件大致分为.css和.ejs两种。可以说，.ejs是网页的骨架和逻辑，而.css则是网页的皮肤。

.ejs相关

.ejs在文件层级上大概可以这样描述：由主文件的source下的index文档中的layout决定了这个页面的body板块属于哪个主题文件夹下Layout文件夹中的.ejs文件来渲染。倘若不写layout，或者layout对应的文件夹名字没能对上，就会缺省地绘制成post的界面。

而在ejs中为了改动简单，通常采用模块化设计，也就是利用子文件夹partial里的元素进行组合。比如tag和category的归档页便是依托于archive，也就是最初的归档页进行设计的。

在语法上，需要注意的语法大致有以下几条：

<!-- 载入模块：放在_partial的archive.ejs，并传入参数：设置pagination为config.archive, index为true -->
<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>

<!-- 在其中写入js脚本，一般是用来触发事件的函数 -->
<script type="text/javascript"></script>

<!-- 写入页面的逻辑 -->
<% if (pagination == 2){ %>

<!-- 输出打印一些值 -->
<%= page.tag %>

<!-- 输出一些函数原型，常用于引入js文件或者启动内置函数 -->
<%- js('js/search.js') %> 

.css相关

.css用于调整网页的外观，它可以组织为像ejs那样的模块化设计，也可以就像这个主题这样用一个style文件全部囊括。

.css相对而言比.ejs要容易调试一些，在网站上打开检查，就可以直接定位到每一句话用的.css，由此就可以实现相关的修改。

值得记住的部分有以下几个：

/* class */
.example1{
  color: blue;
}

/* id */
#example2{
  color:blue;
}

/* 遮罩 */
.example3:hover{
  color:blue;
}

/* 对每个元素单独生效(常用于动画) */
.example4 a{
  color:blue;
}

/* 提高优先级 */
.example5{
  color:blue !important;
}

---

一些小技巧

HTML有一些善解人意但又有些蛋疼的地方，那就是它在出现错误时一般都会选择跳过这个部分，而Hexo自带的--debug也只是简单的显示一下加载情况，这时候排查问题就需要一些小技巧了。

利用浏览器的HTML解析

在Chrome上单击右键，再点击「检查」，就可以打开HTML的监视器，对上面的元素和进程进行检查。

通过console一栏可以确认有没有出现问题。

例如在打开Latex的公式渲染功能的时候，公式莫名只在本地运行时渲染，而不在远端渲染。通过打开网站的console，可以发现它提示Mathjax使用的js的url是过时的，因此需要重新找一个源替换在它的node_modules中。

利用该解析控制css

在网页的解析中也可以查看具体的模块的css加载情况，甚至能知道这些模块是如何被渲染的。

想要改变Markdown渲染结果时，只需要用Typora将要改动的格式打印成HTML格式，再用「检查」查看相应的源代码即可确定该在css里的修改方式，具体的例子会在后面的系列里提及。

分类注意

Hexo文件中的Tags并非是标签页面（展示所有标签），而是以标签的形式进行归档，因此也常常套用归档页Archive的布置。

若想要重新写标签页，需要重新修改tags下index的Layout指向，分类页面也同理，具体的例子会在后面的系列提及。