Hexo建站日志 (3) - 深入理解 Hexo

目录结构

Hexo 默认目录结构

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy #执行hexo deploy命令部署到GitHub上的内容目录
├── public #执行hexo generate命令,输出的静态网页内容目录
├── scaffolds #layout模板文件目录,其中的md文件可以添加编辑
├── scripts #扩展脚本目录,这里可以自定义一些javascript脚本
├── source #文章源码目录,该目录下的markdown和html文件均会被hexo处理。
| ├── _drafts #草稿文章
| └── _posts #执行hexo new "title"后,新建的文章存储在此文件夹下
├── themes #主题文件目录
├──_config.yml #全局配置文件,大多数的设置都在这里
└── package.json #应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

Theme 默认目录结构

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
├── .github                 #git信息
├── languages #多语言
| ├── default.yml #默认语言
| └── zh-Hans.yml #简体中文
| └── zh-tw.yml #繁体中文
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _custom #可以自己修改的模板,覆盖原有模板
| | ├── _header.swig #头部样式
| | ├── _sidebar.swig #侧边栏样式
| ├── _macro #可以自己修改的模板,覆盖原有模板
| | ├── post.swig #文章模板
| | ├── reward.swig #打赏模板
| | ├── sidebar.swig #侧边栏模板
| ├── _partial #局部的布局
| | ├── head #头部模板
| | ├── search #搜索模板
| | ├── share #分享模板
| ├── _script #局部的布局
| ├── _third-party #第三方模板
| ├── _layout.swig #主页面模板
| ├── index.swig #主页面模板
| ├── page #页面模板
| └── tag.swig #tag模板
├── scripts #script源码
| ├── tags #tags的script源码
| ├── marge.js #页面模板
├── source #源码
| ├── css #css源码
| | ├── _common #*.styl基础css
| | ├── _custom #*.styl局部css
| | └── _mixins #mixins的css
| ├── fonts #字体
| ├── images #图片
| ├── uploads #添加的文件
| └── js #javascript源代码
├── _config.yml #主题配置文件
└── README.md #用GitHub的都知道

模板引擎

模板引擎的作用,就是将界面与数据分离。最简单的原理是将模板内容中指定的地方替换成数据,实现业务代码与逻辑代码分离。

我们可以注意到,在 Hexo 中,source 文件夹和 themes 文件夹是在同级的,我们就可以将 source 文件夹理解为数据库,而主题文件夹相当于 界面。然后我们 hexo g 就将我们的数据和界面相结合生成静态文件 public。

Hexo 的模板引擎是默认使用 ejs 编写的。hexo首先会解析 md 文件,然后根据 layout 判断布局类型,再调用其他的文件,这样每一块的内容都是独立的,提高代码的复用性。最终会生成一个 html 页面。

模板文件在 layout 文件夹下,layout 文件文档结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── _custom // 通用布局
├── _layout.swig // 默认布局布局
├── _macro // 插件模板
├── _partials // 局部布局
├── _scripts // script模板
├── _third-party // 第三方插件模板
├── archive.swig // 归档模板
├── category.swig // 分类模板
├── index.swig // 首页模板
├── page.swig // 其他模板
├── photo.swig // 照片模板(自定义)
├── post.swig // 文章模板
├── schedule.swig // 归档模板
└── tag.swig // 标签模板

每个模板都默认使用layout布局,您可在文章的前置申明中指定其他布局,比如“post”或者“page”或是设为 false 来关闭布局功能(如果不填默认是 post,这个在 _config.yml 中可以设置默认值),您甚至可在布局中再使用其他布局来建立嵌套布局。

在我们新建页面或者新建文章的使用可以选定我们使用的模板。hexo new [layout] 就会使用对应的模板。

其中 _layout.swig 是通用模板,里面引入了 head、footer 等公共组件,然后在其他的模板中会引入这个 _layout.swig 通用模板。

