Fuwari使用教程 - st1vdy's blog

一、文章 Front-matter 字段#

每篇文章的开头需要包含 YAML front-matter，用于配置文章的元信息：

1
---
2
title: 我的第一篇博客
3
published: 2024-01-01
4
description: 这是文章的简短描述，会显示在首页卡片上。
5
image: ./cover.jpg
6
tags: [标签1, 标签2]
7
category: 分类名
8
draft: false
9
---

字段	说明
`title`	文章标题
`published`	发布日期
`description`	文章简介，显示在首页卡片
`image`	封面图路径。以 `http://` 或 `https://` 开头则使用网络图片；以 `/` 开头则相对于 `public/` 目录；否则相对于当前 Markdown 文件
`tags`	标签列表
`category`	分类
`draft`	是否为草稿。设为 `true` 时文章不会对外展示

二、文章文件组织#

所有文章放在 src/content/posts/ 目录下，支持两种形式：

1
src/content/posts/
2
├── single-file-post.md       # 单文件形式
3
└── post-with-assets/         # 目录形式（推荐，方便管理图片等资源）
4
    ├── cover.png
5
    └── index.md

三、草稿#

将 front-matter 中的 draft 设为 true，文章就不会公开显示：

1
---
2
title: 还没写完的文章
3
draft: true
4
---

写完后改为 draft: false 即可发布。

四、标准 Markdown 语法#

基础格式#

1
_斜体_、**粗体**、`行内代码`
2

3
> 引用块
4

5
---  （水平分割线）

列表#

1
- 无序列表项1
2
- 无序列表项2
3

4
1. 有序列表项1
5
2. 有序列表项2

链接与图片#

1
[链接文字](https://example.com)
2

3
![图片描述](./image.png)

表格#

1
| 列1 | 列2 | 列3 |
2
|-----|-----|-----|
3
| A   | B   | C   |

数学公式#

行内公式用单个 $，块级公式用 $$：

1
行内公式：$\omega = d\phi / dt$
2

3
块级公式：
4
$$
5
I = \int \rho R^{2} dV
6
$$

脚注#

1
这里有一个脚注[^1]。
2

3
[^1]: 脚注内容写在这里。

五、扩展 Markdown 功能#

GitHub 仓库卡片#

自动从 GitHub API 拉取仓库信息并显示为卡片：

1
::github{repo="owner/repo-name"}

提示块（Admonitions）#

支持五种类型：note、tip、important、warning、caution

1
:::note
2
这是一条注意事项。
3
:::
4

5
:::tip
6
这是一条小技巧。
7
:::
8

9
:::important
10
这是重要信息。
11
:::
12

13
:::warning
14
这是警告信息。
15
:::
16

17
:::caution
18
这是危险提示。
19
:::

效果预览：

NOTE
这是一条注意事项。

TIP
这是一条小技巧。

WARNING
这是警告信息。

自定义标题#

1
:::note[自定义标题]
2
内容...
3
:::

GitHub 风格语法#

1
> [!NOTE]
2
> 也支持 GitHub 风格的提示块语法。
3

4
> [!TIP]
5
> 同样支持。

剧透遮罩#

1
内容 :spoiler[被隐藏的文字] 继续。

效果：内容被隐藏的文字继续。

六、代码块增强（Expressive Code）#

语法高亮#

直接在代码块后加语言名即可：

1
console.log('Hello World')

显示文件名#

通过 title 属性显示文件名：

1
console.log('带文件名的代码块')

终端样式#

bash、sh、powershell 等语言会自动渲染为终端样式：

1
echo "这是终端样式的代码块"

1
Write-Output "这是带标题的 PowerShell 终端"

行高亮标记#

用 {行号} 语法高亮指定行：

1
// 第1行高亮
2
// 第2行普通
3
// 第3行普通
4
// 第4行高亮

新增/删除标记#

用 ins 和 del 标记新增/删除行：

1
function demo() {
2
  console.log('这行被标记为删除')
3
  // 这行被标记为新增
4
  console.log('这也是新增行')
5
  return true
6
}

diff 语法#

1
```diff lang="js"
2
  function demo() {
3
-   console.log('旧代码')
4
+   console.log('新代码')
5
  }
6
```

效果预览：

1
function demo() {
2
  console.log('旧代码')
3
  console.log('新代码')
4
}

行内文字高亮#

用 "文字" 语法高亮行内指定内容：

1
// 高亮行内某段指定文字
2
return '这里的 指定文字 会被高亮，所有匹配都会高亮';

也可以组合 ins / del 做行内标记：

1
function demo() {
2
  console.log('inserted 和 deleted 是行内标记');
3
  return true;
4
}

折叠代码段#

用 collapse={行范围} 折叠不重要的部分：


4 collapsed lines
1
// 这些 import 会被折叠
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4
const engine = someBoilerplateEngine(evenMoreBoilerplate())
5

6
// 这部分默认展开
7
engine.doSomething(1, 2, 3)
8

9
function calcFn() {
10
  const a = 1, b = 2
3 collapsed lines
11
  // 这部分也会被折叠
12
  console.log(`结果: ${a} + ${b} = ${a + b}`)
13
  return a + b
14
}

显示行号#

1
// 显示行号
2
console.log('第2行')
3
console.log('第3行')

指定起始行号：

10
console.log('从第10行开始编号')
11
console.log('第11行')

自动换行#

加 wrap 参数后超长行会自动换行：

1
// 开启换行后，下面这行超长内容不会产生横向滚动条，而是自动折到下一行显示
2
function getLongString() {
3
  return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide'
4
}

七、嵌入视频#

直接在 Markdown 中粘贴 iframe 嵌入代码即可。

YouTube#

1
<iframe width="100%" height="468"
2
  src="https://www.youtube.com/embed/VIDEO_ID"
3
  title="YouTube video player"
4
  frameborder="0"
5
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
6
  allowfullscreen>
7
</iframe>

Bilibili#

1
<iframe width="100%" height="468"
2
  src="//player.bilibili.com/player.html?bvid=BV_ID&p=1"
3
  scrolling="no" border="0" frameborder="no"
4
  framespacing="0" allowfullscreen="true">
5
</iframe>

将 VIDEO_ID / BV_ID 替换为对应视频的 ID 即可。