hexo博客(四):自定义主题并发布

hexo主题创建及发布

Posted by LanMiao on 2017-02-01

官方的landscape主题太丑了,用别人的主题不是这里错就是哪里错,基本上别的主题都多少要配置一些东西,像我这种连git都是刚开始用的小白根本搞不动啊。刚开始我的心情是这样的“我就想要个简单的博客,能评论一下就好了啊,你们弄这些没多大卵用的功能搞啥子哦!算了,自己撸一个总行了吧!”。

我的懒喵主题是一款粉色系的,参考了BeanTech主题。是类似单页的一款主题,使bootstrap构建的简洁主题。就是下面的样子啦!
ok,说干就干,期间查了很多资料,看了几个主题的源码,然后就战战兢兢的开始搞了,刚开始根本不知道是啥意思,感觉无从下手啊,根本原因就是没有理解hexo,主题做了几天后才大概明白了这是个什么东西,没关系,这其实就是学习的过程。但是请不要放弃,我也是做了好久才做出来的,到最后你会发现没有那么难,困难需要一点一点的解决!

咱们就撸一个最简单的博客,为了让你少走弯路,我先把一些概念说一下,这样你做起来会更简单。

首先务必先看一遍官方文档关于主题的说明,然后按照官方默认主题landscape搭建一下项目的文件结构。

布局

Hexo 有三种默认布局: post 、 page 和 draft ,它们分别对应不同的路径。
post就是指文章详情页,page指的是首页,分类页,标签页,归档页,draft是草稿,这个不用在意,一般用不到,写草稿干啥,我写完就发布了。

模板

模板文件在layout文件夹下,文件名对应Hexo中的模板名,有index(首页),post(文章),page(分页),archive(归档),category(分类),tag(标签)几种,对于普通的header + content + footer的页面结构,header和footer往往是可以复用的,因此我们可以使用layout.ejs进行布局。

变量

Hexo提供了很多变量,拿来直接用,页面的内容就是根据这些变量获取的,具体变量介绍看这里

ejs文件

你会看到很多文件后缀都是.ejs,ejs是一个JavaScript模板库,用来从JSON数据中生成HTML字符串。其实看一下别的主题的写法就知道大概怎么写了,不会的网上搜一下。出了错控制台都会显示哪一行出的错,很好排错。

说完上面这些你大概就知道你的博客其实就几个页面而已,首页,文章页,分类页,归档页,标签页,然后就没了,你甚至可以简单到只有首页和文章页。主题中的_config.yml menu对应这几个页面的链接。

我的主题算是单页,所以更简单,没有多少代码,很好理解。

首先layout下面的layout.ejs,如果你的网站是普通的header + content + footer的页面结构,header和footer往往是可以复用的,因此我们可以使用layout.ejs进行布局,你所有打开的页面都会是这个样子。

举例我的layout.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<!-- Head -->
<%- partial('_partial/head') %>
<body>
<!-- Header -->
<%- partial('_partial/header',{cache:true}) %>
<!-- Nav -->
<%- partial('_partial/nav',{cache:true}) %>
<!-- Content -->
<%- body %>
<!-- Footer -->
<%- partial('_partial/footer',{cache:true}) %>
</body>
</html>

就是一个普通网站的结构,partial是局部模板让您在不同模板之间共享相同的组件,例如页首(Header)、页脚(Footer)或侧边栏(Sidebar)等,可利用局部模板功能分割为个别文件,让维护更加便利。

content是内容,其他的去我的主题里看看代码吧,很简单就不讲了。

然后主要就讲index.ejs,因为我的博客类似于单页,下面是样子
,从上到下依次是页首+(文章列表,分页,分类,归档,标签)。代码如下:

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
<div class="container">
<div class="row">
<!-- Post Container -->
<div class="
col-lg-8 col-lg-offset-1
col-md-8 col-md-offset-1
col-sm-12
col-xs-12
post-container
">
<% page.posts.each(function(post){ %>
省略
<% }); %>
<!-- Pager -->
<%- partial('_partial/pagination') %>
</div>
<!-- Sidebar -->
<%- partial('_partial/sidebar') %>
</div>
</div>

其中sidebar就是右侧的分类,归档和标签。具体的代码自己去看一下,就不讲了。

然后就是archive.ejscategory.ejstag.ejs基本文件了,但是你会看到里面都只有一句话<%- partial('_partial/archive') %>,这代表这三个页面共享局部模板archive.ejs,显示出来的内容是一样的,就只是列了一下检索后的文章列表而已,所以都一样。这里特别说明一下,刚开始的时候很困惑,hexo是怎么根据分类、日期或标签筛选文章的,后来发现hexo根据url自己就筛选出来了。例如你打开了标签了你会发现url变成了xxxx/tags/xxxx/,因为咱们在_partial/archive.ejs生成模板时,代码是page.post……,意思是本页的文章,hexo已经把筛选后的标签放进了变量里了,直接用。

其实并没有多少东西,对吧。还要注意的是,你应该把你的css,js全放到source文件下。这样一个超简单的博客就完成了,如果你觉得你的博客做的挺好,你可以让官方收录,流程查看这里,务必要按照要求来,不然会被打回来,我的lanmiao(懒喵)主题已经被收录了,有兴趣的可以下载或fork。