Hexo&Fluid主题写作指南

一、官方文档

🔗文档 | Hexo

🔗Hexo Fluid 用户手册 (fluid-dev.com)

🔗Markdown 入门教程-慕课网 (imooc.com)

二、文章元数据配置(Front-matter)

front-matter（文章前注）

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

要修改hexo new "{文章名}"时生成的默认Front-matter模板，可修改模板文件/scaffolds/post.md

表格居中方法：Markdown表格居中显示 - jianmuzi - 博客园 (cnblogs.com)

项	释义
title	文章标题
date	建立日期
updated	更新时间
sticky	设置该项时置顶，值越大越靠前
tags	标签 [Hexo, Fluid]
categories	分类 [Technical articles, Linux] [一级分类，二级分类]
index_img	博客主页的文章缩略图
banner_img	文章页顶部大图
category_bar	左侧显示同分类文章
comments	评论开关或指定评论系统
math	数学公式渲染开关
mermaid	流程图渲染开关
hide	是否隐藏，这两个设置了就不会显示在首页了
archive	是否归档
excerpt/description	文章摘要
layout	布局，文章默认post

优化文章链接格式

参考：Hexo博客进阶之文章链接—自定义永久链接 | ITsuKiの博客小站 (ltski.com)

三、多媒体嵌入

1. 视频

参考链接：MoePlayer/hexo-tag-dplayer: Embed dplayer in Hexo posts/pages (github.com)

测试视频URL：MP4视频测试URL地址，亲测有效_视频地址-CSDN博客

示例视频源：

• https://media.w3.org/2010/05/sintel/trailer.mp4
• https://pan.cngo.xyz/raw/public/trailer.mp4

使用dplayer插件嵌入视频：

{% dplayer "url=http://vjs.zencdn.net/v/oceans.mp4" "pic=" "autoplay=false"  %}

2. 图片

基本插入方式：

多图展示（3列布局）：

本站图片

引用图片 > 测试同一张图片不同源的响应

blob: https://github.com/cngoxu/hexo/blob/main/assets/img/preview.jpeg
raw: https://raw.githubusercontent.com/cngoxu/hexo/main/assets/img/preview.jpeg

四、自定义实现

通过编写hexo内置ejs模板实现

1. 卡片链接

Hexo Fluid 用户手册https://hexo.fluid-dev.com/docs/

五、高级排版功能

1. 便签

这是一个便签

这是一个HTML形式便签

2. 标签

这是一个标签

这是一个行内HTML标签

3. 折叠块

▶

折叠内容的标题

这里是折叠显示的内容，支持Markdown

4. 勾选框

勾选框示例True

勾选框示例False

5. 按钮

跳转到首页

跳转到首页

6. 引用块 blockquote

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

David LevithanWide Awake

7. 脚注

这是一句话^[1]

六、特殊功能

1. 代码块

```python
def main():
    foo()
    print("python")
```

若使用Fluid主题，可以在主题的config文件中开启代码行号显示和一键copy功能

2. LaTeX数学公式

使用Fluid主题的Latex公式需要注意公式引擎和渲染器，具体配置过程可以参考这里。
$$
F(0) = \frac{1}{T}\int_0^T f(x)dx
$$

$$
E=mc^2
$$

3. Mermaid流程图

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

注意：所有功能需要主题支持，不同主题的显示效果可能有所差异。建议在实际使用前先进行测试。

参考资料

1. 参考资料1 ↩
2. 参考资料2 ↩