Hexo主题
前言
之前使用过很多Hexo主题，但是追求至简至美对于以前使用过的主题都觉得太冗余，无意间发现了 Dan Abramov的博客overreacted.io ,这种风格非常让我喜欢，于是产生了使用hexo复刻的想法。
技术要求
本身Hexo编写主题就不是一个麻烦事，本身具有很好的并发及其他机制，因此理论上只需要进行一次css换皮同时ejs布局的更改。
主题结构
hexo主题文件：
1
2
3
4
5
| theme folder
├── languages
├── layout
├── source
└── _config.yml
|
了解layout
layout.ejs 是hexo主题中最为重要的布局文件，所有页面都是从这个ejs文件中获取布局生成html静态页面的，所以不难想到hexo使用 .ejs 文件实现对每个页面的控制，同时我们可以设计多个如 post.ejs 用于显示文章是的页面布局（遵循HTML5规则）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html lang="<%=config.language%>">
<%-partial('partials/head')%>
<body>
<% if (is_home()){ %>
<div class="nav-container">
<%-partial('partials/nav')%>
</div>
<% } %>
<% if (is_archive()){ %>
<div class="nav-container">
<%-partial('partials/nav')%>
</div>
<% } %>
<% if(is_post()){ %>
<div class="nav-container">
<%-partial('partials/nav_post.ejs')%>
</div>
<% } %>
<div class="container" id="content-outer">
<div class="inner" id="content-inner">
<%- body %>
</div>
<% if (page.total > 1){ %>
<nav class="page-nav text-center">
<%- paginator({
prev_text: '〈',
mid_size: 1,
next_text: '〉'}) %>
</nav>
<% } %>
</div>
<%-partial('partials/footer')%>
<%-partial('partials/scripts')%>
<%-partial('partials/analytics') %>
</body>
</html>
|
上面判断逻辑在等下的ejs引擎中在讲解；
partial模块
partial可以理解成一块用于被调用html一部分，比如上面提到的 footer analytics 都是编写好的 .ejs 文件，拿 footer.ejs举例:
1
2
3
4
5
6
7
| <footer class="footer text-center">
<div id="bottom-inner">
<a class="bottom-item" href="<%=theme.index_page%>">Home</a> |
<a class="bottom-item" href="<%=theme.github%>" target="_blank">GitHub</a> |
<a class="bottom-item" href="https://hexo.io" target="_blank">Powered by hexo</a> |
</div>
</footer>
|
这里定义了一些标签以及逻辑按钮，其实就是在整个layout中的页脚的部分，简单来说hexo主题的编写就是通过更改一块块的布局，在经过css的润色就完成了。
ejs引擎
EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出所需要的 HTML 。（过于简单一笔带过）
常用标签
1
2
3
4
5
6
7
8
9
| <% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除
|
css
由于是在前辈的基础上进行大改的，参考了主题hexo-theme-xoxo 实际上需要操作的只有字体以及颜色的改动。
总结
整体下来是非常简单的，如果是在开源的项目上进行更改只需要了解各个文件背后的逻辑关系，按照自己喜欢的样式增删改就行了；
