前言

这部分将着手Hexo的一些基本的配置和使用方面,关于Hexo的部署部分可以参考我的上篇文章。

Hexo文件目录

Hexo的安装/初始化目录如下图所示,可能部分文件存在不同,不需要担心,只需要关心我框出来的红色的文件部分

image-20220604161631343
文件/文件夹名 说明
public 我们最后生成的静态博客.html文件会在该目录下存在,如果你并为生成或者使用了hexo clean命令,则该文件夹不存在
scaffolds 模板文件夹,里面存在我们创建文章,分类等初始化的默认内容
source 文章以及一些主要内容的文件夹,该文件夹下的内容会被全部拷贝到生成的public文件夹里
themes 主题文件夹,我们下载使用的主题需要导入到该文件夹中,通过在该文件夹下创建命名为主题名称的文件夹即可
_config.yml Hexo的配置文件

注:Hexo的配置文件和主题的配置文件不要混淆,如果你使用别人的主题则会存在一个对应的主题的配置文件

配置文件参数

yaml文件的参数填写时一定要在:后加一个空格,再填写参数

在了解了Hexo 的文件目录后,我对一些常见的配置文件参数进行说明,以供参考。

Site

Site部分主要是网站一些基本说明参数。

1
2
3
4
5
6
7
8
# Site 【网站设置】
title: 这是一个主标题 #【网站主标题】就是网站最上面标签上的文字
subtitle: '这是一个子标题' #【子标题】跟在主标题后面
description: '这是一句描述' #【网站描述】不同主题可能会呈现位置效果不同
keywords: #【网站关键词】如果希望百度等搜索引擎收录网站,可以设置自己网站的关键词
author: 我是作者名字 #【作者名称】一般文章结束说明以及最后的版权归属会使用该名称
language: zh-CN #【网站语言】可以选择简体(zh-CN),繁体(zh-tw),英文(en)
timezone: 'Asia/Shanghai' #【时区】网站时间,如果是中国,则使用左边的参数即可

URL

URL部分参数的设置,涉及到Hexo最后部署后的呈现成功与否,参数说明如下:

1
2
3
4
5
6
7
8
9
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'httpss://username.github.io/project'
url: httpss://www.baidu.com/ #【访问网站的网址】
root: #【根目录位置】
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

如果你部署到GitHub上,则url的参数填写,GitHub提供的地址,root参数填写你的仓库名称,例如:/仓库名称;如果你使用了自定义的域名,则需要将这里url的参数改为你的自定义域名,root参数为空即可(前提是你的网站初始index.html文件就在仓库下,而不是被文件夹嵌套在里面)

如果上述参数设置不正确,则会出现访问网站只有内容,而丢失样式,即排版不正常的情况出现

Directory

Directory规定了相关文件生成/获取的路径,我们可以通过修改其参数来指定相关文件生成的目录,而不是默认的hexo安装目录下,参数说明如下:

1
2
3
4
5
6
7
8
9
# Directory
source_dir: D:\DATA\TyporaMd\z_hexo_source #【数据源文件夹】你可以理解为你写文章的目录,默认为Source,此处我将它自定义到如上参数路径下,则在编译生成网站静态文件的时候就会从我指定目录下获取数据编译
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

theme

theme参数主要是指定网站的主题,传入主题名称即可,前提是网站主题已经导入到主题文件夹下,且和主题文件夹同名。参数说明:

1
2
3
4
# Extensions
## Plugins: httpss://hexo.io/plugins/
## Themes: httpss://hexo.io/themes/
theme: butterfly #【主题的名称】

插件和主题的配置

插件和主题的配置,可以在后面熟悉上手之后进行配置,可以选择不配置使用默认主题。

主题

网站的美化可以使用别人已经开发的主题来快速实现,主题可以通过Hexo官网获取Hexo官网,或者从Github,百度等其他渠道获取使用。

主题的下载安装可以根据主题的说明文档来,需要注意的是,主题需要在Hexo指定的主题文件夹下存放,且每个主题都需要是一个文件夹

关于主题配置的实例,可以参考本站,本站使用的是buttfly主题,主题地址,希望大家可以给源作者一个Star支持一下。

插件

插件也同理,找到需要的插件,查看插件的文档,对插件进行相关配置。

插件的使用,本站使用了如下插件:

  1. 本地搜索感谢 hexo-generator-search 提供支持
  2. 评论系统感谢 waline 提供支持
  3. 网站统计感谢 百度统计 提供支持
  4. 数学公式感谢 mathjax 提供支持
  5. 番剧列表感谢 hexo-bilibili-bangumi 提供支持
  6. 视频插件感谢 hexo-tag-mmedia 提供支持
  7. 文章自动分类感谢 hexo-auto-category 提供支持
  8. 游戏展示感谢 hexo-steam-games 提供支持
  9. 电影书籍音乐展示感谢 HEXO-DOUBAN-CARD 提供支持

文章编写和发布

Hexo 支持以任何格式书写文章,只要安装了相应的渲染插件

如上引用自Hexo官方说明,Hexo默认安装了hexo-renderer-markedhexo-renderer-ejs,所以默认支持使用Markdown进行写作,此处也使用Markdown写作来实例。

