起因

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

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

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

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

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

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

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

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

制作过程

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

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

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

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

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

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

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默认使用的两种文件,stylusejs

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

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

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

不过经过多次实验,我发现layout文件夹下的layout.ejsindex.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