目标
介绍使用 Hexo 建站和进行本地测试的流程,以及模板的配置、自定义模板、新建文章等。
本文基于 hexo: 3.8.0
建站
hexo init <folder>
cd <folder>
npm install
$ hexo init blog
INFO Cloning hexo-starter to ~/VScode/blog
Cloning into '/home/wylu/VScode/blog'...
...
INFO Start blogging with Hexo!
如果没有提供 folder
将在当前目录下存放网站相关文件。
网站初始化完成后,文件结构如下:
$ tree -L 1
.
├── _config.yml
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
├── source
└── themes
4 directories, 3 files
_config.yml
站点配置文件,在此可以配置大部分参数,themes 文件夹下的主题也有 _config.yml 文件,我们称之为主题配置文件,它们是不同的配置文件。
node_modules
node模块库
package.json
应用程序的信息,如已安装插件
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.8.0"
},
"dependencies": {
"hexo": "^3.8.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-marked": "^0.3.2",
"hexo-server": "^0.3.3"
}
}
package-lock.json
执行 npm install
时自动生成,锁定安装时的包的版本号,无需关注
scaffolds
模板文件夹,当新建文章时,可以根据 scaffolds 中的模板来创建文件。Hexo 的模板是指在新建的 markdown 文件中默认填充的内容。
例如,如果修改 scaffold/post.md 中的 Front-matter 内容,那么每次新建一篇文章时都会包含这个修改。
source
资源文件夹是存放用户资源的地方,所有 hexo new
的 markdown 文件都会存放在 _posts
目录下。除 _posts
文件夹之外,开头命名为 _
(下划线)的文件/文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes
主题文件夹。Hexo 会根据主题来生成静态页面。
启动服务器
建站完成后,执行以下命令启动本地服务器:
hexo server
或者
hexo s
选项 | 描述 |
---|---|
-p, --port | 重设端口 |
-s, --static | 只使用静态文件 |
-l, --log | 启动日记记录,使用覆盖记录格式 |
默认情况下,访问网址为: http://localhost:4000/
新建文章
下面命令可以创建一篇新文章:
hexo new [layout] <title>
例如:
$ hexo new "First Passage"
INFO Created: ~/VScode/blog/source/_posts/First-Passage.md
在命令中可以指定文章的布局(layout),如果不指定,默认为 post 布局,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。
布局
Hexo 有三种默认布局:post、page 和 draft,它们分别对应不同的路径,你可以自定义的其他布局,使用自定义布局新建的文章和 post 相同都将储存到 source/_posts 文件夹。
布局 | 路径 |
---|---|
post | source/_posts |
page | source |
draft | source/_drafts |
Hexo 将布局模板放置在 scaffolds 文件夹下,默认的布局模板如下:
-
post
--- title: {{ title }} date: {{ date }} tags: ---
-
page
--- title: {{ title }} date: {{ date }} ---
-
dragt
--- title: {{ title }} tags: ---
Front-matter
Front-matter 是文件最上方以 ---
分隔的区域,用于指定个别文件的变量。Hexo支持 YAML
和 JSON
两种书写格式:示例如下
-
YAML
--- title: Hello World date: 2013/7/13 20:46:25 ---
-
JSON
"title": "Hello World", "date": "2013/7/13 20:46:25" ;;;
以下是 Hexo 的预定义参数,可以在模板和文章中使用这些参数。
参数 | 描述 | 默认值 |
---|---|---|
layout | 布局 | |
title | 标题 | |
date | 建立日期 | 文件建立日期 |
updated | 更新日期 | 文件更新日期 |
comments | 开启文章的评论功能 | true |
tags | 标签(不适用于page布局) | |
categories | 分类(不适用于page布局) | |
permalink | 重写文章的永久链接 | |
type | 指定页面类型,可设类型为"tags"或"categories"或不设定 | 默认不设定,此时为普通页面 |
例如,使用 page 布局新建一个相册页面:
$ hexo new page Photo
INFO Created: ~/VScode/blog/source/Photo/index.md
打开 source/Photo/index.md ,内容如下,date会生成具体时间
---
title: Photo
date: 2019-04-12 10:50:49
---
categories和tags
只有文章支持categories和tags,你可以在 Front-matter 中设置。在 Hexo 中分类具有顺序性和层次性,标签没有顺序和层次。
categories
如果文章的 Front-matter 包含如下分类描述,表示将该文章分类于Fruits下的Apple类别,其中Apple为Fruits的子分类。
categories:
- Fruits
- Apple
对于父子分类还可以使用下面的写法:
categories:
- [Fruits, Apple]
或者
categories:
- - Fruits
- Apple
并列分类:
categories:
- [Fruits]
- [Animals]
并列 + 子分类:
categories:
- [Fruits, Apple]
- [Animals, Dog]
或者
categories:
- - Fruits
- Apple
- - Animals
- Dog
categories:
- [Asia, China, Beijing]
- [Fruits, Apple]
- Animals
tags
标签没有层次,有如下两种写法
tags:
- PS3
- Games
或者
tags: [PS3, Games]
文件名称
Hexo 默认以标题做为文件名称,你可以编辑 站点配置文件 _config.yml 中 的 new_post_name 参数来改变默认的文件名称。
例如,修改默认 new_post_name 为:
new_post_name: :year-:month-:day-:title.md
那么生成的文件名就会包含时间和标题
$ hexo new "Demo Post"
INFO Created: ~/VScode/blog/source/_posts/2019-04-12-Demo-Post.md
以下是 Hexo 的占位符:
占位符 | 描述 |
---|---|
:title | 标题(小写,空格将会被替换为短杠) |
:year | 建立的年份,比如2015 |
:month | 建立的月份(有前导零),比如04 |
:i_month | 建立的月份(无前导零),比如4 |
:day | 建立的日期(有前导零),比如07 |
:i_day | 建立的日期(无前导零),比如7 |
自定义模板
在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:
hexo new photo "My Gallery"
在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md,并根据其内容建立文章,以下是可以在模版中使用的变量:
变量 | 描述 |
---|---|
layout | 布局 |
title | 标题 |
date | 文件建立日期 |
可以在 scaffolds 文件夹下创建自定义的模板,如新建文件 photo.md
---
layout: {{ layout }}
title: {{ title }}
date: {{ date }}
---
Photo Collection
_config.yml 中默认的文件命名和布局配置如下:
new_post_name: :title.md # File name of new posts
default_layout: post
使用自定义模板新建文章:
$ hexo new photo "Custom Layout Demo"
INFO Created: ~/VScode/blog/source/_posts/Custom-Layout-Demo.md
新建文章的内容如下:
---
layout: photo
title: Custom Layout Demo
date: 2019-04-12 12:28:23
---
Photo Collection
生成的文件使用了布局模板 photo.md,填充了相应的的标题、布局以及创建时间,同时将其放置在默认布局 post 的路径下。
草稿
使用 draft 布局创建的文件会被保存到 source/_drafts 文件夹,可以通过 publish 命令将草稿移动到 source/_posts 文件夹,同样支持指定布局。
创建草稿
创建草稿需要使用 draft 布局,例如:
$ hexo new draft "Draft Demo"
INFO Created: ~/VScode/blog/source/_drafts/Draft-Demo.md
预览草稿
默认情况下,草稿不会显示在页面中,如果想要显示可以在站点配置文件 _config.yml 中把 render_drafts 参数设为 true 来预览草稿。
render_drafts: true
或者在启动服务器时加上 --draft
参数来预览草稿
hexo server --draft
发布草稿
将草稿文件发布到 _posts 文件夹下
hexo publish [layout] <title>
例如:
$ hexo publish post Draft-Demo
INFO Published: ~/VScode/blog/source/_posts/Draft-Demo.md