Markdown 主题扩展参考

快速开始

文章放在 src/content/posts/年/月/slug.md，文件开头使用 YAML frontmatter 设置文章信息。

Frontmatter 常用字段包括标题、日期、分类、标签、目录、评论和草稿状态。

---
title: 文章标题
date: 2026-08-26 10:00:00
tags: [Markdown, 示例]
categories: [教程]
toc: true
comments: true
draft: false
---

主题支持三种提示块，分别为 info、important 和 warning。

{% note info 提示 %}
补充说明
{% endnote %}

{% note important 重要 %}
关键信息
{% endnote %}

{% note warning 警告 %}
警告内容
{% endnote %}

标签页适合展示多种并列方案，也可以嵌套提示块、折叠面板、表格和其他标签页。

npm install

pnpm install

yarn install

{% tabs 包管理器安装命令 %}
{% tab npm %}
npm install
{% endtab %}
{% tab pnpm %}
pnpm install
{% endtab %}
{% endtabs %}

嵌套标签页可以在一个标签页中继续使用另一个标签页。

组件	嵌套位置	状态
折叠区	标签页内	可展开
表格	折叠区内	可滚动

printf 'nested tabs\\n'

{
  "nested": true
}

{% tabs 外层 %}
{% tab 内层内容 %}
{% tabs 内层 %}
{% tab A %}
内容 A
{% endtab %}
{% tab B %}
内容 B
{% endtab %}
{% endtabs %}
{% endtab %}
{% endtabs %}

主题为 Caddy 配置提供专用语法高亮，caddy 和 caddyfile 两种语言标记均可使用。

example.com {
  reverse_proxy localhost:3000
}

```caddyfile
example.com {
  reverse_proxy localhost:3000
}
```

主题支持使用 HTML details 和 summary 创建可展开、收起的内容区块，适合放置补充说明、较长示例或可选配置。

查看补充内容

这里是默认收起的补充内容。

<details>
<summary>查看补充内容</summary>

这里是默认收起的补充内容。

</details>

主题会为 Markdown 图片自动启用懒加载、异步解码和响应式容器。点击图片可以打开灯箱，标题会作为灯箱说明。

测试用封面图

![图片说明](/assets/images/example.webp "灯箱中的图片标题")

数学公式使用 remark-math 语法。使用 mermaid 代码块时，主题会将其转换为可交互的图表，并支持灯箱查看。

行内公式 $E = mc^2$ ：

\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}

flowchart LR A[编写 Markdown] --> B[Astro 构建] B --> C[发布]

行内公式 $E = mc^2$

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

```mermaid
flowchart LR
  A --> B
```

在 frontmatter 中填写 password 后，文章正文会在构建时加密。搜索索引和文章摘要不会泄露正文内容。

访问者会先看到密码输入框，验证成功后才能读取正文。

---
title: 需要保护的文章
password: change-this-password
---

脚注沿用 Markdown 语法，主题会将脚注标题和返回正文的链接本地化为中文。

脚注示例¹ 会在文章末尾生成“注释”区域，并提供返回正文的链接。

正文中的脚注引用[^mirages]

[^mirages]: 这是脚注内容。