hexo使用精进历程

发表于 更新于 分类于

文章来源之Front-matter | Hexo官方文档

学习技术之前，看官方文档真是一个享受

很多问题都可以直接在里面找到答案，豁然开朗

这里的内容 和hexo文章编辑注意事项里面的有部分一致，后续再做调整

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

-–
title: Hello World
date: 2013/7/13 20:46:25
-–

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章的永久链接，永久链接应该以 / 或 .html 结尾 null
excerpt 纯文本的页面摘要。使用 该插件 来格式化文本
disableNunjucks 启用时禁用 Nunjucks 标签 {{ }}/{% %} 和 标签插件 的渲染功能 false
lang 设置语言以覆盖 自动检测 继承自 _config.yml

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

分类方法的分歧

如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

categories:
- Diary
- Life

会使分类 Life 成为 Diary 的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

标签插件（Tag Plugins）

标签插件和 Front-matter 中的标签不同，它们是用于在文章中快速插入特定内容的插件。

虽然你可以使用任何格式书写你的文章，但是标签插件永远可用，且语法也都是一致的。

标签插件不应该被包裹在 Markdown 语法中，例如： []({% post_path lorem-ipsum %}) 是不被支持的。

引用块

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

别号： quote

content

\[author\[source\]\] \[link\] \[source\_link\_title\]
示例

没有提供参数，则只输出普通的 blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书上的句子

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

引用 Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

引用网络上的文章

Every interaction is both precious and an opportunity to delight.

Every interaction is both precious and an opportunity to delight.

代码块

在文章中插入代码。

别名： code

\[title\] \[lang:language\] \[url\] \[link text\] \[additional options\]
1
2
  
code snippet

以 option:value 的格式指定额外选项，例如：line_number:false first_line:5。

额外选项 描述 默认值
line_number 显示行号 true
line_threshold 只有代码块的行数超过该阈值，才显示行数 0
highlight 启用代码高亮 true
first_line 指定第一个行号 1
mark 突出显示特定的行，每个值用逗号分隔。 使用破折号指定数字范围
例如： mark:1,4-7,10 将标记第1、4至7和10行
wrap 用 <table> 包裹代码块 true

常用插件推荐和插件安装

Hexo 本身提供了一个框架，通过丰富的拓展插件，能够进一步优化使用体验，你可以在 Hexo 插件 中寻找适合你的拓展。

生成永久链接

hexo 文章链接默认的生成规则是：:year/:month/:day/:title，即按照年、月、日、标题的顺序

当文件名为中文时，会导致 url 链接中也出现中文

1
https://emoryhuang.github.io/blog/2021/05/09/Hexo %E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90

这样的链接非常不利于阅读，也不美观

hexo-abbrlink 插件通过算法为文章生成永久链接，相对来说更加简洁方便。

  1. 安装 hexo-abbrlink 插件
1
npm install hexo-abbrlink --save
  1. 修改 config.yml 文件中的永久链接：
1
2
3
4
permalink: blog/:abbrlink.html # 也可以直接写 :abbrlink/
abbrlink:
  alg: crc32 #算法： crc16(default) and crc32
  rep: dec #进制： dec(default) and hex

hexo-abbrlink 支持 16 位、32 位以及十进制，十六进制共 4 种不同的模式，你可以按照需求选择。

生成链接样式

1
2
3
4
5
6
7
8
9
10
11
# crc16 & hex
https://post.zz173.com/posts/66c8.html

# crc16 & dec
https://post.zz173.com/posts/65535.html

# crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

# crc32 & dec
https://post.zz173.com/posts/1690090958.html

添加 RSS 订阅

RSS 的全称是 Really Simple Syndication（简易信息聚合），它是一种消息来源的格式规范，网站可以按照这种格式规范提供文章的标题、摘要、全文等信息给订阅用户，用户可以通过订阅不同网站 RSS 链接的方式将不同的信息源进行聚合，在一个工具里阅读这些内容。当网站内容更新时，可以通过订阅 RSS 源在 RSS 阅读器上获取更新的信息

  1. 安装 hexo-generator-feed 插件
1
npm install hexo-generator-feed --save
  1. 在 config.yml 文件中添加如下的订阅配置：
1
2
3
4
5
6
7
8
9
10
feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: " "
  order_by: -date

更多配置信息，可以在这里查看 hexo-generator-feed

配置完成之后，重新部署，在你的网站域名后添加 /atom.xml 即可查看。

1
https://emoryhuang.cn/atom.xml

Minifier

看名字就知道，很简单的一个插件，可以压缩 HTML, CSS, JS and Image，配置也很简单。

  1. 安装 hexo-all-minifier
1
npm install hexo-all-minifier --save
  1. 在 config.yml 文件中添加如下配置：

添加看板娘

向你的 Hexo 里放上一只二次元看板娘，项目地址

演示：https://l2dwidget.js.org/dev.html

模型预览：https://huaji8.top/post/live2d-plugin-2.0/

安装

在 Git Bash 中安装模块：

1
npm install --save hexo-helper-live2d

or

1
yarn add hexo-helper-live2d

配置

向 Hexo 的 _config.yml 文件添加配置，例子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-wanko  ## 更换为你的模型
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

点这里 可以查看现有的模型

在 Git Bash 中安装喜欢的模型

将包名输入位于 _config.yml 的 model.use 中。

更换 Markdown 渲染器

在写博客时，往往会涉及到一些数学公式，当你需要使用 LaTeX 语法时，由于 Hexo 默认的 Markdown 渲染器(hexo-renderer-marked)不支持复杂公式，导致渲染失败，这时候就需要更换 Markdown 渲染器。

在更换 Markdown 渲染器时，需要卸载原先的 Markdown 渲染器

1
npm uninstall hexo-renderer-marked --save

在 Fluid 主题中，官网给出了推荐的 Markdown 渲染器，你可以 点击这里查看详细信息

不可同时安装多个渲染器，如果更换公式引擎，对应渲染器也要一并更换。

说多了都是泪 😭

下面介绍几种常见的 Markdown 渲染器，你可以在 Hexo 插件 中找到它们。本文使用的渲染器为：@upupming/hexo-renderer-markdown-it-plus，配合 VSCode + Markdown All in One 食用效果良好。

你也可以在 这里 查看更多版本。

  1. hexo-renderer-marked

Hexo 默认的 Markdown 的渲染器，不支持 Mathjax，不支持插件扩展，不支持 emoji 表情

  1. hexo-renderer-kramed

基于 hexo-renderer-marked，支持 Mathjax，不支持插件的扩展，不支持 emoji 表情

  1. hexo-renderer-markdown-it

渲染速度比 hexo-renderer-marked 快，支持脚注（上标，下标，下划线），支持 emoji 表情，支持 LaTeX，扩展需要另外通过 npm 安装，你可以在 这里 找到更多拓展。

  1. hexo-renderer-markdown-it-plus

在 hexo-renderer-markdown-it 的基础上默认自带许多插件，可以直接使用

总结

插件虽好，但过犹不及，找到适合自己的才是最重要的，不要看着好用就一股脑全装上去了，食之无味，弃之可惜，最后越来越臃肿。

参考