起因

最近，因为注册了一个新的域名(具体看这里)，因此想了一下，既然使用了子域名作为博客地址，就不能浪费掉主域名。

看到各位小可爱的主页都非常漂亮，于是自己也非常想拥有一个。

因为个人前端不精，于是就开始在网上寻找，最初想到的是[hexo](https://hexo.io/themes/)的主题，结果发现并没有找到自己想要的。

然后本着快要放弃的时候，突然想到，我可不可以根据别人的网页自己改一个。

在twi上的时候，发现一个非常好看(个人感觉)的主页，于是我去这位小可爱的github中寻找，想找到根目录之后clone下来，根据这个仓库进行修改。

但是我并没有找到，于是就发了email向那位小可爱询问了一下，对方给我指明了这个主页的来源，是一位叫做饭饭的小可爱制作的。

于是我决定根据这位小可爱的项目，制作一个自己的主页。

后来又因为麻烦，想着如果要是以后修改的话还要修改html代码，又因为最近正好在弄基于hexo的博客，对hexo的使用方法多少有一些理解了，所以决定据此制作一个hexo的主题。

制作过程

说肝就肝，可是我完全不知道该怎么下手啊（逃

于是去找万能的google老师，果然，google老师非常愉快的就告诉了我。

首先找一个空的文件夹，使用$ hexo init <folder>命令初始化hexo的文件。

然后进入themes文件夹中，新建一个文件夹并且命名为自己喜欢的主题的名称。

修改根目录下的_config.yml的theme: 关键词为你自己主题的名字。

然后根据各种需求新建相应的文件，这里先放上我的目录树

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
│  _config.yml
│
├─languages
│      en.yml
│      ja.yml
│      zh-CN.yml
│
├─layout
│  │  footer.ejs
│  │  head.ejs
│  │  layout.ejs
│  │  index.ejs
│  │
│  └─includes
│          bgimage.ejs
│          contents.ejs
│          google-analytics.ejs
│          hitokoto.ejs
│          jsinclude.ejs
│          jsincludeend.ejs
│
└─source
    ├─css
    │  │  mobilemenu.styl
    │  │  style.styl
    │  │  var.styl
    │  │
    │  └─_layout
    │          animate.styl
    │          background.styl
    │          body.styl
    │          footer.styl
    │          global.styl
    │          main.styl
    │
    ├─img
    │      blue_icon.svg
    │      dahuiyuan.svg
    │      icp.png
    │      xiaohuiyuan.svg
    │
    └─js
            animate.js

首先来说，我到了从零开始制作 Hexo 主题这篇内容（具体链接再参考链接模块）。

本主题涉及到hexo默认使用的两种文件，stylus和ejs。

个人理解来说，ejs最终可以生成html代码，里边可以包含html各种代码，包括css和js。

而stylus文件，最终可以生成css样式文件，因此css代码可以写在这类文件中，并且可以直接使用css的语法格式。

对于hexo具体是怎样生成这些文件的，我没有弄清楚，因此不在这里班门弄斧了。

不过经过多次实验，我发现layout文件夹下的layout.ejs和index.ejs是不可或缺的，尽管本主题中的index.ejs文件没有任何内容。否则将无法生成index.html文件。

另外，虽然不显示任何内容，但是目录./source/_post/下必须至少有一篇md文档，否则同样不会生成index.html，但是这篇文档的内容时不会显示的，因此可以忽略掉内容。

值得记录下来的东西

yml文档的概念

如这篇文章的tag配置部分

1
2
3
4
tags:
 - hexo
 - 主题
 - 'Re:0'

其中tags相当于一个string数组，可以按照数组的方式进行访问。

假设该tags配置位于theme的_config.yml文档中，那么在访问的时候，我可以使用theme.tags[i]的方式进行访问。

多级目录可以使用x.x.x的方式进行访问

1
2
3
4
5
config:
  tags:
    - hexo
    - 主题
    - 'Re:0'

如这个代码，我需要访问'hexo'的时候，我只需要使用theme.config.tags[0]方式即可访问。

关于.ejs文档

书写语句

首先，ejs文档中可以随时使用判断和循环语句，比如

判断语句

1
2
3
<% if(theme.icon.fonticon){ %>
    <link rel="stylesheet" type="text/css" href="<%= theme.icon.fonticon %>">
<% } %>

循环语句

1
2
3
4
5
6
7
8
<% (theme.button.small||[]).forEach(function(value){ %>
    <li class="navigation_item">
        <a href="<%- value.split('||')[1] %>" title="<%- value.split('||')[2] %>" target="_blank"
            rel="external nofollow noopener noreferrer">
            <i class="icon <%- value.split('||')[0] %>"></i>
        </a>
    </li>
<%})%>

引用语句

在ejs文档中，如果需要引用theme配置中的内容，需要使用<%= %>将引用连接括起来，如<%= theme.background_image.img[random] %>

同时，在ejs中，可以同时包含js内容，只需要按照html的文档方式去写即可。

但是在ejs文档中，ejs语句块是无法直接引用js中的变量的，即使是ejs语句块被包含在<script></script>标签中也不行。

此时如果需要在ejs变量中使用js语句的话，则需要将js变量变成ejs变量，方法是在js语句外使用<% %>括起来，如

1
2
3
4
<% 
    var len = parseInt(theme.background_image.img.length) 
    var random = Math.round(Math.random() * (len - 1), 10) 
%>

此时，即可在ejs语句块中使用相应变量了，如<%= theme.background_image.img[random] %>

引用文档

使用<%- include('xx.ejs') %>语句，即可在ejs文档中引用其他ejs文档

使用<%- css('css/style') %>语句，可以将styl文档引入。

但是按照这种方法是没有办法直接引用js文档的，因此可以使用<% <script src="xxx"></script> %>的方式将js引入，同样的方式也可以引入css样式。

关于.styl文档

引用hexo配置

在styl文档中可以声明变量

1
$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')

按照上述方式，即可调用hexo的配置文档，这里直接引用的就是theme下的_config.yml文档，因此不需要再加上theme.，即hexo-config('theme_color.enable')就相当于theme.theme_color.enable。

同时styl文档中自带了一些函数和判断语句，非常方便一些简单的逻辑判断编写。

最后

关于这个主题

这个主题我将其明明为navi，来源是英文的navigation。

在游戏ペルソナ5中，佐倉双葉的行動ネーム就是 ナビna bi，我永远喜欢双葉（逃

于是这个主题(模板)就这样愉快(非常痛苦)地制作完成了，欢迎来尝试一下。

呐呐呐，这里似乎有个传送门，上面写着不要点。

参考链接

饭饭大佬的主题: https://github.com/noisky/Homepage

从零开始制作 Hexo 主题: https://www.ahonn.me/blog/create-a-hexo-theme-from-scratch