Fuwari 博客模板综合食用指南

封面图片来源: Source

该博客模板基于 Astro 构建。本指南未提及的内容，您或许可以在 Astro 官方文档中找到答案。

文章元数据 (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 或其他平台复制嵌入代码，并将其粘贴到 Markdown 文件中即可。

YouTube#

Bilibili#

扩展功能#

GitHub 仓库卡片#

您可以添加动态的 GitHub 仓库卡片，页面加载时会从 GitHub API 拉取仓库信息。

Fabrizz

MMM-OnSpotify

Waiting for api.github.com...

00K

Waiting...

使用 ::github{repo="<owner>/<repo>"} 代码来创建一个 GitHub 仓库卡片。

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

提示框 (Admonitions)#

支持以下几种类型的提示框：note tip important warning caution

NOTE
用于突出那些即使用户只是扫读也应该注意到的信息。

TIP
提供可选信息，帮助用户更成功地完成任务。

IMPORTANT
对用户成功至关重要的信息。

WARNING
因潜在风险而需要用户立即关注的关键内容。

CAUTION
指出某个行为可能带来的负面后果。

自定义标题#

提示框的标题可以自定义。

我的自定义标题
这是一个带有自定义标题的提示框。

1
:::note[我的自定义标题]
2
这是一个带有自定义标题的提示框。
3
:::

GitHub 风格语法#

同样支持 GitHub 风格的提示框语法。

TIP
GitHub 语法也是被支持的。

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

隐藏内容 (Spoiler)#

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

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

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

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

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

语法高亮#

常规语法高亮

1
console.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 属性可以折叠指定的代码行。


5 collapsed lines
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 行')

更改起始行号

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

脚注文本放在这里。 ↩

文章元数据 (Front-matter)#

草稿示例#

文章存放位置#

基础 Markdown 语法#

标题#

文本格式#

列表#

其他#

嵌入视频#

YouTube#

Bilibili#

扩展功能#

GitHub 仓库卡片#

提示框 (Admonitions)#

自定义标题#

GitHub 风格语法#

隐藏内容 (Spoiler)#

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

语法高亮#

编辑器与终端窗口边框#

文本与行标记#

自动换行#

可折叠区域#

行号#

Footnotes#