Hexo 基本操作

发表于 | 分类于 |   |   次阅读

本文参考了官网文档，主要介绍了 Hexo 文章的写作、生成、部署，以及写作过程中涉及的插入引用、码块、图片、Latex 公式，以及在主页上只局部显示部分文章内容的设置。

写作

创建新文章，在根目录下输入：

1
$ hexo new [layout] <title>

其中的 [layout] 默认为 post，可以通过修改 _config.yml 中的 default_layout 设置默认布局。

布局（Layout）

Hexo 有三种默认的布局：post、page 和 draft ，它们分别保存在本地不同的路径，二自定义的其它布局和 post 布局都保存在 source/_posts 文件夹中。

布局 路径
post source/_posts
page source
draft source/_drafts

如果不想文章的格式被处理，则可以在 Front-Matter 中设置 layout: false。这时网页只会显示纯文本，不会加载任何模板，但是这时的网页也并不会保留 markdown 的标记符号，而是将其转为 html 的标签。

文件名称

创建新文件时，通过命令：hexo new filename，这时在 source/_posts 中会出现文件 filename.md，并且在文件头部初始化了 Front-Matter。但是为了便于管理文件，希望在文件名前面加入创建日期，保存为日期+文件名.md，例如 2017-03-05-filename.md，则需要修改 hexo 根目录下的 _config.yml 文件，将其中的 new_post_name 字段参数设置为: :year-:month-:day-:title.md，这样就可以达到预期效果了。其中 :month 和 :day 可以替换为 :i_month 和 :i_day，使得建立的文件名月份和日期前面没有0（七号的 07 替换为 7）。

草稿

上文中提到了 Hexo 的 draft 布局，可以通过命令 hexo new draft filename 建立这种布局的文件，它默认保存在 source/_drafts 文件夹，可以通过 publish 命令将其移动到 source/_posts 文件夹中，该命令中也可以通过 layout 来指定布局。

1
$ hexo publish [layout] <title>

保存为草稿的文章不会在网页中显示。

Front-matter

Front-matter hexo new filename 命令生成的文件中自带的配置信息，位于文件开头，用于制定当前文稿的样式。例如本文的 Front-matter 为：

1
2
3
4
5
6
7
8
---
title: hexo 基本操作
date: 2017-03-05 15:11:26
tags:
- hexo 命令
categories: 
- 网站配置相关
---

除了上面的 title、date、tags、categories 之外，还可以添加别的字段，例如

字段 作用
comments: true 允许或禁止该文章的评论，其值默认为 true 因此可以不指定，如果设为 false，则禁止游客对该文进行评论
updated: 日期 用于设置文章更新日期
permalink: :year/:month/:day/:title/ 用于生成访问链接的格式，默认为 https://charlesnord.github.io/2016/05/06/your_title/ 类似的，可以改为 :year/:month/:day/:title.html 更搜索引擎友好

分类和标签

只有 post 布局的文章支持分类和标签。分类和标签分别对应 Front-Matter 中的 categories: 和 tags:字段，其书写格式如上一节所示。分类和标签不同，分类有顺序性和层次性，而标签不分顺序和层次。

如果 categories: 下指定了多个类别，那么这些类别是包含关系，例如：

1
2
3
categories:
- Diary
- Life

其中 Life 是 Diary 的子分类，而不是并列分类。因此 categories: 最好只指定一个类别，而 tags: 可以指定多个标签，每个标签以 - 开头，在 tag: 下单独占一行。

标签插件（Tag Plugins）

这里的标签插件不是上文的标签，它们用于在文章中快速插入特定内容的插件，例如图片、代码块等。这里的语法和 markdown 不同，是 Hexo 特有的语法（也可以用 markdown 语法）。

引用块

在文章中插入引言，可包含作者、来源和标题。
别号： quote

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote%}

