Hexo 主题开发制作

前置

Hexo 的安装就不讲了,直接开始我在制作 Hexo 主题遇到的一些问题。

首先
在使用 Hexo cli 脚手架创建完 Hexo 项目后会有一个默认官方主题 landscapethemes 目录中复制一份出来重命名成自己的名称,例如我的就是改成了 yogwang,并且在根目录中的 _config.yml 中修改主题为自己的主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yogwang //这里修改成自己的主题

目录

完全展开主题目录:

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
─yogwang
├─languages // 国际化(i18n)让网站以不同语言呈现
│ └─...
├─layout // 布局文件
│ ├─_partial // 局部组件
│ │ ├─post // 文章组件
│ │ └─...
│ ├─_widget // 侧边栏部件
│ └─...
├─scripts // 启动时自动载入的Js脚本
├─source // 资源文件夹
│ ├─css // CSS样式
│ │ ├─fonts // 字体
│ │ ├─images // 图片
│ │ ├─_partial // 局部组件CSS
│ │ ├─_util // 分栏&Mixin
│ │ └─...
│ ├─fancybox // fancybox插件
│ └─js // JS脚本
├─_config.yml // 主题配置文件
├─.gitignore // Git忽略配置
├─Gruntfile.js // Grunt项目文件
├─LICENSE // 授权条款
├─package.json // 包管理配置文件
└─README.md // 项目手册

因为我是完全重新创作一个主题,所以需要保留下来的目录如下

保留下来的目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
─yogwang
├─layout
│ ├─_partial
│ │ └─post
│ │ └─...
│ ├─_widget
│ └─...
├─scripts
├─source
│ ├─css
│ └─js
├─_config.yml
├─.gitignore
├─package.json
└─README.md

因为仅自己使用所以 languagesGruntfile.jsLICENSE 没有保留,

保留下了 layout 布局文件夹的全部文件,

清空了 scriptssource 目录下文件仅保留目录;

README.md 作为备忘录。

制作

因为保留下了官方主题的布局文件,所以只需要在原有基础上调整就可以制作一个主题雏形。

调整后的目录:

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
Layout
│ archive.ejs // 所有归档文章列表
│ category.ejs // 归档时间来分类的列表
│ index.ejs // 主页
│ layout.ejs // 通用布局模板
│ page.ejs // 单页模板
│ post.ejs // 文章模板
│ tag.ejs // 标签归档列表页
├─_partial // 私有组件
│ │ archive-post.ejs // 列表页文章预览
│ │ archive.ejs // 文章列表
│ │ article.ejs // 文章详情
│ │ footer.ejs // 尾部模板
│ │ meta.ejs // 页面META部分
│ │ header.ejs // 头部模板
│ │ sidebar.ejs // 侧边栏
│ └─posts // 文章组件
│ category.ejs // 文章分类归档
│ date.ejs // 文章创建时间
│ nav.ejs // 文章分页
│ tag.ejs // 文章Tag
│ title.ejs // 文章标题
└─_widget // 侧边栏部件
archive.ejs // 分类列表部件
category.ejs // 时间归档部件
recent_posts.ejs // 最后发布部件
tag.ejs // 标签分类部件

书写样式直接跳过,以下是一些制作完成之后遇到的问题

问题

在主题配置文件中添加个人信息并输出到页面

打开 thems 目录下对应主题的 _config.yml 文件,参考官方模板中的 Menu 属性同样创建 userinfo

1
2
3
4
5
6
7
8
9
# userinfo
user:
nickname: 王阳阳
bio: '久之须自见得'
commpany: ODIN.INC
address: Jiaxing,China
follow:
github: https://github.com/yogwang
weibo: http://weibo.com/yooooooge

如何在页面中输出??
在页面对应位置 <%= theme.user.nickname %> 即可,也可以循环输出

1
2
3
<% for (var i in theme.follow){ %>
<a href="<%= theme.follow[i] %>" target="_blank"></a>
<% } %>

其实也可以在 Hexo 根目录下的 _config.yml 文件配置 输出标签如 <%= config.LABEL %>

不知道怎么生成 ‘关于我’ 单页面

Layout 中编写完 about.ejs 模板之后,我想使用这个布局来创建关于我的单页面

Hexo.io 官方文档中是这样写的

hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

使用 hexo new 命令,创建关于我单页面

1
2
PS E:\yogwang.github.io> hexo new about aboutme
INFO Created: E:\yogwang.github.io\source\_posts\aboutme.md

这样就会生成一篇使用 about.ejs 来布局的 文章 并生成在_posts 文件夹下。注意哦,生成的是文章会在文章列表中显示。

那么问题来了,我怎么创建一个使用 about.ejs 布局,且不在文章列表中显示的单页面呢

Hexo 有 三种默认布局postpagedraft,它们分别对应不同的路径,自定义的其他布局和 post 相同,草稿文件都将储存到 source/_posts 文件夹。

所以在 hexo new 页面的时候先使用 hexo new page about

1
2
PS E:\yogwang.github.io> hexo new page about
INFO Created: E:\yogwang.github.io\source\about\index.md

这样会在 source 目录下创建 about 目录,并生成 index.md 文件,打开它在 Front-matter 中添加 layout: about

1
2
3
4
5
---
title: 我
date: 2019-07-11 15:10:39
layout: about
---