re:0从零开始的hexo主题制作
起因
最近,因为注册了一个新的域名(具体看这里),因此想了一下,既然使用了子域名作为博客地址,就不能浪费掉主域名。
看到各位小可爱的主页都非常漂亮,于是自己也非常想拥有一个。
因为个人前端不精,于是就开始在网上寻找,最初想到的是[hexo](https://hexo.io/themes/)
的主题,结果发现并没有找到自己想要的。
然后本着快要放弃的时候,突然想到,我可不可以根据别人的网页自己改一个。
在twi上的时候,发现一个非常好看(个人感觉)的主页,于是我去这位小可爱的github中寻找,想找到根目录之后clone下来,根据这个仓库进行修改。
但是我并没有找到,于是就发了email向那位小可爱询问了一下,对方给我指明了这个主页的来源,是一位叫做饭饭的小可爱制作的。
于是我决定根据这位小可爱的项目,制作一个自己的主页。
后来又因为麻烦,想着如果要是以后修改的话还要修改html代码,又因为最近正好在弄基于hexo的博客,对hexo的使用方法多少有一些理解了,所以决定据此制作一个hexo的主题。
制作过程
说肝就肝,可是我完全不知道该怎么下手啊(逃
于是去找万能的google老师,果然,google老师非常愉快的就告诉了我。
首先找一个空的文件夹,使用$ hexo init <folder>
命令初始化hexo的文件。
然后进入themes
文件夹中,新建一个文件夹并且命名为自己喜欢的主题的名称。
修改根目录下的_config.yml
的theme:
关键词为你自己主题的名字。
然后根据各种需求新建相应的文件,这里先放上我的目录树
1 | │ _config.yml |
首先来说,我到了从零开始制作 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 | tags: |
其中tags相当于一个string数组,可以按照数组的方式进行访问。
假设该tags配置位于theme
的_config.yml
文档中,那么在访问的时候,我可以使用theme.tags[i]
的方式进行访问。
多级目录可以使用x.x.x的方式进行访问
1 | config: |
如这个代码,我需要访问'hexo'
的时候,我只需要使用theme.config.tags[0]
方式即可访问。
关于.ejs
文档
书写语句
首先,ejs文档中可以随时使用判断和循环语句,比如
判断语句
1 | <% if(theme.icon.fonticon){ %> |
循环语句
1 | <% (theme.button.small||[]).forEach(function(value){ %> |
引用语句
在ejs文档中,如果需要引用theme配置中的内容,需要使用<%= %>
将引用连接括起来,如<%= theme.background_image.img[random] %>
同时,在ejs中,可以同时包含js内容,只需要按照html的文档方式去写即可。
但是在ejs文档中,ejs语句块是无法直接引用js中的变量的,即使是ejs语句块被包含在<script></script>
标签中也不行。
此时如果需要在ejs变量中使用js语句的话,则需要将js变量变成ejs变量,方法是在js语句外使用<% %>
括起来,如
1 | <% |
此时,即可在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
中,佐倉双葉
的行動ネーム
就是 ナビ
,我永远喜欢双葉(逃
于是这个主题(模板)就这样愉快(非常痛苦)地制作完成了,欢迎来尝试一下。
呐呐呐,这里似乎有个传送门,上面写着不要点。
参考链接
饭饭大佬的主题: https://github.com/noisky/Homepage
从零开始制作 Hexo 主题: https://www.ahonn.me/blog/create-a-hexo-theme-from-scratch
在服务器中住着的AKI娘会检测您的输入内容哦, 如果被判断为垃圾内容是看不到的呢!当然抹茶也会定期检查AKI娘的所作所为的!