Hexo基本操作

发表于 更新于 分类于 ， 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 5 分钟

介绍使用 Hexo 建站和进行本地测试的流程，以及模板的配置、自定义模板、新建文章等。

Hexo基本操作

参考官方文档 Hexo

本文基于 hexo: 3.8.0

建站

1
2
3
hexo init <folder>
cd <folder>
npm install
1
2
3
4
5
$ hexo init blog
INFO  Cloning hexo-starter to ~/VScode/blog
Cloning into '/home/wylu/VScode/blog'...
...
INFO  Start blogging with Hexo!

如果没有提供 folder 将在当前目录下存放网站相关文件。

网站初始化完成后，文件结构如下：

1
2
3
4
5
6
7
8
9
10
11
$ 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

应用程序的信息，如已安装插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "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 会根据主题来生成静态页面。

启动服务器

建站完成后，执行以下命令启动本地服务器：

1
hexo server

或者

1
hexo s
选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录，使用覆盖记录格式

默认情况下，访问网址为： http://localhost:4000/

Hexo Default Demo

新建文章

下面命令可以创建一篇新文章：

1
hexo new [layout] <title>

例如：

1
2
$ 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

    1
    2
    3
    4
    5
    ---
    title: {{ title }}
    date: {{ date }}
    tags:
    ---

  • page

    1
    2
    3
    4
    ---
    title: {{ title }}
    date: {{ date }}
    ---

  • dragt

    1
    2
    3
    4
    ---
    title: {{ title }}
    tags:
    ---

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。Hexo支持 YAML 和 JSON 两种书写格式：示例如下

  • YAML

    1
    2
    3
    4
    ---
    title: Hello World
    date: 2013/7/13 20:46:25
    ---

  • JSON

    1
    2
    3
    "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 布局新建一个相册页面：

1
2
$ hexo new page Photo
INFO  Created: ~/VScode/blog/source/Photo/index.md

打开 source/Photo/index.md ，内容如下，date会生成具体时间

1
2
3
4
---
title: Photo
date: 2019-04-12 10:50:49
---

categories和tags

只有文章支持categories和tags，你可以在 Front-matter 中设置。在 Hexo 中分类具有顺序性和层次性，标签没有顺序和层次。

categories

如果文章的 Front-matter 包含如下分类描述，表示将该文章分类于Fruits下的Apple类别，其中Apple为Fruits的子分类。

1
2
3
categories:
  - Fruits
  - Apple

对于父子分类还可以使用下面的写法：

1
2
categories:
  - [Fruits, Apple]

或者

1
2
3
categories:
  - - Fruits
    - Apple

并列分类：

1
2
3
categories:
  - [Fruits]
  - [Animals]

并列 + 子分类：

1
2
3
categories:
  - [Fruits, Apple]
  - [Animals, Dog]

或者

1
2
3
4
5
categories:
  - - Fruits
    - Apple
  - - Animals
    - Dog
1
2
3
4
categories:
  - [Asia, China, Beijing]
  - [Fruits, Apple]
  - Animals

tags

标签没有层次，有如下两种写法

1
2
3
tags:
  - PS3
  - Games

或者

1
tags: [PS3, Games]

文件名称

Hexo 默认以标题做为文件名称，你可以编辑 站点配置文件 _config.yml 中 的 new_post_name 参数来改变默认的文件名称。

例如，修改默认 new_post_name 为：

1
new_post_name: :year-:month-:day-:title.md

那么生成的文件名就会包含时间和标题

1
2
$ 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 文件夹内相对应的文件来建立文件，例如：

1
hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是可以在模版中使用的变量：

变量 描述
layout 布局
title 标题
date 文件建立日期

可以在 scaffolds 文件夹下创建自定义的模板，如新建文件 photo.md

1
2
3
4
5
6
7
8
---
layout: {{ layout }}
title: {{ title }}
date: {{ date }}
---

Photo Collection

_config.yml 中默认的文件命名和布局配置如下：

1
2
new_post_name: :title.md # File name of new posts
default_layout: post

使用自定义模板新建文章：

1
2
$ hexo new photo "Custom Layout Demo"
INFO  Created: ~/VScode/blog/source/_posts/Custom-Layout-Demo.md

新建文章的内容如下：

1
2
3
4
5
6
7
8
---
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 布局，例如：

1
2
$ hexo new draft "Draft Demo"
INFO  Created: ~/VScode/blog/source/_drafts/Draft-Demo.md

预览草稿

默认情况下，草稿不会显示在页面中，如果想要显示可以在站点配置文件 _config.yml 中把 render_drafts 参数设为 true 来预览草稿。

1
render_drafts: true

或者在启动服务器时加上 --draft 参数来预览草稿

1
hexo server --draft

发布草稿

将草稿文件发布到 _posts 文件夹下

1
hexo publish [layout] <title>

例如：

1
2
$ hexo publish post Draft-Demo
INFO  Published: ~/VScode/blog/source/_posts/Draft-Demo.md