可以使用如下命令来创建一篇新文章:

1
2
3
4
5
6
7
8
9
10
11
12
13
# 语法格式
hexo new [layout] <title>

# 创建一篇名称为 测试 的文章
hexo new post 测试
# 因为layout默认为post,所以上述命令可以简写为
hexo new 测试

# 创建一篇名称为 测试 的草稿
hexo new draft 测试

# 创建一页名称为 测试 的独立页面
hexo new page 测试

例如,使用命令hexo new 测试,可以发现在source文件夹下,里的_post文件夹里生成了一个名称为测试.md文件,该.md文件就可以直接使用Markdown语法来书写文章

如果你自定义了source文件夹的位置,则生成在自定义的source文件夹下_post文件夹里

当你打开生成 的测试.md文件后,会发现它默认文件中生成了一部分yaml内容,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 测试
keywords:
- null
tags:
- null
categories:
- null
date: 2022-06-04 18:02:30
updated:
top_img:
mathjax:
aplayer:
cover:
description:
---

当然,你生成的文件中的内容或许没这么多,一般会有titletags等参数,其他的参数是我通过修改模板文件来实现,生成新文章的时候自动预先生成相关参数。这些参数是对本篇文章的参数,它可以设置本篇文章的标题,文章标签,文章分类,文章封面图片,文章描述等等的参数。当然你也可以选择不填写这些参数,可以为空(标题除外)

关于模板文件可以查看下面的部分,此处不做过多赘述

然后在上面yaml参数的下面,开始使用Markdown语法写我们的文章,现在使用如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 这是一个一级标题
## 这是一个二级标题
### 这是一个三级标题
#### 这是一个四级标题
* 这是一个无序序号
* 这也是一个无序序号
* 这也是一个无序序号

> 这是一个引用说明

**这是黑体**
*这是斜体*

1. 这是有序序号
1. 这也是有序序号
1. 这还是有序序号

这是一个代码块
```c
printf("Hello World");
```

这是一个行内代码`

将上述内容保存后,就可以使用如下命令实现文章编译

1
hexo g

如果你之前已经编译过了,生成新文章或者重新编译的时候,我们一般使用如下命令清除之前的编译文件

1
2
3
4
5
6
7
# 该命令清除public文件夹,即删除所有已编译过的文件
hexo clean
# 然后让Hexo重新编译新的静态文件
hexo g

# 或者你可以使用 & 符号来链接两个命令
hexo clean && hexo g

上述执行hexo g编译完成后,如果没有报错,则可以使用如下命令来本地查看编译效果

1
2
3
hexo server
# 当然你也可以简写为
hexo s

在本地查看效果无误后,使用如下命令推送到远程的GitHub仓库,来实现文章的更新

1
hexo d

完成以上操作,则完成了文章的编写和推送更新发布,简述来说通过hexo new 文章名称创建文章文件,编写文章文件内容的,保存后,使用hexo g将其编译为静态文件,如果之前已经编译过一遍,一般通过使用hexo clean将之前编译的文件删除,再执行hexo g编译一份新的静态文件,然后使用hexo s来本地查看效果,使用hexo d将新编译的静态文件推送到远程仓库,这样就实现文章的更新

模板文件

在前面的Hexo文件目录中说明了模板文件的位置,在Hexo安装目录下的scaffolds文件夹下,里面会存在三个文件,如下说明,通过修改这三个文件的yaml内容部分,这样生成的相关类别的文章会默认包含该参数内容。

文件名 说明
draft.md 草稿文件的模板
page.md 独立页面的模板
psot.md 一般文章的模板

其他内容

文章标签和分类

前面说明了,文章创建的时候自带的yaml参数可以修改其文章的属性,其中有一个给文章分类的参数,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 测试
tags:
- 这是一个标签
- 这又是一个标签
- 这还是一个标签
categories:
- 这是一个分类
- 这是一个子分类
date: 2022-06-04 18:02:30
---

# 如果你希望文章可以属于好几个类别,而不是主分类-子分类,则使用如下参数
categories:
- [这是一个分类,这是一个子分类]

GitHub使用自定义域名

如果你希望使用自定义域名来访问自己在GitHub上部署的网站,则可以在GitHub Page下,填写自己的自定义域名,然后解析到GitHub上,需要注意的是,在你添加自定义域名的时候,会在你的仓库下创建一个CNAME的文件,该文件只有一行内容,就是你的自定义域名

因为每次使用hexo d上传到仓库文件的时候,Hexo的解决办法是将本地public文件夹下的文件去覆盖GitHub仓库,那就意味着你的CNAME文件将会被覆盖消失,那么你配置的自定义域名就会失效。

你可以通过将CNAME文件创建在你本地的source文件夹下,则再每次使用hexo g编译的时候,source文件夹下的内容都会复制到public文件夹里,这样上传到GitHub上进行覆盖的时候就始终存在CNAME文件。

End

经过[[技术杂谈/Hexo入门(上)|Hexo入门(上)]]和Hexo入门(下)后就可以完全自主的使用Hexo来编写和更新自己的文章了,关于本站的Hexo主题使用说明和插件说明,为了防止我自己忘记,我会写一篇备忘录来记录,内容来源是原主题/插件开发者的说明文档。