Fuwari 博客模板综合食用指南

文章元数据 (Front-matter)##

每篇文章顶部的 YAML 代码块用于定义文章的元数据。

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
description: 这是我 Astro 新博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [Foo, Bar]
7
category: 前端
8
draft: false
9
---

属性 (Attribute)	描述 (Description)
title	文章的标题。
published	文章的发布日期。
updated	(可选) 文章的更新日期。
description	文章的简短描述，会显示在首页。
image	文章的封面图片路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：使用 `public` 目录下的图片 3. 无上述前缀：相对于当前 Markdown 文件的路径
tags	文章的标签。
category	文章的分类。
draft	文章是否为草稿。若为 `true`，则文章不会被公开发布和展示。

草稿示例##

如果一篇文章仍在撰写中，不希望被公开发布，可以将其 draft 字段设置为 true。

1
---
2
title: 草稿示例
3
published: 2022-07-01
4
tags: [Markdown, Blogging, Demo]
5
category: Examples
6
draft: true
7
---
8

9
# 这篇文章是一篇草稿
10

11
这篇文章目前处于草稿状态，不会被发布。

文章存放位置##

您的文章文件应放置在 src/content/posts/ 目录下。您也可以创建子目录来更好地组织您的文章和相关资源。

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

基础 Markdown 语法##

标题##

1
# H1 标题
2
## H2 标题
3
### H3 标题

文本格式##

段落之间通过一个空行分隔。

这是第二段。斜体, 粗体, 和 等宽字体。

列表##

无序列表

1
- 列表项一
2
- 列表项二
3
- 列表项三

有序列表

1
1. 第一项
2
2. 第二项
3
3. 第三项

嵌套列表

1
1. 首先，准备这些食材：
2
    - 胡萝卜
3
    - 芹菜
4
    - 扁豆
5
2. 烧开一些水。
6
3. 把所有东西倒进锅里，然后遵循
7
    这个算法：
8

9
        找到木勺
10
        揭开锅盖
11
        搅拌
12
        盖上锅盖
13
        小心地把木勺平衡在锅柄上
14
        等待10分钟
15
        返回第一步（或者完成后关火）

定义列表

1
苹果
2
: 做苹果酱的好材料。
3

4
橘子
5
: 柑橘类水果！
6

7
西红柿
8
: Tomatoe 这个词里没有 "e"。```
9

10
### 引用块
11

12
> 引用块是
13
> 这么写的。
14
>
15
> 如果需要，它们可以
16
> 跨越多个段落。
17

18
### 代码块
19

20
使用4个空格缩进或使用三个反引号 ``` 来创建代码块。

1
import time
2
# 快，数到十！
3
for i in range(10):
4
    # (但不要 *太* 快)
5
    time.sleep(0.5)
6
    print i

其他##

链接

这是一个指向某个网站的链接。

