hexo教程之从零开始创造自己的主题[代码开源]

Posted by 咖啡狼 on 2019-07-05

前言

主题是hexo的重要组成部分,因为他决定你网站最终的模样。虽然网站的内容更重要,但是良好的界面修饰可以锦上添花。

hexo主题渲染策略

当前主题

hexo init以后,会为所有的主题建立专属目录:themes。 所有的主题都会在这个目录下。因此,如果你新增自己的主题也要在该目录下新增。hexo根据配置,找到当前主题。
_config.yml文件中

1
theme: simpleTheme

页面渲染策略

  • post页面,默认使用layout/post.ejs渲染。如果不存在则使用index.ejs。(默认主题也在配置中可改)
  • index页面,hexo会用 当前主题目录下 layout/index.ejs渲染。(必须
  • archive页面, 使用layout/archive.ejs渲染。如果不存在则使用index.ejs
  • tag页面, hexo会用 当前主题目录下 layout/tag.ejs渲染。如果不存在则使用archive.ejs
  • category页面,使用layout/category.ejs渲染。如果不存在则使用archive.ejs

一些隐秘的场景

以下几点比较隐秘,试试看你知道吗?

  • 因为所有的标签都会包含在tags目录下,那么tags目录的index.html 如何生成?
  • 同样,所有目录都会包含在categories目录下,那么categories目录下index.html如何生成?

答案:

  • tags会优先寻找tags.ejs,然后是post.ejs,然后index.ejs
  • categories行为有些不一样,不会寻找categories.ejs, 而是post.ejs,然后index.ejs (这可能是一个bug..)

了解了以上的渲染策略,我们可以开始了。

打造主题

命名

简单的命名就是在themes目录下新建子目录,当然如果你想在hexo官网主题页展示,你需要建立一个github 仓库。然后按照要求发布,具体请参考这里。另外需要确定你使用什么CSS框架。这个主题我准备使用bootstrap4 ,因此将主题命名为a-bst (A bootstrap theme)

框架布局

网站都有基本布局,为了减少重复,需要先搭一个框架,以便各页面复用。参考 layout/layout.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<%- partial('_partial/head') %>

<body>
<%- partial('_partial/nav',{cache: true}) %>
<%- partial('_partial/header',{cache: true}) %>

<!-- Main Content -->
<%- body %>

<!-- Footer -->
<%- partial('_partial/footer') %>

</body>

</html>

对应html文件head标签,meta,title,script,style信息等。将其定义在_partial/head.ejs

导航菜单,通常在界面的顶端。定义在_partial/nav.ejs

对应GUI界面上的头部,一般在导航菜单下。将其定义在_partial/header.ejs

body

1
<%- body %>

不等同于html的body。 他的语义对应的是使用者的主体部分(不包括front-matter)

页脚部分,大部分网站都用。将其定义在 _partial/footer.ejs

widgets

除了以上框架主题,另外定义了一些widgets. 比如,标签云,归档,分类,最近发表等。都定义在_widget目录

页面布局

有了上面的框架以后,接下来就可以具体为各个页面布局了。

index

网站的首页,可以说是最重要的页面了。我使用了两列布局,第一列显示文章简要,第二列显示widgets.
对应文件index.ejs

archive

网站归档,相对index就简单了,主要是将archive的文章标题链接列出。对应文件archive.ejs

1
2
3
4
5
6
7
8
9
10
11
<%- ah_list_archives({show_count: theme.show_count, type: theme.archive_type, callback:function(name,url,cnt)
{
let result='<a href="';
result += url;
result +='" class="list-group-item">';
result += name;
result += ' <span class="badge badge-primary">';
result += cnt;
result += '</span></a>';
return result;
}}) %>

此处有依赖插件:hexo-additional-helper

1
npm install hexo-additional-helper --save

category

网站目录,将目录内文章列出,对应文件archive.ejs。(根据hexo的渲染策略,如果category.ejs不在,则用archive.js)

tag

网站标签,将标签文章列出,对应文件archive.ejs。(根据hexo的渲染策略,如果tag.ejs不在,则用archive.js)

post

文章默认的渲染文件,非常重要,决定了用户查看文章的体验。要显示文章标题,标签,以及文件内容等信息。
对应文件post.ejs

定义自己的布局

因为各页面的差异,有时候需要自定义界面。这时候只要在layout目录新建ejs布局文件,然后hexo 新建文章时使用即可。

1
hexo new yourlayout  'post_with_new_layout'

当然也可以手动修改 _post 目录md文件,修改front-matter layout属性。

开源

github地址

demo

A-BST主题





AD