文章的 Front-matter#

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

将文章文件放在哪里#

你的文章文件应该放在 src/content/posts/ 目录中。你也可以创建子目录，以便更好地组织你的文章和资源。

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

脚注#

你可以在正文需要标注的地方加上 [^数字或文本]，然后在文章的任意位置（通常是末尾）对这个标记进行解释定义。解析器会自动把脚注定义归拢到页面的最底部，并生成双向跳转的链接。

这是一个测试脚注的句子¹。你还可以添加第二个脚注²。

1
这是一个测试脚注的句子[^1]。你还可以添加第二个脚注[^2]。
2

3
[^1]: 这里是第一个脚注的补充说明文本。
4
[^2]: 脚注里也支持使用 [超链接](https://github.com/saicaca/fuwari) 等其他 Markdown 格式。

GitHub 仓库卡片#

你可以添加链接到 GitHub 仓库的动态卡片。在页面加载时，该仓库的信息会直接从 GitHub API 获取并展示。

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

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

提示块#

Fuwari 支持以下类型的提示块：note（笔记）、tip（提示）、important（重要）、warning（警告）、caution（注意）。

NOTE

强调用户即使在快速略读时也应注意的信息。

TIP

帮助用户更好完成任务或操作的可选建议。

IMPORTANT

用户成功完成操作所必不可少的关键信息。

WARNING

由于存在潜在风险，需要用户立即引起重视的关键内容。

CAUTION

执行某项操作可能带来的负面后果。

1
:::note
2
强调用户即使在快速略读时也应注意的信息。
3
:::
4

5
:::tip
6
帮助用户更好完成任务或操作的可选建议。
7
:::

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

1
> [!NOTE]
2
> 同样支持 GitHub 语法写法的提示块。
3

4
> [!TIP]
5
> 同样支持 GitHub 语法写法的提示块。

1
这段内容 :spoiler[被隐藏起来了 **哎呀**]！

语法高亮#

语法高亮官方文档

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

1
ANSI 颜色：
2
- 常规: Red Green Yellow Blue Magenta Cyan
3
- 加粗: Red Green Yellow Blue Magenta Cyan
4
- 变暗: Red Green Yellow Blue Magenta Cyan
5

6
256 色 (展示 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
完整 RGB 颜色:
12
森林绿 - RGB(34, 139, 34)
13

14
文本格式: 加粗 变暗 斜体 下划线

编辑器与终端外框#

编辑器与终端外框官方文档

1
console.log('标题属性示例')

1
<div>文件名注释示例</div>

1
echo "这个终端外框没有标题"

1
Write-Output "这一个有标题！"

1
echo "看啊，没有外框了！"

1
# 如果不覆盖外框类型，这原本会是一个终端外框
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本与行标记#

文本与行标记官方文档

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

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

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

YouTube#

【Official MV】ray 超かぐや姫！Version

Bilibili#

【魔裁&橘远/填词MAD】妄想感伤代偿联盟（填词cover）「2026魔裁新春会单品」