风绘笔记

一个小破站的进化史

Sun, 12 Jul 2026 00:00:00 GMT

从 2024 年 11 月到现在，我的个人博客一路折腾过来，换过的主题比写过的文章还多。记录一下这个站点的进化旅程，也算是给自己留个存档。

1.0 Gmeek：一切开始的地方（2024.11）#

刷 B 站的时候刷到一个视频——「仅需一个 GitHub 账号，让文字在互联网中永生」超轻量级个人博客框架 Gmeek。被这句话戳中了，感觉部署也很简单，顺手就搭了起来。那时候还没想清楚要写什么，但「让文字在互联网中永生」这个画面感，确实是我入坑的原点。

2.0 WordPress：第一次认真折腾（2025.04）#

在某个 Minecraft 服务端 Leaves 的群里，一个群友聊到 iVampireSP 那有个公益 WordPress 主机，一个月五块钱。那时候正好想要部署 WP博客主题和 MC 服务器网站，顺手就租了。装过 Argon、Sakurairo，也试过官方主题，折腾得起劲。Argon 那会儿还捣鼓过主题的 JSON 配置，改这改那的。

官网应该没多少人看——朋友捧场也好，路过的也好，其实心里清楚，这阶段更多是在享受「我有一个网站了」这件事本身。

3.0 遇见 Astro：Fuwari 打开了新世界（2025.05-06）#

也是机缘巧合，了解到一个 Astro 框架的静态博客模板——Fuwari。第一眼就被那种流畅、干净、轻快的风格吸引了，而且那会儿它在社区挺火的。

Fuwari 最打动我的地方是「干净」。它没有把一堆功能塞给你，而是提供了一个足够优雅的基底，让你可以按需添加。这种「少即是多」的设计哲学，在整个 Astro 主题生态里都算难得的。

性能上，Fuwari 默认就是 SSG（静态站点生成），所有页面在构建时就已经生成好 HTML，访问时直接丢给浏览器，几乎没有服务端处理时间。配合 Astro 自带的 岛屿架构——只有需要交互的部分才会加载 JavaScript，其余全是纯静态——首屏加载极快。

我开始在 Fuwari 上东拼西凑，四处找别人博客的页面教程代码加上去，同时在这个过程中了解到了 Giscus 和 Twikoo 这两个评论系统。但加的东西一多，性能就开始往下掉——加载变慢、编译也变慢。那时候还不懂优化，觉得「功能越多越好」。

后来回头看，这其实不是 Fuwari 的问题，是我的问题——功能堆叠的代价，最终都会体现在性能上。Fuwari 本身很轻，但经不住我什么都想塞进去还不做优化。

4.0 Mizuki：第一次战略性放弃（2025.08）#

高一快开学了，终于买了台电脑——在此之前，所有编辑都是拿手机硬肝的（

通过 B 站的宣传视频发现了 Mizuki——同样是 Fuwari 系的主题，但把我需要的一些常用功能整合到了一起并做了优化。省心很多。

但人就是这样，用着省心的，心里又痒痒想自己折腾。我试图用原版 Fuwari 自己搓一个主题出来，断断续续搞了两三天，最终还是屈服了，老老实实用回 Mizuki。

也就是那段时间，给 Mizuki 绑了第一个备案域名——fhowo.top，7 月 21 日提交、8 月 8 日通过的。

之后的日子里没怎么大改，就是时不时逛逛 Astro 官方收录的主题，看看有什么新鲜的。

5.0 Firefly：功能党的胜利（2026.04-05）#

今年四月了解到 Firefly，还是 Fuwari 系列。相比 Mizuki，Firefly 的一些页面更符合我的口味，优化也不错。决定重新买个域名——huidev.com，第二天提交备案申请，6 月 15 日通过，连忙配好 Firefly 上线，6 月 20 日正式见人。备案折腾一次是新鲜，折腾三次就是耐力赛了。

6.0 自己写主题：一坨屎的浪漫（2026.06）#

脑子一热，决定自己写一个 Astro 博客主题。AI 帮了大忙，出了一个能用的版本——Shadcn 风格，有首页 Banner、水波纹、打字机效果、毛玻璃胶囊导航栏……一大锅大杂烩。

说实话，主页还挺像样的。banner随机封面图、水波纹和打字机效果也让我得意了一会儿。但是文章页没写好——TOC 样式怎么调都不对，文章排版看着就是不舒服。后来就再也没有写出那么像样的版本了。