样例

  • 没有提供参数，则只输出普通的 blockquote
    1
    2
    3
    4
    5
    6
    {% blockquote %}
    我说：“妖妖，你看那水银灯的灯光像什么？大团的蒲公英浮在街道的河流口，吞吐着柔软的针一样的光。”妖妖说：“好，那么我们在人行道上走呢？这昏黄的路灯呢？”
    我抬头看看路灯，它把昏黄的灯光隔着蒙蒙的雾气一直投向地面。
    我说：“我们好象在池塘的水底。从一个月亮走向另一个月亮。”
    妖妖忽然大惊小怪地叫起来：“陈辉，你是诗人呢！”
    {% endblockquote %}

我说：“妖妖，你看那水银灯的灯光像什么？大团的蒲公英浮在街道的河流口，吞吐着柔软的针一样的光。”妖妖说：“好，那么我们在人行道上走呢？这昏黄的路灯呢？”
我抬头看看路灯，它把昏黄的灯光隔着蒙蒙的雾气一直投向地面。
我说：“我们好象在池塘的水底。从一个月亮走向另一个月亮。”
妖妖忽然大惊小怪地叫起来：“陈辉，你是诗人呢！”

  • 引用书上的句子
    1
    2
    3
    4
    5
    6
    {% blockquote 王小波，绿毛水怪 %}
    我说：“妖妖，你看那水银灯的灯光像什么？大团的蒲公英浮在街道的河流口，吞吐着柔软的针一样的光。”妖妖说：“好，那么我们在人行道上走呢？这昏黄的路灯呢？”
    我抬头看看路灯，它把昏黄的灯光隔着蒙蒙的雾气一直投向地面。
    我说：“我们好象在池塘的水底。从一个月亮走向另一个月亮。”
    妖妖忽然大惊小怪地叫起来：“陈辉，你是诗人呢！”
    {% endblockquote %}

我说：“妖妖，你看那水银灯的灯光像什么？大团的蒲公英浮在街道的河流口，吞吐着柔软的针一样的光。”妖妖说：“好，那么我们在人行道上走呢？这昏黄的路灯呢？”
我抬头看看路灯，它把昏黄的灯光隔着蒙蒙的雾气一直投向地面。
我说：“我们好象在池塘的水底。从一个月亮走向另一个月亮。”
妖妖忽然大惊小怪地叫起来：“陈辉，你是诗人呢！”

王小波，绿毛水怪
  • 引用网络上的文章 
    1
    2
    3
    4
    5
    6
    {% blockquote 王小波，绿毛水怪 %}
    我说：“妖妖，你看那水银灯的灯光像什么？大团的蒲公英浮在街道的河流口，吞吐着柔软的针一样的光。”妖妖说：“好，那么我们在人行道上走呢？这昏黄的路灯呢？”
    我抬头看看路灯，它把昏黄的灯光隔着蒙蒙的雾气一直投向地面。
    我说：“我们好象在池塘的水底。从一个月亮走向另一个月亮。”
    妖妖忽然大惊小怪地叫起来：“陈辉，你是诗人呢！”
    {% endblockquote %}

我说：“妖妖，你看那水银灯的灯光像什么？大团的蒲公英浮在街道的河流口，吞吐着柔软的针一样的光。”妖妖说：“好，那么我们在人行道上走呢？这昏黄的路灯呢？”
我抬头看看路灯，它把昏黄的灯光隔着蒙蒙的雾气一直投向地面。
我说：“我们好象在池塘的水底。从一个月亮走向另一个月亮。”
妖妖忽然大惊小怪地叫起来：“陈辉，你是诗人呢！”

代码块

别号：code

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

反引号代码块：

1
```[language] [title] [url] [link text] code snippet```

样例

  • Hexo 代码块
    1
    2
    3
    4
    5
    {% codeblock lang:python %}
    x = 1
    y = 2
    print x + y
    {% endcodeblock%}
1
2
3
x = 1
y = 2
print x + y
  • 反引号代码块
    1
    2
    3
    4
    5
    ```python
    x = 1
    y = 2
    print x + y
    ```
1
2
3
x = 1
y = 2
print x + y

更多的标签插件（Tag Plugins）请参考官方文档

Latex 公式

