1243 字
60 行
8 分钟
为博客添加第一篇文章

创建文章#

你可以使用 Fuwari 的内置脚本或者手动创建文章。

使用内置脚本#

在终端中执行以下命令,将 <filename> 替换为你想要的文件名(不要包含空格):

Terminal window
pnpm new-post <filename>

脚本执行后,会在 src/content/posts/ 目录下生成一个对应的 .md(Markdown)文件,并自动生成文章的 frontmatter(见下文)模板。你可以直接用 VSCode 打开它进行内容编辑。

手动创建#

你也可以完全手动地创建文章文件。

  • 创建文件:在 src/content/posts/ 文件夹中的任意位置新建一个 .md 或 .mdx 文件。
    • 强烈建议在该目录下创建子目录来更好地整理文章和相关资源。
    • 文件所在的目录及名称会直接对应文章的网址。
  • 编写内容:在新文件中,你需要先在文章开头手动填写文章的 frontmatter(见下文),然后再写正文。

文章 Frontmatter#

每篇文章的开头都必须按格式填写 frontmatter。Fuwari 会自动识别这部分内容,并转化为对应的帖子信息。

---
title: My First Blog Post # 文章的标题
published: 2026-07-31 # 帖子的发布日期
updated: 2026-08-01 # 帖子的更新日期
description: This is the first post of my new Astro blog. # (可选)对文章的简单描述,会显示在首页上。不写该属性则默认使用文章的第一句话
image: ./cover.jpg # (可选)文章的封面图片路径
# 1. 以 http:// 或 https:// 开头:使用网络图片
# 2. 以 / 开头:用于 public 目录中的图片
# 3. 无前缀:相对于本 Markdown 文件
tags: [Foo, Bar] # (可选)文章的标签
category: Front-end # (可选)文章的分类,留空则归为“未分类”
draft: false # (可选)文章是否为草稿。默认为 false,改为 true 则会在本地开发时可见、正式构建后不可见
lang: jp # (可选)仅当文章语言与 config.ts 中的网站语言不同时需要设置
---

简单 Markdown 语法#

Fuwari 的文章默认使用 Markdown 语法。你可以把下面的演示代码复制到文章中,在网页上查看对应的效果。

demo.md
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
*斜体*,_斜体_,**粗体**,__粗体__,`等宽字体`,~~删除线~~,<u>下划线</u>
- 列表 1
- 子列表 a
- 子列表 b
- 列表 2
1. 编号 1
2. 编号 2
> 这是引用块
>
> 可持续多行
>
>> 可进行嵌套
```python title="test.py"
print("这是代码块")
```
| 表头 | 自动 | 加粗 |
| --- | --- | --- |
| 这是 | 一个 | 表格 |
| 这是 | 一个 | 表格 |
这是一个指向[网站](https://prerice.novic.cc)的链接,以及一个指向[当前文档中章节标题](#二级标题)的链接。
插入图片:
![替代文本](图片URL "悬停标题")
这是分隔线:
---
反斜杠可以用于 \`转\` \*义\*

这里没有介绍的 Markdown 语法还有很多,可以自行了解。

Markdown 扩展功能#

Fuwari 还支持 Markdown 的一些扩展功能。

视频嵌入#

主流视频平台的分享按钮中一般都能直接复制嵌入代码,粘贴到文章中即可,并按需修改 width、height 等属性。

<iframe width="100%" height="450" src="//player.bilibili.com/player.html?isOutside=true&aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&p=1" title="示例视频" allowfullscreen></iframe>

GitHub 仓库卡片#

你可以使用 ::github{repo="<所有者>/<仓库>"} 添加动态卡片来链接 GitHub 仓库。页面加载时,卡片会自动从 GitHub API 拉取仓库信息。

saicaca
/
fuwari
Waiting for api.github.com...
00K
0K
0K
Waiting...

提示块#

支持以下五种类型的提示块:note(注意)、tip(提示)、important(重要)、warning(警告)、caution(小心)。

以 note 为例:

:::note[自定义标题]
这是一个 note 提示块
:::
自定义标题

这是一个 note 提示块

Fuwari 同样支持 GitHub 语法。

> [!TIP]
> GitHub 语法同样支持。
TIP

GitHub 语法同样支持。

剧透(Spoiler)#

你可以在文本中添加会被隐藏的剧透内容,其中的文本同样支持 Markdown 语法。

这段内容:spoiler[被 **隐藏** 了]!

这段内容被 隐藏 了!

更多#

Expressive Code#

Expressive Code 是一个用于在网页上呈现源代码的引擎,旨在让代码示例更易于理解且视觉上更吸引人。

Fuwari 集成了对 Expressive Code 的支持。如果你希望自己博客中的代码块具备更丰富的视觉效果,可以学习并使用它。Fuwari 的默认帖子中也有一篇相关的示例文章。

MDX#

Fuwari 除了支持 .md 格式,还支持 .mdx 格式。

MDX 可以看作是 Markdown 的超集。它在 Markdown 的基础上增加了在文档中直接使用 JSX(JavaScript XML)语法和 React 组件的能力,让文档从一个静态页面变成了一个充满可能性的动态应用。因此,.mdx 文件非常适合编写交互式技术文档、组件库使用说明、博客等需要嵌入复杂 UI 或动态内容的场景。

Typst (夹带私货)#

Typst 是一个现代化的 开源 排版系统,使用 Rust 语言编写,旨在为科学写作提供一种更快速、更简单、更强大的排版解决方案。你可以将其理解为 LaTeX 的强大替代品,同时拥有比 Markdown 更强大的排版能力。

Typst 具有语法简洁、学习成本低、源代码可读性高、编译速度极快、可即时预览等诸多优点。不过作为一个诞生仅几年的新兴工具,Typst 在成熟度、稳定性和生态上还存在一定的不足。

Markdown 的数学公式普遍采用 LaTeX 的语法格式。如果你像我一样有大量公式编辑和排版的需求,同时不喜欢 LaTeX 的繁杂和臃肿,那么——加入 Typst 吧!感受了 Typst 的舒适后,我真的再也不想用 LaTeX 哪怕一次了。

虽然 Fuwari 并不原生支持 Typst,但社区维护的 astro-typst 集成已经实现了在 Astro 项目中直接渲染 Typst 文档。同时,Typst 本身也在完善 HTML 导出的实验性支持,未来很可能会有更原生、更简单的集成方式出现。

对于这类个性化的需求,下一步便是改造这个网站!