第一篇测试文章

这是我在 Firefly 博客中添加的第一篇测试文章。

这篇文章的目的不是正式发布内容，而是用来熟悉一篇文章在项目里应该怎么组织、Markdown 能写出什么效果、以及写完以后怎么看。

文件位置#

根据 puya.md 的 Posts 结构，学习笔记放在 study/ 目录下：

1
src/content/posts/study/test.md

每个分类自带 images/ 子目录存放图片，图片路径统一用 ./images/xxx 引用。

文章头部信息#

文件最上方被 --- 包起来的部分叫 frontmatter，用来描述文章的元信息。

字段	说明	示例
`title`	文章标题	`"第一篇测试文章"`
`published`	发布时间	`2026-06-23`
`description`	文章摘要，显示在首页卡片上	`"这是一篇用于学习..."`
`image`	封面图路径，空字符串则使用随机封面	`"./images/cover.avif"`
`tags`	标签列表	`["测试", "学习笔记"]`
`category`	分类，一篇只能一个	`"学习记录"`
`draft`	`true` 则不显示	`false`
`lang`	文章语言	`"zh-CN"`
`pinned`	置顶，布尔值	`true`
`password`	设置后加密文章内容	`"123456"`

正文内容#

frontmatter 下面就是标准的 Markdown 正文。以下是常用元素速查。

代码块#

带语言标识的代码块会自动语法高亮：

1
// TypeScript 示例
2
interface Post {
3
  title: string;
4
  published: Date;
5
  tags: string[];
6
  category: string;
7
  draft: boolean;
8
}
9

10
const getPosts = (posts: Post[]): Post[] => {
11
  return posts
12
    .filter(p => !p.draft)
13
    .sort((a, b) => b.published.getTime() - a.published.getTime());
14
};

1
# 终端命令
2
pnpm dev
3
pnpm build
4
pnpm new-post my-article

行内代码#

在正文中可以用反引号引用变量或命令，比如 pnpm dev 启动开发服务器，siteConfig.lang 控制站点语言。

数学公式#

行内公式：欧拉公式 $e^{i\pi} + 1 = 0$ 是数学中最美的公式。

块级公式：

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

提醒框#

小提示

写完文章后记得重启 pnpm dev，否则 frontmatter 变更可能不生效。

写文章技巧

先用 pnpm new-post <文件名> 生成模板，再填充内容，省去手动写 frontmatter。

注意

draft: true 的文章在 pnpm build 后不会出现在生产站点中，但 dev 模式下可见。

列表#

有序列表：

在 src/content/posts/study/ 下新建 .md 文件
填写 frontmatter
写正文
pnpm dev 预览效果
确认无误后 commit

无序列表：

每篇文章一个 .md 文件
图片放在同目录的 images/ 子文件夹
标签用小写中文，保持统一风格

引用#

这篇文章的本质是一份「元学习笔记」——用写文章的方式，学习怎么写文章。

分割线#

以上就是 Markdown 常用元素的速查。以后写技术文章时，可以在这里练习排版、记录踩坑、做知识复盘。

音乐

文件位置#

文章头部信息#

正文内容#

代码块#

行内代码#

数学公式#

提醒框#

列表#

引用#

分割线#

文章分享

音乐

文章目录