这坨屎是我最满意也最不满意的作品。

7.0 NewEchoes：MMD 模型与性能的较量（2026.07.07-10）#

逛 Astro 官方收录主题的时候，筛了一遍又一遍，终于找到了 NewEchoes。Fork、修改、自己加了 WebDAV 支持、番剧计划 Bangumi 页面、友情链接……几乎每项改造都很满意。

直到我做了那个改动——把默认的 3D 模型换成了在网上找的一个 Miku MMD 模型。

模型非常棒，实时着色的效果也很惊艳，只有一个问题：卡。首页的 3D 模型实时渲染对移动端一点都不友好。我试着优化了一下加载策略——从文章页或其他页面跳转回首页时弹窗询问是否进入。但懂的人都知道，这只是扬汤止沸。

Miku MMD 模型，好看但卡

最终不得不承认，这个版本的体验配不上它的颜值喵~

8.0 Astro-Navfolio：短暂的审美出轨（弃用）#

弃用 NewEchoes 后找到了 Astro-Navfolio，风格确实好看，代码结构也很有个性——整个网站配置只有一个 TOML 文件。配置了一番感觉还不错，但代码结构对我来说实在太复杂了，而且页面过渡动画感觉比我用过的其他主题慢了一拍。

Navfolio

新鲜感一过就弃用了。

9.0 回到 Firefly：累了，不想改了#

折腾了一大圈，我回头看了一眼 Firefly，突然觉得——这个东西流畅又够用，功能也齐全，就这样吧。

从 Mizuki 到 Firefly 到 NewEchoes 再到回到 Firefly，这个循环看起来很滑稽，但只有自己知道，每一次切换背后都是对「理想的博客」的想象在变。曾经觉得越花哨越好，后来觉得越个性越好，到头来发现——稳定能写，比什么都重要。

累了，不想改了。这个站，就先这样吧。

Firefly 和 Mizuki 之所以体验好，是因为它们在 Fuwari 的基础上做了合理的功能整合与优化，而不是无脑堆料。这也是我最后回到 Firefly 的原因——它把「我想要的功能」和「性能」平衡得最好。

Fuwari 底子很好，但怎么用它，决定了它的上限和下限。我花了快两年才明白：不是功能越多越好，而是够用且流畅，才值得长期相处。

写在最后#

从 Gmeek 到 WordPress，从 Fuwari 到 Mizuki、Firefly，再到 NewEchoes、Navfolio……折腾了这么一大圈，真正发出去的文章其实没几篇，甚至还有 MD 文件丢了的惨案。

但这条路走过来是值得的。每一次换主题、每一次踩坑、每一次写代码写到凌晨然后推翻了重来，都是我在塑造这个「小破站」的过程，也是这个过程塑造了我。

回想起来，最怀念的反而不是哪个主题最好看，而是那些深夜对着主题翻文档，改配置，再报错，再改。一遍遍刷着 npm or pnpm and bun run dev 等待页面刷新，看到预期的效果出现时，那种满足感很纯粹。

也正因为折腾了这么多，我才慢慢摸清楚自己真正想要的是什么。不是最炫酷的 3D 模型，不是最花哨的交互效果，而是一个能让我安心写字、不会在打开时犹豫几秒的地方。

Firefly 可能不是终点，但至少现在是那个「对」的答案。

博客进化史讲完了。下一篇，该好好写文章了。

写于 2026 年 7 月 12 日
Codex 与 DeepSeek 进行润色，查看没问题、保持真实性发表~
最后修改日期 2026 年 7 月 13 日

一篇文章从研究到成文，一个内容创作 Agent 搞定

Tue, 21 Jul 2026 00:00:00 GMT

基于 EdgeOne Makers 模板二次开发，增加了创作管线相关的 Agent 和存储逻辑。不是成品 SaaS，是一个可以自己部署的模板。

GitHub 地址 · 演示地址：内容创作Agent

它是什么？#

简单来说，这是一个把”想一个主题 → 联网调研 → 生成大纲 → 写完整篇文章 → SEO 分析”这条链路串起来的 Agent 工具。

它不是让你点点点就能出爆文的平台，而是一个你可以按需改、自己部署、自己掌控的创作管线。

说”开源”其实有点心虚——这个项目最早 fork 自 TencentEdgeOne 的 Makers 模板，我在上面加了创作相关的 Agent、版本管理、记忆存储这些东西。算是站在肩膀上改了改。