Latex 公式可以用两种区块进行包裹，用于提示进行 latex 渲染，分别是 \\[ math equation \\] 和 $$ math equation $$。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
\\[\begin{aligned}
\dot{x} & = \sigma(y-x) \\\
\dot{y} & = \rho x - y - xz \\\
\dot{z} & = -\beta z + xy
\end{aligned} 
\\]
$$
\frac{\partial u}{\partial t} = h^2 \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} + \frac{\partial^2 u}{\partial z^2}\right)
$$
$$
\sum_1^n x^2 = 1
$$

效果：
\[\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}
\]

$$
\frac{\partial u}{\partial t} = h^2 \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} + \frac{\partial^2 u}{\partial z^2}\right)
$$

$$
\sum_1^n x^2 = 1
$$

文章长度过长

Hexo 默认在主页上全文显示所有文章，为了能在主页只显示文章的简介，可以在文章合适的位置添加如下行：

1
<!--more-->

这样，在主页上只会显示该行以前的内容，以后的内容被折叠。因此，每篇文章开头最好写一个用于在主页显示的简介，然后在简介下方添加上面的行。

资源文件夹

资源文件夹是指存储文章中图片、CSS、JS 等文件的文件夹。如果 Hexo 项目中只有少量图片，可以把它们放在 source/images 文件夹中。然后用 markdown 语法 ![](/images/image.jpg) 在文章中引用它们。

文章资源文件夹

正常情况下建议采用文章资源文件夹，对每篇文章的资源进行分别存储。首先需要修改 _config.yml 中的 post_asset_folder 选项设置为 true 来打开。
打开这个选项后，Hexo 会每次在用户通过 hexo new filename 新建的文章建立与文章同名的文件夹，用来存储该文章需要的资源。

相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在主页或者 archieve 页显示不正确，因此建议采用 hexo 的标签插件来对其进行引用。

1
2
3
{% asset_img slug [title] %}
{% asset_path slug %}
{% asset_link slug [title] %}

建议采用插件引用图片，例如，在与文章同名的资源文件夹下放置 example.jpg 图片，然后，在文章中通过下面的语句进行引用。

1
{% asset_img example.jpg This is an example %}

服务器

编辑完文档后，通过在 hexo 根目录执行命令 hexo server（hexo s） 来将项目部署到本地服务器上，部署端口默认为 4000。此时，在本机输入 http://localhost:4000 即可访问网站。服务器启动期间，Hexo 会监视文件变动并自动更新，因此每次改动源文件后无需重新生成、重启服务器才可以看到变化，直接刷新网页即可。

如果想修改默认端口，例如改为 5000 ，可以运行命令 hexo server -p 5000。

除了在主机上通过 http://localhost:4000 访问，在局域网下，连接同一个路由器的设备都可以访问该网站，前提是知道该网站服务器的局域网 ip 地址。在 mac 上，可以通过: 系统偏好设置 -> 网络 查看本机的局域网 ip。例如本人电脑目前的局域网 ip 地址为 192.168.1.104，在本人手机浏览器输入：http://192.168.1.104:4000，即可访问本网站。至于如何通过外网访问，请阅读这一系列的 Hexo 搭建教程。

生成文件

如果想将网站部署到 github 上，则需要将本地的工程生成为静态文件，在 Hexo 根目录下执行命令：hexo generate（hexo g）。生成后执行 hexo deploy 将其部署到 github。对于部署到 github 的静态文件，本地修改源文件不能实时显示到网站上，因此每次做出修改后，想要观察效果，可以用上节的命令将其部署到本地服务器，确认没有问题了，再用本节的命令生成静态文件，并部署到 github。

监视文件变动

如果要重新生成所有文件，则需要执行命令 hexo clean，hexo g，但是这样往往生成的时间会很长。也可以采用

1
hexo generate --watch

实时地生成静态文件，执行上述命令后，Hexo 能够通过对比文件的 SHA1 checksum 监视文件的实时变动，只对变动的文件生成静态文件。

生成后部署

部署到 github 采用 hexo deploy 命令，也可以任意执行下面的两条组合命令中的一条，让 Hexo 在生成完成后自动部署网站，两条命令是等价的。

1
2
hexo generate --deploy
hexo deploy --generate

或者简写为：

hexo g -d
hexo d -g

至此，Hexo 的基本操作就介绍完了，完整介绍请查阅官网文档