hexo again主题扩展

October 03 2017

我的博客主题使用的是hexo again，主要还是被它简单的风格吸引了。一开始使用的时候觉得挺满意，可是文章一多了之后，就会发现整理起来是个问题。默认的landscape主题有标签和分类的功能，但是again主题并没有实现。这也是我为什么选择again主题的另一个原因，可以自己实现部分功能。很多主题都不用自己去实现，只要专注于写作本身。但是对于一个想了解更多的人而言，自己DIY一下，或许会更有帮助。

对文章进行分类、标签化是一种好习惯，也有助于读者在文海里快速定位文章。我参考了从零开始编写一个Hexo主题，来深入了解hexo的工作流程。

hexo与其说是一个博客系统，不如说是一个静态页面生成器。当执行

1
hexo g

命令的时候，程序会生成一个public的静态资源文件夹，所有在hexo上发布的文章，就是在这个命令执行后生成的。而且是一次生成，一劳永逸，所以说为什么是静态页面，压根没有动态请求的数据，就连分页也都是一个个分好页码的文件夹名下的静态资源文件。

我的hexo版本是3.1.1，是相对来说比较旧的版本。所以在实现分类和标签的时候，和最新的实现方式有很大的出入。我的这个版本有个问题，标签和分类需要在主题的layout/page.ejs下书写。如何区分是标签还是分类呢？得使用page.type来进行判断。最新版本已经修正了这个问题，标签就在layout/tag.ejs下书写，分类就在layout/category.ejs下书写。我比较喜欢最新版本的方式，无奈自己又不想升级。尽管有了分类和标签页，但是分类和标签页下的文章内容，我又发现了一个问题，所有的文章的内容都取决于layout/tag.ejs和layout/category.ejs的内容。原来的内容会被替代，但是如果把layout/tag.ejs和layout/category.ejs删除，默认分类和标签页的文章内容又是正常的了。其中的原理还需要更深入的了解。

但就扩展而言，简单的分类和标签基本实现了。看一下我的page.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<main class="page">
  <div>
    <%- page.content %>
    <% if (page.type === 'tags' && site.tags.length){ %>
	  <div class="widget-wrap">
	    <h3 class="widget-title">Tags</h3>
	    <div class="widget">
	      <%- list_tags() %>
	    </div>
	  </div>
	<% } else if (page.type === 'categories' && site.categories.length){ %>
		<div class="widget-wrap">
	    <h3 class="widget-title">Categories</h3>
	    <div class="widget">
	      <%- list_categories() %>
	    </div>
	  </div>
	<% } %>
  </div>
</main>

v0.1版本基本完成了。下一个版本，需要加入搜索的功能，直接查询文章。

avatar

chilihotpot

You Are The JavaScript In My HTML