为什么要做这个？#

写文章的时候经常遇到这些情况：

想查点背景资料，得打开好几个标签页来回切
大纲写到一半发现结构不对，又要从头理
文章写完了，SEO 分析再开另一个工具做一遍

这些事单拎出来都不难，但串在一起就很割裂。内容创作 Agent 做的就是把这些步骤编排到一条流水线上，让 Agent 一台接一台地干活。

有哪些能力？#

能力	说明
联网研究	每次请求做一次搜索，拿到写作背景材料。支持 WSA 和 Kimi 两种搜索提供商
结构化大纲	先出大纲再动笔，避免写到一半跑偏
流式写作	一次流式输出完整文章，能遵循字数和风格要求
SEO 优化与关键词	有独立的优化和建议端点，写完再调
持久记忆	跨会话记住你的偏好（风格、语气、常用长度）
版本管理	每篇文章保存版本记录，支持对比检索
GitHub 登录	不同用户的数据自动隔离

怎么用？#

部署到 EdgeOne Makers 上，配好环境变量就能跑：

1
AI_GATEWAY_API_KEY=你的Key
2
AI_GATEWAY_BASE_URL=https://ai-gateway.edgeone.link/v1

前端是一套 Next.js 界面，POST /create 开始创作，流式输出实时刷新。

不想用默认模型的话，改 AI_GATEWAY_MODEL 换成你喜欢的就行——兼容 OpenAI 协议的都行。

最后说两句#

这个项目说实话不算大，但它把”从零开始写一篇文章”这件事拆得挺清楚的。如果你也在折腾 AI 写作相关的东西，可以 fork 一份自己改着玩。

哦对，它原本是 TencentEdgeOne 的 Makers 模板，我只是在上面加了自己的东西——不是我一个人从零写的，不能贪功。

项目地址：github.com/HuiDevCom/content-creator-agent

Markdown 教程

Mon, 15 Jun 2026 00:00:00 GMT

这是一个展示如何编写 Markdown 文件的示例。本文档汇总了核心语法与常见扩展（GFM）。

块级元素
- 段落与换行
- 标题
- 引用
- 列表
- 代码块
- 分割线
- 表格
内联元素
- 链接
- 强调
- 行内代码
- 图片
- 删除线
杂项
- 自动链接
- 反斜杠转义
内联 HTML

块级元素#

段落与换行#

段落#

HTML 标签：<p>

使用一个或多个空行分隔段落。（仅包含空格或制表符的行也视为空行。）

代码：

1
This will be
2
inline.
3

4
This is second paragraph.

预览：

This will be inline.

This is second paragraph.

换行#

HTML 标签：<br />

在行末添加两个或更多空格来产生换行。

代码：

1
This will be not
2
inline.

预览：

This will be not
inline.

标题#

Markdown 支持两种标题样式：Setext 与 atx。

Setext#

HTML 标签：<h1>，<h2>

使用等号 (=) 表示 <h1>、使用短横线 (-) 表示 <h2>，数量不限，作为“下划线”。

代码：

1
This is an H1
2
=============
3
This is an H2
4
-------------

预览：

This is an H1#

This is an H2#

atx#

HTML 标签：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>