1
这是一个指向 [某个网站](http://foo.bar) 的链接。

脚注

这是一个脚注 ¹。

1
这是一个脚注 [^1]。
2

3
[^1]: 脚注文本放在这里。

水平分割线

1
---

表格

1
尺寸   材质      颜色
2
---    ---       ---
3
9      皮革      棕色
4
10     麻帆布    自然色
5
11     玻璃      透明
6

7
Table: 鞋子、尺码及其材质

数学公式

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

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

嵌入视频##

只需从 YouTube 或其他平台复制嵌入代码（embed code），然后将其粘贴到 Markdown 文件中即可。

1
---
2
title: Include Video in the Post
3
published: 2023-10-19
4
// ...
5
---
6

7
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube#

Bilibili#

扩展功能##

GitHub 存储库卡片##

worhllo2

Blog-fuwari

Waiting for api.github.com...

00K

Waiting...

使用代码创建 GitHub 存储库卡片。 ::github{repo="<owner>/<repo>"}.

1
::github{repo="saicaca/fuwari"}

警告##

支持以下类型的警告: note tip important warning caution

NOTE
突出显示用户应该考虑的信息，即使在浏览时也是如此。

TIP
帮助用户取得更大成功的可选信息。

IMPORTANT
用户成功所需的关键信息。

WARNING
由于潜在风险，需要立即用户关注的关键内容。

CAUTION
行动的负面潜在后果。

Basic Syntax##

1
:::note
2
突出显示用户应该考虑的信息，即使在浏览时也是如此。
3
:::
4

5
:::tip
6
帮助用户取得更大成功的可选信息。
7
:::

自定义标题##

警告的标题可以自定义。

我的自定义标题
这是带有自定义标题的注释。

1
:::note[我的自定义标题]
2
这是带有自定义标题的注释。
3
:::

GitHub 语法##

NOTE
GitHub语法也受支持。

1
> [!NOTE]
2
> GitHub语法也受支持。
3

4
> [!TIP]
5
> GitHub语法也受支持。

隐藏内容 (Spoiler)##

您可以在文本中添加隐藏内容，点击后才会显示。内容区域也支持 Markdown 语法。

这部分内容是隐藏的嘿嘿!

1
这部分内容 :spoiler[是隐藏的 **嘿嘿**]!

代码块高级功能 (Expressive Code)##

本模板使用 Expressive Code 来增强代码块的显示效果。

语法高亮##

常规语法高亮

1
1console.log('这段代码被语法高亮了！')

渲染 ANSI 转义序列

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

编辑器与终端窗口边框##

代码编辑器边框

1
console.log('使用 title 属性的例子')

终端窗口边框

1
echo "这个终端窗口没有标题"

文本与行标记##

标记整行与行范围

1
// 第 1 行 - 通过行号标记
2
// 第 2 行
3
// 第 3 行
4
// 第 4 行 - 通过行号标记
5
// 第 5 行
6
// 第 6 行
7
// 第 7 行 - 通过范围 "7-8" 标记
8
// 第 8 行 - 通过范围 "7-8" 标记

选择标记类型 (mark, ins, del)

1
function demo() {
2
  console.log('这行被标记为删除')
3
  // 这行和下一行被标记为插入
4
  console.log('这是第二行插入的内容')
5

6
  return '这行使用默认的中性标记类型'
7
}

使用类似 diff 的语法

1
这行将被标记为插入
2
这行将被标记为删除
3
这是一行常规文本

标记行内指定文本

1
function demo() {
2
  // 标记行内的任何指定文本
3
  return '支持对指定文本的多个匹配项进行标记';
4
}

使用正则表达式

1
console.log('单词 yes 和 yep 会被标记。')

自动换行##

为代码块配置自动换行

1
// 自动换行的例子
2
function getLongString() {
3
  return '这是一个非常非常长的字符串，除非容器特别宽，否则很可能无法在可用空间内完全显示'
4
}

可折叠区域##

通过 collapse 属性可以折叠指定的代码行。

1
// 这部分样板代码将被折叠
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// 这部分代码默认可见
8
engine.doSomething(1, 2, 3)

行号##

显示行号

1
// 这个代码块会显示行号
2
console.log('来自第 2 行的问候！')
3
console.log('我在第 3 行')

更改起始行号

1
console.log('来自第 5 行的问候！')
2
console.log('我在第 6 行')

脚注文本放在这里。 ↩

文章元数据 (Front-matter)##

草稿示例##

文章存放位置##

基础 Markdown 语法##

标题##

文本格式##

列表##

其他##

嵌入视频##

YouTube#

Bilibili#

扩展功能##

GitHub 存储库卡片##

警告##

Basic Syntax##

自定义标题##

GitHub 语法##

隐藏内容 (Spoiler)##

代码块高级功能 (Expressive Code)##

语法高亮##

编辑器与终端窗口边框##

文本与行标记##

自动换行##

可折叠区域##

行号##

Footnotes#