Fluid 使用指北

1. Markdown 语法

开始使用 | Hexo Fluid 用户手册

本文为官方用户手册的内容截取，主要记录写作中会用到的功能。各种介绍既不全面也不完整，严谨的使用方法请以官方文档为准。

1.1 文章摘要

使用 <!-- more --> 手动指定文章摘要：

1
2
3
截取正文的开头作为摘要
<!-- more -->
剩余的正文

设置 excerpt 字段：

1
excerpt: "摘要"

1.2 文章排序

使用 sticky 字段进行文章的排序，sticky 数值越大，该文章越靠前，达到类似于置顶的效果，其他未设置的文章依然按默认排序。

1
sticky: 233

1.3 文章页顶部图

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 front-matter 中指定 banner_img 属性：

1
banner_img: /img/example.jpg

1.4 文章内容图片

内容图片语法如下：

1
![](/img/example.jpg)

1.5 脚注

脚注语法如下：

1
2
3
4
5
6
7
8
9
10
正文

引用1[^1]

引用2[^2]

## 参考

[^1]: 参考资料1
[^2]: 参考资料2

1.6 便签

便签语法如下：

1
2
3
{% note primary %}
文字 或者 markdown 均可
{% endnote %}

可选便签：

名称 颜色
primary 紫色
secondary 灰色
success 绿色
danger 红色
warning 黄色
info 蓝色
light 黑色

使用时 <div class="note note-primary"> <p><code>和</code></p> </div> 需单独一行，否则会出现问题

1.7 行内标签

行内标签语法如下：

1
{% label primary @文本 %}

可选行内标签：

名称 颜色
primary 紫色
default 灰色
success 绿色
danger 红色
warning 黄色
info 蓝色

1.8 折叠块

折叠块可以折叠代码、图片、文字等任何内容，语法如下：

1
2
3
{% fold info @title %}
折叠的内容，支持 markdown
{% endfold %}
  • info: 类似行内标签的可选参数
  • title: 折叠块标题

1.9 勾选框

勾选框语法如下：

1
{% cb text, checked?, incline?, disabled? %}
  • text: 文字内容
  • checked: 默认是否已勾选，默认 false
  • incline: 是否内联，默认 false
  • disabled: 是否可以交互，默认 false

1.10 按钮

按钮语法如下：

1
{% btn url, text, title? %}
  • url: 跳转链接
  • text: 文字内容
  • title: 可选，鼠标悬停时显示的文字

1.11 组图

组图可以将多张图片按一定布局组合显示，语法如下：

1
2
3
4
5
6
7
{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}
  • total: 图片总数量，对应中间包含的图片 url 数量
  • n1-n2-...: 可选，每行的图片数量，默认单行最多 3 张图，求和必须等于 total，否则按默认样式

2. Latex 数学公式

LaTeX
开始使用 | Hexo Fluid 用户手册

开启 Latex 配置支持并更换渲染器请参照官方用户手册，这里只做使用的介绍。

使用 math: true 字段来开启 Latex 公式支持，无公式时请使用 math: false 关闭，用来提高加载速度。

公式块语法如下：

1
2
3
$$
E=m \cdot c^2
$$

行内使用语法：

1
$ E=m \cdot c^2 $

行内使用时，需要确保公式前后必须有一个空格

3. Mermaid 流程图

Mermaid | Diagramming and charting tool
开始使用 | Hexo Fluid 用户手册

使用 mermaid: true 字段来开启 mermaid 支持，无图时请使用 mermaid: false 关闭，用来提高加载速度。

使用 Mermaid 可以通过内置的 Tag 书写：

1
2
3
4
5
6
7
8
9
10
11
{% mermaid %}
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d
{% endmermaid %}

也可以通过代码块书写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```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
```
Tutorials
#Hexo #Fluid
Fluid 使用指北
https://flowerdown.org/posts/20250401-203748
作者
Unrealfeathers
发布于
2025年4月1日
许可协议