hexo教程之用bootstrap打造自己的hexo主题[代码开源]
前言
主题是hexo的重要组成部分，因为他决定你网站最终的模样。虽然网站的内容更重要，但是良好的界面修饰可以锦上添花。
hexo主题渲染策略
当前主题
hexo init以后，会为所有的主题建立专属目录:themes。 所有的主题都会在这个目录下。因此，如果你新增自己的主题也要在该目录下新增。hexo根据配置，找到当前主题。
_config.yml文件中
theme: simpleTheme
页面渲染策略
- post页面，默认使用layout/post.ejs渲染。如果不存在则使用index.ejs。(默认主题也在配置中可改）
- index页面，hexo会用 当前主题目录下 layout/index.ejs渲染。（必须）
- archive页面， 使用layout/archive.ejs渲染。如果不存在则使用index.ejs
- tag页面， hexo会用 当前主题目录下 layout/tag.ejs渲染。如果不存在则使用archive.ejs
- category页面，使用layout/category.ejs渲染。如果不存在则使用archive.ejs
一些隐秘的场景
以下几点比较隐秘，试试看你知道吗？
- 因为所有的标签都会包含在tags目录下，那么tags目录的index.html 如何生成？
- 同样，所有目录都会包含在categories目录下，那么categories目录下index.html如何生成？
答案：
- tags会优先寻找tags.ejs,然后是post.ejs,然后index.ejs
- categories行为有些不一样，不会寻找categories.ejs, 而是post.ejs,然后index.ejs （这可能是一个bug..）
了解了以上的渲染策略，我们可以开始了。
打造主题
命名
简单的命名就是在themes目录下新建子目录，当然如果你想在hexo官网主题页展示，你需要建立一个github 仓库。然后按照要求发布,具体请参考这里。另外需要确定你使用什么CSS框架。这个主题我准备使用bootstrap4 ,因此将主题命名为a-bst (A bootstrap theme)
框架布局
网站都有基本布局，为了减少重复，需要先搭一个框架，以便各页面复用。参考 layout/layout.ejs
<!DOCTYPE html>
<html lang="en">
<!-- Head tag -->
<%- partial('_partial/head') %>
<body>
<%- partial('_partial/nav',{cache: true}) %>
<%- partial('_partial/header',{cache: true}) %>
<!-- Main Content -->
<%- body %>
<!-- Footer -->
<%- partial('_partial/footer') %>
</body>
</html>
Head
对应html文件head标签，meta,title,script,style信息等。将其定义在_partial/head.ejs
Nav menu
导航菜单，通常在界面的顶端。定义在_partial/nav.ejs
Header
对应GUI界面上的头部，一般在导航菜单下。将其定义在_partial/header.ejs
nav header可以合二为一，具体看你的偏好。
body
<%- body %>
不等同于html的body。 他的语义对应的是使用者的主体部分(不包括front-matter)
footer
页脚部分，大部分网站都用。将其定义在 _partial/footer.ejs
widgets
除了以上框架主题，另外定义了一些widgets. 比如，标签云，归档，分类，最近发表等。都定义在_widget目录
页面布局
有了上面的框架以后，接下来就可以具体为各个页面布局了。
index
网站的首页，可以说是最重要的页面了。我使用了两列布局，第一列显示文章简要，第二列显示widgets.
对应文件index.ejs
archive
网站归档，相对index就简单了，主要是将archive的文章标题链接列出。对应文件archive.ejs
<%- ah_list_archives({show_count: theme.show_count, type: theme.archive_type, callback:function(name,url,cnt)
{
let result='<a href="';
result += url;
result +='" class="list-group-item">';
result += name;
result += ' <span class="badge badge-primary">';
result += cnt;
result += '</span></a>';
return result;
}}) %>
此处有依赖插件:hexo-additional-helper
npm install hexo-additional-helper --save
category
网站目录，将目录内文章列出，对应文件archive.ejs。（根据hexo的渲染策略，如果category.ejs不在，则用archive.js)
tag
网站标签，将标签文章列出，对应文件archive.ejs。（根据hexo的渲染策略，如果tag.ejs不在，则用archive.js)
post
文章默认的渲染文件，非常重要，决定了用户查看文章的体验。要显示文章标题，标签，以及文件内容等信息。
对应文件post.ejs
定义自己的布局
因为各页面的差异，有时候需要自定义界面。这时候只要在layout目录新建ejs布局文件，然后hexo 新建文章时使用即可。
hexo new yourlayout 'post_with_new_layout'
当然也可以手动修改 _post 目录md文件，修改front-matter layout属性。
开源
更多hexo文章请参见我的博客