数据的填充

主题是供了页面的布局和样式,在生成 HTML 文件时,Hexo 会把特定的数据,传给 swig 模板,然后再由 swig 将数据填充到 HTML 文件之中。这些特定的数据,分为如下几类。

主配置文件数据

Hexo 的根目录中,有个 _config.yml 文件,它就是主配置文件,数据组织使用 YAML语法 ,其中的项目,可以在模板中直接使用,比如博客的名字、副标题等等之类。

主题配置文件数据

每个主题,还有单独的配置文件,用于配置与主题紧密相关的内容,格式与主配置文件一致。只不过变量名为 theme 。

具体哪些数据放到主配置文件中,哪些数据放到主题配置文件,自由度其实很高,一般的,推荐与博客中的数据相关的,放主配置文件,如博客的名字、作者、菜单配置等,与主题相关的,放到主题配置文件,比如主题的脚本文件列表、样式文件列表等。

配置文件中数据的使用

如果要在模板中使用某个具体的值,比如字符串、数字、逻辑变量或者对象的某个成员,可以在主题的模板文件 swig 中直接使用:

1
{% block title %} {{ page.title }} | {{ config.title }} {% endblock %}

Hexo 中的变量

Hexo 提供了很多的 变量,比如我们上面使用的 page 变量,还有 site 变量等,这些都是 Hexo 提供的,我们可以拿来直接使用的,常用的变量有:

  • site:对应整个网站的变量,一般会用到 site.posts.length 制作分页器。
    • site.posts 所有文章
    • site.pages 所有分页
    • site.categories 所有分类
    • site.tags 所有标签
  • page:存放当前页面的信息,例如我在 index.ejs 中使用 page.posts 获取了当前页面的所有文章而不是使用 site.posts。
  • config:config 变量我们在主目录下配置文件 _config.yml 中保存的信息。
  • theme:theme 变量是我们在主题目录下配置文件 _config.yml 中保存的信息。
  • path:当前页面的路径(不含根路径)。
  • url:页面完整网址。

页面变量

Page 这里指的是 hexo new page 创建的那个页面。

  • page.title:文章标题
  • page.date:文章建立日期
  • page.updated:文章更新日期
  • page.comments:留言是否开启
  • page.layout:布局名称
  • page.content:文章完整内容
  • page.excerpt:文章摘要
  • page.more:除了摘要的其他内容
  • page.source:文章原始路劲
  • page.full_source:文章完整原始路径
  • page.path:文章网址(不含根路径),通常在主题中使用url_for(page.path)
  • page.permalink:文章永久网址
  • page.prev:上一篇文章,如果此为第一篇文章则为null
  • page.next:下一篇文章,如果此为最后一篇文章则为null
  • page.raw:文章原始内容
  • page.photos:文章的照片(用于相册)
  • page.link:文章的外链(用于链接文章)

Post 变量

这里指的是文章页面,与 page 布局相同,添加如下变量:

  • page.pulished:文章非草稿为true
  • page.categories:文章分类
  • page.tags:文章标签

首页(index)

  • page.per_page:每一页显示的文章数
  • page.total:文章数量
  • page.current:当前页码
  • page.current_url:当前页的URL
  • page.posts:当前页的文章
  • page.prev:前一页页码,如果为第一页,该值为0
  • page.prev_link:前一页URL,如果为第一页,则为’’
  • page.next:后一页页码,如果为最后一页,则为0
  • page.next_link:后一页URL,如果为最后一页,则为’’
  • page.path:当前页网址(不含根路径),通常在主题中使用url_for(page.path)

归档页(archive)

与index布局相同,但是新增如下变量:

  • archive 为true
  • year 归档年份(4位)
  • month 归档月份(不包含0)

参考阅读:

hexo原理浅析
Hexo 7:【原理】深入理解 Hexo
Hexo 主题制作指南
写一个自己的Hexo主题