在行首使用 1-6 个井号 (#)，对应 <h1> 至 <h6>。

代码：

1
# This is an H1
2
## This is an H2
3
###### This is an H6

预览：

This is an H1#

This is an H2#

This is an H6#

可选：你可以在行尾“闭合” atx 标题。末尾的井号数量不必与开头一致。

代码：

1
# This is an H1 #
2
## This is an H2 ##
3
### This is an H3 ######

预览：

This is an H1#

This is an H2#

This is an H3#

引用#

HTML 标签：<blockquote>

Markdown 使用邮件风格的 > 作为引用符号。若手动换行并在每行前加 >，显示效果最佳。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4
>
5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
> id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown 允许“偷懒”：在一个硬换行段落中，只在第一行前加 > 即可。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4

5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

引用可以嵌套（引用中的引用），通过增加 > 层级实现。

代码：

1
> This is the first level of quoting.
2
>
3
> > This is nested blockquote.
4
>
5
> Back to the first level.

预览：

This is the first level of quoting.
This is nested blockquote.
Back to the first level.

引用内可包含其他 Markdown 元素，包括标题、列表与代码块。

代码：

1
> ## This is a header.
2
>
3
> 1.   This is the first list item.
4
> 2.   This is the second list item.
5
>
6
> Here's some example code:
7
>
8
>     return shell_exec("echo $input | $markdown_script");

预览：

This is a header.#

This is the first list item.

This is the second list item.

Here’s some example code:
1
return shell_exec("echo $input | $markdown_script");

列表#

Markdown 支持有序（数字）与无序（圆点）列表。

无序列表#

HTML 标签：<ul>

无序列表可使用 星号 (*)、加号 (+) 或 短横线 (-)。

代码：

1
*   Red
2
*   Green
3
*   Blue

预览：

Red
Green
Blue

等价于：

代码：

1
+   Red
2
+   Green
3
+   Blue

或者：

代码：

1
-   Red
2
-   Green
3
-   Blue

有序列表#

HTML 标签：<ol>

有序列表使用数字加英文句点：

代码：

1
1.  Bird
2
2.  McHale
3
3.  Parish

预览：

Bird
McHale
Parish

注意：像下面这样可能会“意外触发”有序列表：

代码：

1
1986. What a great season.

预览：

What a great season.

你可以用反斜杠转义 (\) 句点：

代码：

1
1986\. What a great season.

预览：

1986. What a great season.

列表中的缩进内容#

列表项里的引用#

在列表项内放置引用，需要将 > 符号整体缩进：

代码：

1
*   A list item with a blockquote:
2

3
    > This is a blockquote
4
    > inside a list item.

预览：

A list item with a blockquote:

This is a blockquote inside a list item.

列表项里的代码块#

在列表项内放置代码块，需要缩进两层——8 个空格或两个 Tab：

代码：

1
*   A list item with a code block:
2

3
        <code goes here>

预览：

A list item with a code block:
```
1
<code goes here>
```

嵌套列表#

代码：

1
* A
2
  * A1
3
  * A2
4
* B
5
* C

预览：

A
- A1
- A2
B
C

代码块#

HTML 标签：<pre>

将代码块中的每行缩进至少4 个空格或1 个制表符。

代码：

1
This is a normal paragraph:
2

3
    This is a code block.

预览：

This is a normal paragraph:

1
This is a code block.

代码块会一直持续，直到遇到未缩进的行（或文末）。

在代码块内，与号 (&) 和尖括号 (< >) 会自动转为 HTML 实体。

代码：

1
    <div class="footer">
2
        &copy; 2004 Foo Corporation
3
    </div>

预览：

1
<div class="footer">
2
    &copy; 2004 Foo Corporation
3
</div>

下文的“围栏代码块”和“语法高亮”属于扩展语法，你也可以用它们来书写代码块。

围栏代码块#

使用成对的反引号围起来（如下所示），就不需要四空格缩进了。

代码：

1
Here's an example:
2

3
```
4
function test() {
5
  console.log("notice the blank line before this function?");
6
}
7
```

预览：

Here’s an example:

1
function test() {
2
  console.log("notice the blank line before this function?");
3
}

语法高亮#

在围栏代码块后添加可选的语言标识，即可启用语法高亮（参见支持语言列表）。

代码：

1
```ruby
2
require 'redcarpet'
3
markdown = Redcarpet.new("Hello World!")
4
puts markdown.to_html
5
```

预览：

1
require 'redcarpet'
2
markdown = Redcarpet.new("Hello World!")
3
puts markdown.to_html

分割线（水平线）#

HTML 标签：<hr /> 一行中放置三个或以上的短横线 (-)、星号 (*) 或下划线 (_)。符号之间允许有空格。

代码：

1
* * *
2
***
3
*****
4
- - -
5
---------------------------------------
6
___

预览：

表格#

HTML 标签：<table>

这是扩展语法。

用竖线 (|) 分隔列，用短横线 (-) 分隔表头，使用冒号 (:) 指定对齐方式。

两侧的竖线 (|) 与对齐可选。用于表头分隔时，每列至少需要 3 个短横线。

代码：

1
| Left | Center | Right |
2
|:-----|:------:|------:|
3
|aaa   |bbb     |ccc    |
4
|ddd   |eee     |fff    |
5

6
 A | B
7
---|---
8
123|456
9

10

11
A |B
12
--|--
13
12|45

预览：

Left	Center	Right
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

内联元素#

链接#

HTML 标签：<a>

Markdown 支持两种链接样式：行内链接与引用式链接。

行内链接#

行内链接格式：[文本](URL "标题")

标题可选。

代码：

1
This is [an example](http://example.com/ "Title") inline link.
2

3
[This link](http://example.net/) has no title attribute.

预览：

This is an example inline link.

This link has no title attribute.

如果引用同一站点的本地资源，可以使用相对路径：

代码：

1
See my [About](/about/) page for details.

预览：

See my About page for details.

引用式链接#

可以预定义链接引用。定义格式：[id]: URL "标题"

标题同样可选。引用时使用：[文本][id]

代码：

1
[id]: http://example.com/  "Optional Title Here"
2
This is [an example][id] reference-style link.

预览：

This is an example reference-style link.

说明：

方括号中包含链接标识（不区分大小写，可在左侧缩进最多三格空格）；
随后是冒号；
再跟一个或多个空格（或 tab）；
然后是链接 URL；
URL 可选地用尖括号包裹；
可选地跟随标题属性，用引号或圆括号包裹。

以下三种定义等价：

代码：

1
[foo]: http://example.com/  "Optional Title Here"
2
[foo]: http://example.com/  'Optional Title Here'
3
[foo]: http://example.com/  (Optional Title Here)
4
[foo]: <http://example.com/>  "Optional Title Here"

如果使用空的方括号，则链接文本本身会作为名称。

代码：

1
[Google]: http://google.com/
2
[Google][]

预览：

Google

强调#

HTML 标签：<em>，<strong>

Markdown 使用 星号 (*) 或 下划线 (_) 表示强调。一个分隔符对应 <em>；两个分隔符对应 <strong>。

代码：

1
*single asterisks*
2

3
_single underscores_
4

5
**double asterisks**
6

7
__double underscores__

预览：

single asterisks

single underscores

double asterisks

double underscores

但如果两侧有空格，则会被视作普通字符而非强调语法。

你可以使用反斜杠进行转义：

代码：

1
\*this text is surrounded by literal asterisks\*

预览：

*this text is surrounded by literal asterisks*

行内代码#

HTML 标签：<code>

用反引号 (`) 包裹。

代码：

1
Use the `printf()` function.

预览：

Use the printf() function.

若行内代码中需要包含反引号字符，可使用多重反引号作为定界符：

代码：

1
``There is a literal backtick (`) here.``

预览：

There is a literal backtick (`) here.

行内代码两侧的定界符允许包含空格（开头一个、结尾一个），方便在代码起始或结尾放置反引号字符：

代码：

1
A single backtick in a code span: `` ` ``
2

3
A backtick-delimited string in a code span: `` `foo` ``

预览：

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

图片#

HTML 标签：<img />

Markdown 的图片语法与链接类似，支持行内与引用两种方式。

行内图片#

行内图片语法：![替代文本](URL "标题")

标题可选。

代码：

1
![Alt text](/path/to/img.jpg)
2

3
![Alt text](/path/to/img.jpg "Optional title")

预览：

Alt text

说明：

一个感叹号 !；
后接方括号，放置图片的替代文本；
再接圆括号，内含图片 URL/路径，及可选的标题（引号包裹）。

引用式图片#

引用式图片语法：![替代文本][id]

代码：

1
[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
2
![Alt text][img id]

预览：

Alt text

删除线#

HTML 标签：<del>

这是扩展语法。

GFM 增加了删除线语法。

代码：

1
~~Mistaken text.~~

预览：

Mistaken text.

杂项#

自动链接#

Markdown 支持一种便捷写法来创建“自动链接”（URL 与邮箱地址）：只需用尖括号将其包住即可。

代码：

1
<http://example.com/>
2

3
<address@example.com>

预览：

http://example.com/

address@example.com

GFM 会自动识别标准 URL 并转换为链接。

代码：

1
https://github.com/emn178/markdown

预览：

https://github.com/emn178/markdown

反斜杠转义#

Markdown 允许使用反斜杠来转义那些本用于 Markdown 语法的特殊字符，使其按字面显示。

代码：

1
\*literal asterisks\*

预览：

*literal asterisks*

以下字符可通过反斜杠转义以按字面量输出：

Code:

1
\   backslash
2
`   backtick
3
*   asterisk
4
_   underscore
5
{}  curly braces
6
[]  square brackets
7
()  parentheses
8
#   hash mark
9
+   plus sign
10
-   minus sign (hyphen)
11
.   dot
12
!   exclamation mark

内联 HTML#

对于 Markdown 语法未覆盖的标记，直接使用原生 HTML 即可。无需特别声明从 Markdown 切换到 HTML，直接写标签就行。

代码：

1
This is a regular paragraph.
2

3
<table>
4
    <tr>
5
        <td>Foo</td>
6
    </tr>
7
</table>
8

9
This is another regular paragraph.

预览：

This is a regular paragraph.

Foo

This is another regular paragraph.

请注意：在块级 HTML 标签内不会处理 Markdown 语法。

与块级标签不同，在行内级标签内会处理 Markdown 语法。

代码：

1
<span>**Work**</span>
2

3
<div>
4
    **No Work**
5
</div>

预览：

Work

**No Work**

***

MDX 格式文章示例

Mon, 15 Jun 2026 00:00:00 GMT

Tip

Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。

Markdown 和 MDX 的区别#

Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。

特性	Markdown	MDX
基础语法	支持 (CommonMark)	支持 (CommonMark)
HTML 标签	支持	支持 (作为 JSX)
组件导入	不支持	支持 (import)
动态数据	不支持	支持 (JS 表达式)
样式定制	有限 (class/style)	灵活 (className/CSS-in-JS)

使用组件#

这是一个图标组件：

1
import { Icon } from 'astro-icon/components'
2

3
<div class="flex items-center gap-2 my-4">
4
  <Icon name="fa7-solid:rocket" class="text-4xl text-red-500" />
5
  <span>火箭发射！</span>
6
</div>

火箭发射！

使用 JSX#

你也可以直接写 HTML/JSX：

1
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
2
  这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
3
</div>

这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。

简单的变量导出#

1
export const year = new Date().getFullYear()
2

3
今年是 {year} 年。

今年是 2026 年。

更多信息，请查看 MDX 文档

Firefly Wiki Link 内部链接示例

Sat, 03 Jan 1970 00:00:00 GMT

Firefly 支持在 Markdown、MDX 文章中使用 Obsidian 风格的 Wiki Link。链接目标填写文章的 slug，也就是文章相对于 src/content/posts 的文件路径，不需要包含扩展名。

文章链接卡片#

[[slug]] 单独成段时，会自动读取目标文章的标题、描述、发布时间、分类、标签和封面，渲染为链接卡片：

1
[[firefly]]
2

3
[[guide/index]]
4

5
[[markdown-extended]]
6

7
[[mdx-example]]

这是一个 MDX 格式的示例文章，展示了如何在 Markdown 中使用 JSX。

2026-06-15文章示例#MDX#Markdown#文章示例

行内链接#

[[slug]] 出现在正文中间时，渲染为普通链接，链接文字自动使用目标文章的标题

1
请参阅 [[firefly]] 了解主题特性。

请参阅 firefly 了解主题特性。

自定义显示文字#

在 | 后填写链接的显示文字。带自定义文字的链接始终渲染为普通链接，不会变成卡片，可以用来在单独一行时保持普通链接样式：

1
[[firefly|Firefly 主题介绍]]

Firefly 主题介绍

目录中的文章#

文章没有填写Frontmatter的情况下，就会默认使用目录名+文件名为slug

所以目录名称需要包含在 slug 中。以下写法会链接到 src/content/posts/guide/index.md，公开地址自动格式化为 /posts/guide/：

guide/index

1
[[guide/index]]

也可以省略末尾的 index，或显式添加 posts/ 前缀：

Firefly 简单使用指南

1
[[posts/guide|Firefly 简单使用指南]]

链接到其他文章的标题#

在文章 slug 后添加 #标题。带标题锚点的链接始终渲染为普通链接：

查看代码块语法高亮

1
[[code-examples#语法高亮|查看代码块语法高亮]]

标题锚点使用与页面标题相同的 slug 规则，因此中文、空格和大小写都会按页面实际生成的 ID 处理。

链接到本页标题#

省略文章 slug，只填写标题即可链接到当前文章：

跳转到本页目标

1
[[#本页目标|跳转到本页目标]]

本页目标#

这是本页 Wiki Link 指向的标题。

不支持附件嵌入#

附件嵌入语法目前不会被转换，会按原文显示：

![[image.png]]

行内代码和代码块中的 [[firefly]] 也不会被转换。