Test Demo

vOiDs 收录于 Draft 和博客搭建

2024-12-30 2025-09-09 约 9400 字预计阅读 19 分钟

Summary: 本文用于测试和展示网站功能, 并作为博客功能的说明书.

Markdown 基本语法

FixIt 主题作者已经提供了一个很好的 markdown 基本语法介绍, 这里仅对个人不太熟悉和常用的进行记录. 本节内容大量来自于主题作者提供的文档.

锚点

标题锚点

标题自带锚点, 即标题的内容(空格用 - 替代, 大写用小写替代). 如点击这里可以链接到本节标题. 如果有同名标题, 则按顺序在后面添加 -1, -2等后缀, 如: #锚点, #锚点-1, #锚点-2.

注意

要想自定义标题锚点名称, 请在与标题相同的行中将自定义 ID 放在花括号中, 或者用正文锚点:

1
2
## markdown 基本语法 {#custom-id}
## markdown 基本语法 <a id="custom-id"></a>

前者会导致默认生成的锚点 (上例中即为 #markdown-基本语法) 无法使用, 取而代之为自定义的锚点名称 (上例中即为 #custon-id). 后者则是两个锚点名均可使用并且定位到相同位置. 个人推荐使用后者.

正文锚点

可以在正文中任意位置处添加锚点:

1
2
3
我想在这句话处添加一个锚点.<a id="a-means-anchor"></a>

这样我就可以[跳转](#a-means-anchor)到相应的地方.

示例

我想在这句话处添加一个锚点.

这样我就可以跳转到相应的地方.

粗体和斜体

按照个人习惯规定, 粗体使用 ** 包裹, 斜体使用 _ 包裹. 但是粗体中有斜体除外, 使用 __粗体*粗斜体*粗体__ 形式.¹

1
2
3
4
__粗体*粗斜体*粗体__ <!-- 正确渲染 -->
**粗体_粗斜体_粗体** <!-- 错误渲染 -->
_斜体**粗斜体**斜体_ <!-- 正确渲染 -->
*斜体__粗斜体__斜体* <!-- 错误渲染 -->

示例

粗体粗斜体粗体
粗体_粗斜体_粗体
斜体粗斜体斜体
斜体__粗斜体__斜体

全体对比: 正常|加粗|斜体|粗斜体|斜体包含粗体斜体|粗体包含斜体粗体.

预格式化文本

如果想要保留原格式输出一些文本, 可以使用预格式化文本preformatted text.

1
2
3
4
5
6
<pre>
这是一些
    预格式化的文本.
   文本中的空格 和 换行符
        都会被保留.
</pre>

示例

这是一些
    预格式化的文本.
   文本中的空格 和 换行符
        都会被保留.

超链接

基本格式:

1
2
3
4
5
6
7
https://WvW-vOiDs.github.io
<https://WvW-vOiDs.github.io> <!-- 直接写链接时推荐 -->
<voidsofficial@outlook.com>
[我的主页](https://WvW-vOiDs.github.io)
[我的主页](https://WvW-vOiDs.github.io "跳转到 Github")
[我的主页][MyHomePage]
[MyHomePage]: https://WvW-vOiDs.github.io "跳转到 Github" <!-- 这个可以放在文章的任何地方 -->

示例

https://WvW-vOiDs.github.io
https://WvW-vOiDs.github.io
voidsofficial@outlook.com
我的主页
 我的主页
 我的主页

Markdown 扩展语法

本节内容为 FixIt 主题定制版语法. 与上节相同, 本节内容基本全部来自于 FixIt 官方介绍文档.

Callout

Callout 是特殊的用于强调关键信息的引用块. FixIt 中基本兼容 obsidian 中的 callouts 用法.

FixIt 有两种类型的 Callouts:

基本 Callout

如果给这些基本 Callout 加 title, 或者选择是否折叠, 则会变成扩展版.

1
2
3
4
5
6
7
8
9
> [!note]

> [!tip]

> [!important]

> [!warning]

> [!caution]

示例

注意

Lorem ipsum dolor sit amet
WvW-Note: 这是排版中常用的无意义拉丁文

提示

Lorem ipsum dolor sit amet

重要

Lorem ipsum dolor sit amet

警告

Lorem ipsum dolor sit amet

小心

Lorem ipsum dolor sit amet

扩展 Callout

扩展 Callouts 可以optional 在类型后面加 + 和 - 来表示其默认状态.

注意

Obsidian 自定义 callout 标题的方法和 FixIt 不太一样:

1
2
3
4
5
6
7
8
9
<!-- Obsidian 允许用以下方式自定义 callout 标题: -->
> [!Everything is ok.]
<!-- 这等价于: -->
> [!note] Everything is ok.

<!-- FixIt 只能用以下方式自定义 callout 标题: -->
> [!note] Everything is ok.
> [!warning] Everything is not ok.
...

只要包含空格, 数字, 汉字或者符号(连字符, 下划线, 句号)就不能使用以下方式自定义 callout

1
> [!Everythingisok]

FixIt 支持在配置文件中自定义 callout. FixIt 主题原生支持以下类型扩展版 callouts.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
> [!note] This is Title.

> [!tip]
> alias: important, hint

> [!warning]
> aliases: caution, attention

> [!abstract]
> aliases: summary, tldr.

> [!info]

> [!todo]

> [!success]
> aliases: check, done

> [!question]
> aliases: help, faq

> [!failure]
> aliases: fail, missing

> [!danger]
> alias: error

> [!bug]

> [!example]

> [!quote]
> alias: cite

示例

This is Title.

type: note

技巧

type: tip
aliases: important, hint

警告

type: warning
aliases: caution, attention

摘要

type: abstract
aliases: summary, tldr
WvW-Note: TL;DR means: too long; didn’t read.

信息

type: info
一些不太重要的信息.

待办

type: todo

成功

type: success
aliases: check, done

问题

type: question
aliases: help, faq
WvW-Note: faq means: frequently asked questions.

失败

type: failure
aliases: fail, missing

危险

type: danger
alias: error

Bug

type: bug

示例

type: example

引用

type: quote
alias: cite

任务列表

FixIt 在 markdown 基本的待办事项表示方法上增加了许多新的状态, 所有支持的状态如下:

1
2
3
4
5
6
7
8
- [ ] 未完成
- [x] 已完成
- [/] 进行中
- [-] 已取消
- [<] 已计划
- [>] 已重新计划
- [!] 重要
- [?] 问题

示例

未完成
已完成
进行中
已取消
已计划
已重新计划
重要
问题

同 callout, FixIt 支持自定义待办事项.

删除线, 下划线, 高亮和上下标

在加粗, 斜体的基础 markdown 语法上, Hugo 定义了类似的扩展语法:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
这是~~删除线~~.
这是++下划线++.
这是==高亮==.
这是^上标^.
这是~下标~.

其他高亮颜色:
==Primary==[primary]
==Secondary==[secondary]
==Success==[success]
==Info==[info]
==Warning==[warning]
==Danger==[danger]

示例

这是~~删除线~~.
这是下划线.
这是高亮.
这是^上标^.²
这是_下标.

其他高亮颜色:
Primary Secondary Success Info Warning Danger

数学公式

~~FixIt 原本使用 KaTeX 对 LaTeX 语法提供支持. 但由于个人对宏包有较多需求, 故暂时使用了一个 破坏性的 方法强制使用 MathJax. 具体情况见:~~ [FEATURE] Add MathJax Support as an Alternative Renderer https://github.com/hugo-fixit/FixIt/issues/574

重要

在 20250630, FixIt 增加了对 MathJax 的支持. 详情见官方文档.

警告

目前若加密文章, 公式则无法渲染.

以下是具体测试:

行内公式

1
这是一个行内公式 \(a^*=x-b^*\).

这是一个行内公式 $a^*=x-b^*$.

行间公式

1
2
3
4
\begin{aligned}
\ce{CO2 + C -> 2CO}\\
\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}
\end{aligned}

$$ \begin{aligned} &\ce{CO2 + C -> 2CO}\\ &\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} \end{aligned} $$

physics 宏包

1
2
\[\mqty(1 & 2 \\ 3 & 4)\]
\[\ip{\psi}{\phi}\]

$$\mqty(1 & 2 \\ 3 & 4)$$

$$\ip{\psi}{\phi}$$

警告

< 后一定要接一个空格 (或使用 \lt 代替 < 以强制提醒自己加空格), 否则会当成 html 的标签而无法渲染.³

1
2
3
\[
    x < y, x\lt y
\]

$$ x < y, x\lt y $$

超过3个大括号的公式

根据 SonnyCalcr的博客所说:

…数学公式如果有超过了三对花括号, 那么, 其解析和转义就会出问题…

但在本文中尚未遇到, 可能是此 bug 已被修复?

1
2
3
\[
    \boldsymbol{x}_{i+1} + \boldsymbol{x}_{i+2} = \boldsymbol{x}_{i+3}
\]

$$ \boldsymbol{x}_{i+1} + \boldsymbol{x}_{i+2} = \boldsymbol{x}_{i+3} $$

字符注音或注释

FixIt 主题支持一种字符注音或者注释 Markdown 扩展语法:

1
[MMA]^(Mathematica) 是一个很好用的计算软件.

示例

MMAMathematica 是一个很好用的计算软件.

分数

FixIt 主题支持一种分数 Markdown 扩展语法:

1
2
[浅色]/[深色]
[99]/[100]

示例

^浅色/_深色
⁹⁹/₁₀₀

Font Awesome

FixIt 主题使用 Font Awesome V6 作为图标库, 可以轻松使用其中的图标:

1
2
:(fa-sharp fa-solid fa-circle-user):
:(fa-regular fa-circle-user):

示例

转义字符

在某些特殊情况下 (编写这个主题文档时 ), 你的文章内容会与 Markdown 的基本或者扩展语法冲突, 并且无法避免. 转义字符语法可以帮助你渲染出想要的内容:
1
{?X}->X

1
[link](#escape-character)

示例

[link](#escape-character)

Markdown 属性

Hugo 支持图像和块元素上的 Markdown 属性, 包括块引用、围栏代码块、标题、水平线、列表、段落和表格.

在大多数情况下, 将属性列表放置在标记元素下方. 对于标题和围栏代码块, 将属性列表放在右侧.

1
2
some Markdown content
{#id .class1 .class2 key1="value1" key2="value2"}

分割线

1
2
3
<!-- 带有 CSS 类的分割线 -->
---
{.awesome-hr}

呈现的输出如下所示:

引用

1
2
3
<!-- 带有 CSS 类的分割线 -->
> The quick brown fox jumps over the lazy dog.
{.blockquote-center}

呈现的输出如下所示:

The quick brown fox jumps over the lazy dog.

表格和列表

目前有一些限制: 对于表格, 你目前只能将其应用于完整表格; 而对于列表, 仅适用于 <ul>/<ol> 节点, 例如:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
- 水果
  - 苹果
  - 橙子
  - 香蕉
  {.text-success}
- 乳制品
  - 牛奶
  - 奶酪
  {.text-warning}
{.text-primary}

呈现的输出如下所示:

水果
- 苹果
- 橙子
- 香蕉
乳制品
- 牛奶
- 奶酪

代码块

请注意, code fences 中的属性和其他高亮处理指令必须位于开始标记之后, 例如:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- title -->
```js {title="test.js"}
console.log('hello FixIt!');
```

<!-- highlight -->
```go {hl_lines=[3,"6-8"]}
package main

import "fmt"

func main() {
    for i := 0; i < 3; i++ {
        fmt.Println("Value of i:", i)
    }
}
```

<!-- no-header -->
```js {.no-header}
function forEach(elements, handler) {
  elements = elements || [];
  for (let i = 0; i < elements.length; i++) {
    handler(elements[i]);
  }
}
```

<!-- data-open -->
```js {data-open=false}
console.log('hello FixIt!');
```

示例

title

1
console.log('hello FixIt!');

highlight

1
2
3
4
5
6
7
8
9
package main

import "fmt"

func main() {
    for i := 0; i < 3; i++ {
        fmt.Println("Value of i:", i)
    }
}

no-header

1
2
3
4
5
6
function forEach(elements, handler) {
  elements = elements || [];
  for (let i = 0; i < elements.length; i++) {
    handler(elements[i]);
  }
}

data-open

1
console.log('hello FixIt!');

代码块拓展语法

GoAT

GoATGo ASCII Tool 是 markdeep.mini.js 图像生成器的 Go 语言实现.

要使用 GoAT, 只需将 ASCII 输入放在代码块中, 并将语言设置为 goat.

示例

Trees:

1
2
3
4
5
6
7
8
9
```goat
      .               .                .               .--- 1          .-- 1     / 1
     / \              |                |           .---+            .-+         +
    /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
   +     +        |       |        |       |    ---+            ---+          +
  / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
 /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
 1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4
```

Overlaps:

1
2
3
4
5
6
7
8
9
```goat
       .-.           .-.           .-.           .-.           .-.           .-.
      |   |         |   |         |   |         |   |         |   |         |   |
   .---------.   .--+---+--.   .--+---+--.   .--|   |--.   .--+   +--.   .------|--.
  |           | |           | |   |   |   | |   |   |   | |           | |   |   |   |
   '---------'   '--+---+--'   '--+---+--'   '--|   |--'   '--+   +--'   '--|------'
      |   |         |   |         |   |         |   |         |   |         |   |
       '-'           '-'           '-'           '-'           '-'           '-'
```

Line Decorations:

1
2
3
4
5
6
7
8
9
```goat
              ________                            o        *          *   .--------------.
 *---+--.    |        |     o   o      |         ^          \        /   |  .----------.  |
     |   |    '--*   -+-    |   |      v        /            \      /    | |  <------.  | |
     |    '----->       .---(---'  --->*<---   /      .+->*<--o----'     | |          | | |
 <--'  ^  ^             |   |                 |      | |  ^    \         |  '--------'  | |
        \/        *-----'   o     |<----->|   '-----'  |__|     v         '------------'  |
        /\                                                               *---------------'
```

Line Ends:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
```goat
 o--o    *--o     /  /   *  o  o o o o   * * * *   o o o o   * * * *      o o o o   * * * *
 o--*    *--*    v  v   ^  ^   | | | |   | | | |    \ \ \ \   \ \ \ \    / / / /   / / / /
 o-->    *-->   *  o   /  /    o * v '   o * v '     o * v \   o * v \  o * v /   o * v /
 o---    *---
                               ^ ^ ^ ^   . . . .   ^ ^ ^ ^   \ \ \ \      ^ ^ ^ ^   / / / /
 |  |   *  o  \  \   *  o      | | | |   | | | |    \ \ \ \   \ \ \ \    / / / /   / / / /
 v  v   ^  ^   v  v   ^  ^     o * v '   o * v '     o * v \   o * v \  o * v /   o * v /
 *  o   |  |    *  o   \  \

 <--o   <--*   <-->   <---      ---o   ---*   --->   ----      *<--   o<--   -->o   -->*
```

Dot Grids:

1
2
3
4
5
6
7
```goat
 o o o o o  * * * * *  * * o o *    o o o      * * *      o o o     · * · · ·     · · ·
 o o o o o  * * * * *  o o o o *   o o o o    * * * *    * o * *    · * * · ·    · · · ·
 o o o o o  * * * * *  o * o o o  o o o o o  * * * * *  o o o o o   · o · · o   · · * * ·
 o o o o o  * * * * *  o * o o o   o o o o    * * * *    o * o o    · · · · o    · · * ·
 o o o o o  * * * * *  * * * * o    o o o      * * *      o * o     · · · · ·     · · *
```

Large Nodes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
```goat
 .---.       .-.        .-.       .-.                                       .-.
 | A +----->| 1 +<---->| 2 |<----+ 4 +------------------.                  | 8 |
 '---'       '-'        '+'       '-'                    |                  '-'
                         |         ^                     |                   ^
                         v         |                     v                   |
                        .-.      .-+-.        .-.      .-+-.      .-.       .+.       .---.
                       | 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D |
                        '-'      '---'        '-'      '---'      '-'       '-'       '---'
```

Small Grids:

1
2
3
4
5
6
7
8
9
```goat
      ___     ___      .---+---+---+---+---.     .---+---+---+---.  .---.   .---.
  ___/   \___/   \     |   |   |   |   |   |    / \ / \ / \ / \ /   |   +---+   |
 /   \___/   \___/     +---+---+---+---+---+   +---+---+---+---+    +---+   +---+
 \___/ b \___/   \     |   |   | b |   |   |    \ / \a/ \b/ \ / \   |   +---+   |
 / a \___/   \___/     +---+---+---+---+---+     +---+---+---+---+  +---+ b +---+
 \___/   \___/   \     |   | a |   |   |   |    / \ / \ / \ / \ /   | a +---+   |
     \___/   \___/     '---+---+---+---+---'   '---+---+---+---'    '---'   '---'
```

Big Grids:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
```goat
   .----.        .----.
  /      \      /      \            .-----+-----+-----.
 +        +----+        +----.      |     |     |     |          .-----+-----+-----+-----+
  \      /      \      /      \     |     |     |     |         /     /     /     /     /
   +----+   B    +----+        +    +-----+-----+-----+        +-----+-----+-----+-----+
  /      \      /      \      /     |     |     |     |       /     /     /     /     /
 +   A    +----+        +----+      |     |  B  |     |      +-----+-----+-----+-----+
  \      /      \      /      \     +-----+-----+-----+     /     /  A  /  B  /     /
   '----+        +----+        +    |     |     |     |    +-----+-----+-----+-----+
         \      /      \      /     |  A  |     |     |   /     /     /     /     /
          '----'        '----'      '-----+-----+-----'  '-----+-----+-----+-----+
```

Complicated:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
```goat
+-------------------+                           ^                      .---.
|    A Box          |__.--.__    __.-->         |      .-.             |   |
|                   |        '--'               v     | * |<---        |   |
+-------------------+                                  '-'             |   |
                       Round                                       *---(-. |
  .-----------------.  .-------.    .----------.         .-------.     | | |
 |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
 | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
 '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
    |            |   |    | '---.        |               '-------'       |       '-+------'
    |<---------->|   |    |      |       v                Interior                 |     ^
    '           <---'      '----'   .-----------.              ---.     .---       v     |
 .------------------.  Diag line    | .-------. +---.              \   /           .     |
 |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
 |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
 '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
 <--+---+-----'       |     /|\                                                    |  | 3 |
                      v                             not:line    'quotes'        .-'   '---'
  .-.             .---+--------.            /            A || B   *bold*       |        ^
 |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
  '-'             '---------+--'          /           Nor/is this.            ---
```

Mermaid

Mermaid 是一个基于 JavaScript 的图表工具, 它允许你使用文本和代码创建图表和可视化.

要使用 Mermaid, 只需将 Mermaid 的代码输入放在代码块中, 并将语言设置为 mermaid.

示例

Flowchart:

1
2
3
4
5
6
7
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Sequence diagram:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Gantt diagram:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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
```

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

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

Class diagram:

 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
```

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

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

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

Git graph

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
```mermaid
gitGraph
    commit
    branch hotfix
    checkout hotfix
    commit
    branch develop
    checkout develop
    commit id:"ash" tag:"abc"
    branch featureB
    checkout featureB
    commit type:HIGHLIGHT
    checkout main
    checkout hotfix
    commit type:NORMAL
    checkout develop
    commit type:REVERSE
    checkout featureB
    commit
    checkout main
    merge hotfix
    checkout featureB
    commit
    checkout develop
    branch featureA
    commit
    checkout develop
    merge hotfix
    checkout featureA
    commit
    checkout featureB
    commit
    checkout develop
    merge featureA
    branch release
    checkout release
    commit
    checkout main
    commit
    checkout release
    merge main
    checkout develop
    merge release
```

gitGraph
    commit
    branch hotfix
    checkout hotfix
    commit
    branch develop
    checkout develop
    commit id:"ash" tag:"abc"
    branch featureB
    checkout featureB
    commit type:HIGHLIGHT
    checkout main
    checkout hotfix
    commit type:NORMAL
    checkout develop
    commit type:REVERSE
    checkout featureB
    commit
    checkout main
    merge hotfix
    checkout featureB
    commit
    checkout develop
    branch featureA
    commit
    checkout develop
    merge hotfix
    checkout featureA
    commit
    checkout featureB
    commit
    checkout develop
    merge featureA
    branch release
    checkout release
    commit
    checkout main
    commit
    checkout release
    merge main
    checkout develop
    merge release

gitGraph
    commit
    branch hotfix
    checkout hotfix
    commit
    branch develop
    checkout develop
    commit id:"ash" tag:"abc"
    branch featureB
    checkout featureB
    commit type:HIGHLIGHT
    checkout main
    checkout hotfix
    commit type:NORMAL
    checkout develop
    commit type:REVERSE
    checkout featureB
    commit
    checkout main
    merge hotfix
    checkout featureB
    commit
    checkout develop
    branch featureA
    commit
    checkout develop
    merge hotfix
    checkout featureA
    commit
    checkout featureB
    commit
    checkout develop
    merge featureA
    branch release
    checkout release
    commit
    checkout main
    commit
    checkout release
    merge main
    checkout develop
    merge release

gitGraph
    commit
    branch hotfix
    checkout hotfix
    commit
    branch develop
    checkout develop
    commit id:"ash" tag:"abc"
    branch featureB
    checkout featureB
    commit type:HIGHLIGHT
    checkout main
    checkout hotfix
    commit type:NORMAL
    checkout develop
    commit type:REVERSE
    checkout featureB
    commit
    checkout main
    merge hotfix
    checkout featureB
    commit
    checkout develop
    branch featureA
    commit
    checkout develop
    merge hotfix
    checkout featureA
    commit
    checkout featureB
    commit
    checkout develop
    merge featureA
    branch release
    checkout release
    commit
    checkout main
    commit
    checkout release
    merge main
    checkout develop
    merge release

Entity Relationship Diagram(❗experimental):

1
2
3
4
5
6
```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Quadrant Chart:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

XY Chart:

1
2
3
4
5
6
7
8
```mermaid
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Pie chart diagrams:

1
2
3
4
5
6
```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

Requirement Diagram:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
```mermaid
    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req
```

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

Mindmap:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
```

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Packet Diagram:

1
2
3
4
5
6
7
8
9
```mermaid
packet-beta
title UDP Packet
0-15: "Source Port"
16-31: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"
```

packet-beta
title UDP Packet
0-15: "Source Port"
16-31: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"

packet-beta
title UDP Packet
0-15: "Source Port"
16-31: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"

packet-beta
title UDP Packet
0-15: "Source Port"
16-31: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"

Architecture Diagrams Documentation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
```

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

还有许多其他类型的图, 具体内容可查看 mermaid 官网.

Timeline

Timeline 可拆分成多个按照时间戳正序或倒序排列的事件, 时间戳和内容是必填项. 更多内容请查看 FixIt 官网.

示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
```timeline {reverse=true, animation=true}
events:
  - timestamp: 2021-12-18T16:15:22+08:00
    content: "Feat: [LoveIt](https://github.com/dillonzq/LoveIt) => [FixIt](https://github.com/hugo-fixit/FixIt)"
    type: primary
  - timestamp: 2021-12-19T19:48:23+08:00
    content: "⬆️ Chore: update 0.2.11"
  - timestamp: 2021-12-19T19:48:23+08:00
    content: "<span class=\"text-secondary\"> Developed for a long time...</span>"
    hideTimestamp: true
    type: secondary
  - timestamp: 2024-01-01T14:54:19+08:00
    content: "🔖 Chore(release): 0.3.0"
    type: success
  - timestamp: 2024-05-20T14:54:19+08:00
    content: "<span class=\"text-secondary\"> Half a year later...</span>"
    hideTimestamp: true
    type: secondary
  - timestamp: 2024-07-20T22:28:19+08:00
    content: "🎉 Feat: add timeline support for code blocks"
    type: danger
```

🎉 Feat: add timeline support for code blocks
2024-07-20T22:28:19+08:00
Half a year later…
🔖 Chore(release): 0.3.0
2024-01-01T14:54:19+08:00
⬆️ Chore: update 0.2.11
2021-12-19T19:48:23+08:00
Developed for a long time…
Feat: LoveIt => FixIt
2021-12-18T16:15:22+08:00

Shortcodes

Hugo 内置 Shortcodes

参考 FixIt 文档.

figure

1
2
3
4
5
6
7
{{< figure
  src="/images/cover.webp"
  alt="A photograph of Zion National Park"
  link="https://www.nps.gov/zion/index.htm"
  caption="Zion National Park"
  class="ma0 w-75"
>}}

建议使用 markdown 默认图片语法或 FixIt 提供的 image shortcode.

gist

Hugo 将不再内置 Gist shortcode⁴:

The gist shortcode was deprecated in version 0.143.0 and will be removed in a future release.

Instagram

1
{{< instagram CxOWiQNP2MO >}}

View this post on Instagram

QR

1
{{< qr text="https://wvw-voids.github.io" level="high"/>}}

或者

1
2
3
{{< qr level="high" scale=4 alt="QR code example">}}
Hello, this is vOiDs.
{{< /qr >}}

X

1
{{< x user="SanDiegoZoo" id="1453110110599868418" >}}

警告

目前无法渲染.

Vimeo

1
{{< vimeo 146022717 >}}

Youtube

1
{{< youtube id=0RKpf3rK57I mute=true >}} <!-- 最好默认加入 `mute=true`, 保护大家听力, 人人有责! -->

FixIt 扩展 Shortcodes

参考 FixIt 文档.

link

普通链接用 markdown 语法即可, 这个 shortcode 主要是提供了卡片式链接:

1
{{< link href="https://wvw-voids.github.io/blog" content="WvW-vOiDs 的 blog 主页" title="悬停在链接上时显示的文字" card=true card-icon="https://wvw-voids.github.io/blog/icons/favicon.svg">}}

WvW-vOiDs 的 blog 主页 https://wvw-voids.github.io/blog

也可以表示可下载资源:

1
{{< link href="images/cover.webp" content="本文的 cover. 图片来自于https://t.alcy.cc/ycy" card=true download="下载文件名">}}

本文的 cover. 图片来自于https://t.alcy.cc/ycy /blog/posts/test-demo/images/cover.webp

image

1
{{< image src="/images/cover.webp" alt="本文的 cover" caption="本文的 cover. 图片来自于<https://t.alcy.cc/ycy>" >}}

注意

也可以用 markdown 格式的图片引用, 大部分情况下足够满足需求. 如果有更多需求不如直接写 html.

mapbox

由于没有 accessToken 所以具体内容见 FixIt 文档.

music

详情见 FixIt 文档.

1
{{< music auto="https://music.163.com/#/playlist?id=644299359" >}}

警告

当前使用 music shortcode 后页面目录会卡住, 详情见 [BUG] 使用 music shortcode 后会导致目录卡死 https://github.com/hugo-fixit/FixIt/issues/577

spotify

详情见 FixIt 文档.

1
{{< spotify type="album" id="6Nws2NAPuxaHzB7MfD1lhg" >}}

bilibili

1
{{< bilibili id="BV1qM411k79Z" t=6317 >}}

douyin

1
{{< douyin 7471079764552371494 >}}

typeit

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{{< typeit tag=h5 loop=true >}}
这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*……
{{< /typeit >}}

{{< typeit code=java >}}
public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World");
    }
}
{{< /typeit >}}

{{< typeit group=paragraph >}}
**首先**, 这个段落开始
{{< /typeit >}}

{{< typeit group=paragraph >}}
**然后**, 这个段落开始
{{< /typeit >}}

script

1
2
3
{{< script >}}
console.log('Hello FixIt!');
{{< /script >}}

details

1
2
3
{{< details summary="这里可以写 _markdown_ 语法" open=true >}}
展开内容是正常 _markdown_ 格式.
{{< /details >}}

这里可以写 markdown 语法

展开内容是正常 markdown 格式.

fixit-encrypt

5Yqg502f9ed2a8d1e08d8f74f5303e9eb93637d47f82ab6f1c15871cf8dd0481a+G6YOo5YiG5Lit55qE5YWs5byP5pqC5pe2IDxzdHJvbmc+5peg5rOV5q2j56Gu5riy5p+TPC9zdHJvbmc+OiAkXG1hdGhybXtlfV57XG1hdGhybXtpfVxwaX09LTEk

raw

如果需要在引用块中使用公式, 最好用 {{< raw >}} 和 {{< /raw >}} 包裹.

使用 raw 才能正常显示

\[ E=mc^2 \]

自定义 Shortcodes

待办

插入 GeoGebra
插入 Slidev

slidev

Slidev (slide + dev, /slaɪdɪv/) 是一个为开发者设计的基于 Web 的幻灯片制作工具。它帮助您以 Markdown 的形式专注于编写幻灯片的内容，并制作出具有交互式演示功能的、高度可自定义的幻灯片。 — Slidev

1
{{< slidev src="https://sli.dev/demo/starter" aspect_ratio="16/9" >}} <!-- 默认值 必须要有引号! -->

个人 slidev 仓库的搭建参考了 Thomas Boerger, Anthony Fu, Haili Zhang 等人的项目.

Beamer

暂时没找到比较好的演示加教程, 先用随便找的一篇占位.

常用 html 代码

缩放

1
<small>这是一段缩小文本</small> vs. 普通大小 vs. <big>放大文本</big>

这是一段缩小文本 vs. 普通大小 vs. 放大文本

颜色

1
<font color=orange>橘色文本</font> vs. <font color=teal>水鸭色文本</font>

橘色文本 vs. 水鸭色文本

空格与换行

1
2
3
文本间的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多个空格, 通过 html代码`&nbsp;` 实现.

文本间的换行<br><br><br><br><br>使用`<br>`实现.

文本间的多个空格, 通过 html代码  实现.

文本间的换行

使用<br>实现.

其他细节展示

中文“引号” vs. 英文"引号"
:smile: vs. 😄
注意
如果在配置文件里设置了 enableEmoji: true 则可以通过左边的方式输入 emoji. 但无论 true or false 都不影响直接输入 unicode 版 emoji.

References

TODO

完善文章结构, 把测试内容更加完善更加有逻辑的整理完成.
在本文基础上, 整理建站过程.
- 修改字体引用文章: 1, 2, 3
- 个人隐私 blog 通过 submodule 导入到 repository 中, 并通过 .gitignore 不部署到网站上. submodule 通过本地加密更新.

粗中有斜和斜中有粗只能外面_, 里面*. ↩︎
上标已禁用, 因为有时会和文字上方标记冲突. ↩︎
Reference: Math equations with the less than sign (<) can’t render correctly ↩︎
Reference: Gist shortcode. ↩︎

Test Demo

Markdown 基本语法

锚点

标题锚点

正文锚点

粗体和斜体

预格式化文本

超链接

Markdown 扩展语法

Callout

基本 Callout

扩展 Callout

任务列表

删除线, 下划线, 高亮 和 上下标

数学公式

字符注音 或 注释

分数

Font Awesome

转义字符

Markdown 属性

分割线

引用

表格 和 列表

代码块

代码块拓展语法

GoAT

Mermaid

Timeline

Shortcodes

Hugo 内置 Shortcodes

figure

gist

Instagram

QR

X

Vimeo

Youtube

FixIt 扩展 Shortcodes

link

image

mapbox

music

spotify

bilibili

douyin

typeit

script

details

fixit-encrypt

raw

自定义 Shortcodes

slidev

常用 html 代码

缩放

颜色

空格与换行

其他细节展示

References

TODO

删除线, 下划线, 高亮和上下标

字符注音或注释

表格和列表