Markdown 内容指令示例

:::callout{type="info"}
这是一条**信息提示**，适合补充说明背景知识。
:::

:::callout{type="tip" title="小技巧"}
通过 `title` 属性自定义标题。
:::

:::callout{type="warn"}
这是一条**注意事项**，提醒读者小心的地方。
:::

:::callout{type="danger" title="危险操作"}
执行此操作前请务必备份数据。
:::

• type 可选值：info | tip | warn | danger
• title 可自定义标题，不传则使用默认值

:::note
使用博客**主题色**的轻量提示块。支持 `color` 属性。
:::

:::note{title="关于本站" color="blue"}
- `blue`：科技蓝
- `green`：自然绿
- `red`：警示红
- `yellow`：活力黄
- `purple`：优雅紫
:::

• color 可选值：blue、green、red、yellow、purple 或任意十六进制色值
• title 可设置标题

:::folding{title="查看完整配置"}
```js
import remarkDirective from 'remark-directive';
import { remarkContentDirectives } from './src/plugins/remark-content-directives.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkDirective, remarkContentDirectives]
  }
});
```
:::

:::folding{title="默认展开的折叠块" open="true"}
通过 `open="true"` 让折叠块默认展开。支持 `color` 属性自定义颜色。
:::

• title 折叠按钮上的文字
• open="true" 默认展开
• color 自定义颜色

:::folders
folder: 第一章：基础概念

Astro 是一个**内容优先**的静态站点生成器。核心特点：

1. 零 JS 默认输出
2. 群岛架构
3. 支持 React / Vue / Svelte

folder: 第二章：组件系统

Astro 组件使用 `.astro` 后缀，语法类似 HTML + JS：

```astro
---
const name = 'Astro';
---
<h1>Hello {name}</h1>
```

folder: 第三章：内容集合

使用 [Content Collections](https://docs.astro.build/zh-cn/guides/content-collections/) 管理类型安全的内容。
:::

• 每个 folder: 标题 开启一个新的折叠项
• 支持在内容中嵌套代码块、列表、链接等 Markdown 内容

:::timeline
- 2024-01 | 开始学习 Astro | 从官方文档入手，了解基本概念
- 2024-03 | 搭建个人博客 | 基于 Vergil 主题开始定制
- 2024-06 | 上线运营 | 正式部署到 GitHub Pages
- 2025-04 | 持续迭代 | 添加分类、专栏、内容指令等功能
:::

• 每条时间线以 - 开头，用 | 分隔日期、标题、描述
• 描述为可选

:::deadline{date="2026-12-31" title="年度目标截止" description="保持节奏，稳步推进"}
:::

:::deadline{date="2025-01-01" title="已过期示例" expiredText="活动已结束" description="保持节奏，稳步推进" showSeconds="false"}
:::

• date（必填）：目标日期，格式 YYYY-MM-DD 或 YYYY-MM-DD HH:mm
• title：倒计时标题
• description：描述文字
• showSeconds：是否显示秒数，默认 true
• expiredText：过期后显示的文案，默认 已截止

这是带 color 属性的标签 B。

:::poetry{title="游山西村" author="陆游"  footer="诗词节选" date="（宋）"}
莫笑农家腊酒浑，丰年留客足鸡豚。

**山重水复疑无路，柳暗花明又一村**

箫鼓追随春社近，衣冠简朴古风存。

从今若许闲乘月，拄杖无时夜叩门。

:::

• title 诗歌标题
• author 作者
• date 日期/朝代

:::reel{title="卷轴示例" author="作者" date="2026-04-20" footer="卷轴底部"}
这是卷轴的内容，文字会从右向左竖排显示。

支持多段落内容。
:::

• title：卷轴标题
• author：作者信息
• date：日期
• footer：底部文字

:::paper{title="文言文" author="诸葛亮" date="三国" footer="节选"}
出师表

<!-- paragraph -->
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。

<!-- section 后出师表 -->
先帝深虑汉、贼不两立，王业不偏安，故托臣以讨贼也。

<!-- line right -->
臣鞠躬尽瘁，死而后已。
:::

• title：纸张标题（居中）
• author / date / footer：作者、日期、底部文字
• 内容分区：
• <!-- paragraph -->：普通段落（首行缩进）
• <!-- section 标题 -->：带居中标题的章节
• <!-- line right -->：右对齐行

:::copy{label="安装"}
pnpm add remark-directive unist-util-visit
:::

:::copy{label="SSH"}
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA example@example.com
:::

• label 左侧标签文字
• 内容区域会被处理为一行纯文本，点击右侧按钮即可复制

:::grid{cols="3" gap="12"}
**快速开始**

```bash
npm create astro@latest
```

---

**核心概念**

- [群岛架构](https://docs.astro.build/)
- [内容集合](https://docs.astro.build/)
- [视图过渡](https://docs.astro.build/)

---

**部署指南**

1. 构建项目：`npm run build`
2. 选择平台：Vercel / Netlify / Cloudflare Pages
3. 一键部署
:::

• cols 列数，可选 2 | 3 | 4，不传则按最小宽度自动换行
• gap 格子间距，单位 px
• minw 自动列数时的最小列宽，默认 240px
• bg 格子背景样式：card（默认） | box | none
• 用 --- 分隔每个格子

:::quot{icon="x"}
代码是写给人看的，顺便让机器执行。
:::

• icon 可自定义图标，不传则使用默认引号图标

:::blockquote
这是使用 blockquote 标签的例子。

支持多段落内容，适合引用长段文字。
:::

• 使用 <blockquote> 标签包裹内容
• 顶部左右角自动显示引号图标

- 高亮：:mark[默认主题色高亮] 和 :mark[黄色高亮]{color="yellow"} 和 :mark[红色高亮]{color="red"}
- 下划线：:u[实线下划线] 和 :u[蓝色下划线]{color="blue"}
- 着重号：:emp[着重号下划线]（点状）
- 波浪线：:wavy[波浪下划线]
- 删除线：:del[已删除的内容]
- 上标：H:sup[2]O 和 注释:sup[1]{color="red"}
- 下标：CO:sub[2] 和 H:sub[2]O

• :mark 的 color 可选值：yellow、red、green、blue、purple 或任意色值
• :u、:sup、:sub 同样支持 color 属性

- 键盘按键：按 :kbd[Ctrl+C] 复制，按 :kbd[Ctrl+V] 粘贴，按 :kbd[⌘+K] 搜索
- 模糊遮罩：:blur[点击可以查看隐藏内容]（点击揭示）
- 密码遮罩：密码是 :psw[MySecretPassword123]（点击显示）

• :blur 点击后移除模糊效果
• :psw 点击后显示明文

- 自动轮询颜色：:hashtag[Astro]{href="/tags/astro"} :hashtag[博客]{href="/tags/blog"} :hashtag[教程]{href="/tags/tutorial"} :hashtag[前端]{href="/tags/frontend"} :hashtag[CSS]{href="/tags/css"}
- 自定义颜色：:hashtag[指定蓝色]{href="/tags/blue" color="blue"} :hashtag[指定红色]{href="/tags/red" color="red"}

• :hashtag 默认自动轮询 7 种颜色（红、橙、黄、绿、青、蓝、紫），无需指定 color
• :hashtag 的 href 为跳转链接，color 可手动自定义颜色
• :hashtag 左侧会自动显示 # 图标

- 普通按钮：:button[查看文档]{href="/" color="accent"} :button[GitHub]{href="/" color="blue"}
- 带图标的按钮：:button[搜索]{href="/search" color="green" icon="lucide:search"}
- 小尺寸按钮：:button[标签]{href="/tags" color="purple" size="xs"}
- 图标按钮组：:button[文档]{href="/docs" color="cyan" icon="lucide:book-open"} :button[源码]{href="/github" color="cyan" icon="lucide:code-2"} :button[示例]{href="/demo" color="cyan" icon="lucide:trophy"}

• :button 的 href 为跳转链接，color 可自定义颜色
• :button 支持 icon 属性，可传入 Iconify 图标名（如 lucide:search）或图片 URL
• :button 支持 size="xs" 小尺寸模式

::image{src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80" alt="风景照片"}

::image{src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80" alt="带下载按钮" download="true"}

::image{src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=800&q=80" alt="正方形裁剪" ratio="1/1" width="300px"}

• src（必填）：图片地址
• alt：图片描述，会显示在图片下方作为 caption
• width / height：设置图片尺寸
• bg：背景颜色
• padding：内边距
• ratio：固定宽高比
• download：true 或自定义下载链接
• fancybox：false 可禁用点击放大

:::gallery{layout="grid" size="m" ratio="square"}
![山景1](https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400&q=80)
![山景2](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&q=80)
![森林](https://images.unsplash.com/photo-1448375240586-882707db888b?w=400&q=80)
![湖泊](https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=400&q=80)
:::

• layout：grid（网格，默认）或 flow（瀑布流）
• size：xs | s | m | l | xl | mix
• ratio：square | portrait | origin（保持原始比例）

:::banner{title="Vergil 主题" subtitle="Astro 驱动的个人博客主题" bg="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80"}
:::

• title（必填）：主标题
• subtitle：副标题
• bg：背景图片地址
• avatar：头像图片地址
• link：点击跳转链接

:::panel
```js title="JavaScript" right="ES2024"
const user = await fetch('/api/user').then(r => r.json())
```

```ts title="TypeScript" right="v5.7"
const user = await fetch<User>('/api/user').then(r => r.json())
```
:::

• title -> 左侧标签（场景/功能描述）
• right -> 右侧说明（语言、版本、文件名等任意文本）

:::panel
```js title="前端调用" right="React"
fetch('/api/user').then(r => r.json())
```

```go title="后端实现" right="Go 1.23"
func GetUser(w http.ResponseWriter, r *http.Request) { ... }
```
:::

:::panel
```http title="请求" right="HTTP/1.1"
GET /api/posts?page=1&limit=10
```

```json title="响应" right="JSON"
{ "data": [...], "total": 42 }
```
:::

:::panel
```yaml title="开发环境" right="dev.yaml"
database: localhost:5432
```

```yaml title="生产环境" right="prod.yaml"
database: prod.db.internal:5432
```
:::

:::panel

<!-- label: 快速上手 | 1 分钟 -->
创建项目只需一行命令：

```bash
npx create-my-app
```

<!-- label: 详细步骤 | 5 分钟 -->
1. 确保 Node.js >= 18
2. 运行 `npx create-my-app`

:::

• <!-- label: 左边 | 右边 --> 用 | 分隔左右标签
• 若不需要右边标签，可省略 | 及之后内容

:::panel

<!-- label: 用户视角 | 痛点 -->
界面突然卡住，刷新后数据全没了。

<!-- label: 开发者视角 | 根因 -->
前端在 `onMount` 时未做 Loading 态处理。

:::

:::panel

<!-- label: 支持 TypeScript | 优势 -->
TypeScript 的严格类型让大型项目维护成本大幅降低。

<!-- label: 反对 TypeScript | 劣势 -->
小项目引入 TS 的 overhead 过高。

:::

:::panel

<!-- label: 2023 | Webpack 时代 -->
当时使用 Webpack 5，构建一次要 30 秒。

<!-- label: 2025 | Vite 时代 -->
迁移到 Vite 后，冷启动 < 1 秒。

:::

:::private{password="hello2024" hint="打招呼 + 年份"}
这是加密的内容，只有知道密码的人才能看到。

- 敏感信息 1
- 敏感信息 2
:::

• password（必填）：解密密码
• hint（可选）：密码提示，帮助读者回忆
• 支持段落、列表、代码块等任意 Markdown 内容
• 解密后显示 重新锁定 按钮，可再次隐藏

:::private{password="123456"}
```env
DATABASE_URL=postgresql://user:secret@localhost:5432/db
API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
```
:::

:::audio{src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" title="SoundHelix Song 1" artist="T. Schürger" width="500px"}
:::

• src（必填）：音频文件地址
• title：歌曲标题
• artist：艺术家
• cover：封面图 URL（可选，不填则显示音乐图标）
• align：对齐方式，可选 left（默认）、center、right
• width：自定义宽度，如 width="400px"

居中对齐示例：

自定义宽度示例：

:::audio{netease="1450008309" title="晴天" artist="周杰伦" width="300px"}
:::

:::audio{netease="1450008309" title="晴天" artist="周杰伦" mode="card"}
:::

• netease（必填）：网易云音乐歌曲 ID，从网易云音乐网页版分享链接中获取
• mode：播放器样式，可选 mini（默认，窄条模式）或 card（带封面大卡片）
• align：对齐方式，可选 left（默认）、center、right
• width：自定义宽度，如 width="400px"

:::audio{voice="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" duration="15" width="200px"}
:::

• voice（必填）：语音文件地址
• duration：语音时长（秒），用于显示波形长度
• align：对齐方式，可选 left（默认）、center、right
• width：自定义宽度，如 width="400px"

:checkbox[默认未选中]
:checkbox[已选中]{checked="true"}
:checkbox[绿色已选中]{checked="true" color="green"}
:checkbox[紫色加号]{checked="true" color="purple" symbol="plus"}
:checkbox[红色减号]{checked="true" color="red" symbol="minus"}
:checkbox[青色叉号]{checked="true" color="cyan" symbol="times"}

行内用法：:checkbox[行内复选框]{inline="true" checked="true"}

• 默认独占一行（块级），添加 inline="true" 可在段落中内联使用
• :checkbox 的 checked 为 true 时显示选中态
• :checkbox 的 symbol 可选值：plus、minus、times
• color 支持 blue、green、red、cyan、purple、orange 等或任意色值

:radio[单选未选中]
:radio[单选已选中]{checked="true"}
:radio[单选橙色]{checked="true" color="orange"}

行内用法：:radio[行内单选]{inline="true" checked="true"}

• 默认独占一行（块级），添加 inline="true" 可在段落中内联使用
• :radio 的 checked 为 true 时显示选中态
• color 支持 blue、green、red、cyan、purple、orange 等或任意色值

:::ghcard{type="repo" repo="withastro/astro"}
:::

:::ghcard{type="user" user="octocat" bio="For all time, always."}
:::

:::ghcard{type="user" user="octocat" avatar="false"}
:::

• type：repo（仓库卡片）或 user（用户卡片）
• repo：仓库全名，格式为 owner/repo（type="repo" 时必填）
• user：GitHub 用户名（type="user" 时必填）
• bio：自定义用户简介（可选，仅 user 类型有效）
• avatar：false 可隐藏用户头像（可选，仅 user 类型有效）
• 数据通过 GitHub API 动态获取，自定义 bio 会在加载前作为占位展示

今天是开心的一天 :emoji[aini]{source="qq"}，代码终于跑通了！:emoji[OK]{source="qq"}

Twemoji 风格的表情 :emoji[1f600]{source="twemoji"} :emoji[1f389]{source="twemoji"}

贴吧表情 :emoji[huaji]{source="tieba"} :emoji[bishi]{source="tieba"}

Blobcat 表情 :emoji[0_0]{source="blobcat"}

也可以直接使用默认源（省略 source）：:emoji[aini]

自定义高度：:emoji[party]{source="blobcat" height="3em"}

• :emoji 为行内指令，可在段落中直接使用
• source 表情源，可选值：
  • qq — QQ 表情（GIF 格式）
  • twemoji — Twitter Emoji（SVG 格式）
  • aru — Aru 表情（GIF 格式）
  • tieba — 贴吧表情（PNG 格式）
  • blobcat — Blobcat 表情（GIF 格式）
  • default — 默认表情源（与 qq 相同）
  • 省略 source 时自动使用 default 源
• height 自定义表情高度，默认 1.75em
• 方括号内的内容为表情名称，会替换到 URL 中的 {name} 占位符

:::yoicard{name="Alex Chen" role="Web Developer · Blogger"}

折腾博客和摄影的开发者 — *记录每一次心动*

<!-- contact -->

**alex.dev**
alex@example.com
:::

:::yoicard{name="全图背景" role="bg-image full" bg-image="..." bg-overlay="dark" accent="#fbbf24" icon="lucide:sparkles" logo="..." qr="https://alex.dev"}

满配:全图 + 暗化遮罩 + 圆 logo + sparkles icon + 二维码

<!-- contact -->

**alex.dev**
alex@example.com
:::

身份

• name(必填)
• role
  /简介(单行)

背景(四选一,优先级 image > gradient > pattern > color)

• bg
  ,如 #1a3a2e
• bg-image
  URL/路径
• bg-pattern:diagonal | dots | grid | grain
• bg-gradient
  渐变,如 "135deg, #fef3c7, #fed7aa"
• bg-mode(图专属):full(默认) | left | right
• bg-overlay(仅 full):dark(默认) | light | none | 自定义颜色

装饰

• logo
  logo 图(默认圆形)
• logo-shape:circle(默认) | square | rounded
• icon
  Iconify 图标,如 lucide:sparkles
• qr
  (URL),build 时生成 SVG
• accent
  /icon 颜色

字体

• font-name
  (完整 font-family 字符串)
• font-body

配色

• text:auto(默认按背景反转) | light | dark | #hex
• name-color / role-color

Slot 写法

• 开始标签和 <!-- contact --> 之间 = bio(自由 Markdown,以斜体小字呈现)
• <!-- contact --> 之后 = 联系区,内部用 --- 分左右两栏
• 不写 <!-- contact --> → 整个 slot 都是 bio
• 开始标签后直接 <!-- contact --> → 跳过 bio

:::video{src="https://example.com/video.mp4" poster="https://example.com/poster.jpg" ratio="16/9"}
:::

• src（必填）：视频文件地址
• poster：封面图，显示自定义播放按钮覆盖层，点击后播放
• ratio：宽高比，默认 16/9，可选 4/3、1/1
• width：最大宽度，如 width="600px"
• align：对齐方式，可选 left（默认）、center、right
• autoplay：true 自动播放（静音）
• pip：画中画模式，可选 auto（默认，滚动离开自动触发）、manual（手动触发）、off（关闭）

:::video{src="https://example.com/video.mp4" ratio="16/9"}
:::

• 不指定 poster 时，使用原生浏览器播放器控件
• 其他参数与带封面模式相同

:::video{src="..." poster="..." ratio="16/9" pip="auto"}
:::

• pip="auto"（默认）：播放中离开视口自动进入画中画
• 浮动播放器支持拖动、播放/暂停、进度跳转
• 点击 ↩ 回到原位并恢复播放，点击 × 直接关闭

:::video{src="..." poster="..." ratio="16/9" pip="manual"}
:::

• pip="manual"：鼠标悬停时右上角显示画中画按钮，点击手动触发
• 适合不希望自动打扰读者的场景

:::video{src="..." poster="..." align="center" width="500px" ratio="4/3"}
:::

• align="center"：视频容器居中对齐
• width="500px"：限制最大宽度
• ratio="4/3"：4
  宽高比

:::video{bilibili="BV17VmcBJEZz"}
:::

• bilibili（必填）：B 站 BV 号
• ratio、width、align 与本地视频相同
• 不支持画中画（iframe 内视频无法控制）

:::video{youtube="jfKfPfyJRdk"}
:::

• youtube（必填）：YouTube 视频 ID
• autoplay：true 自动播放（自动静音，符合 YouTube 策略）
• ratio、width、align 与本地视频相同
• 不支持画中画

:::sites{group="design"}
:::

• group（必填）：对应 site-config.ts 中 links 配置的分组名
• 数据在 site-config.ts 的 links 字段中配置
• 支持封面图、图标、标题、描述和彩色标签
• 封面图未指定时自动通过截图服务抓取（默认 thumio，可在 site-config.ts 中切换为 mshots）

竖向比例

:::posters{group="movies" cols="6"}
:::

正方形比例

:::posters{group="albums" ratio="square"}
:::

• group（必填）：对应 site-config.ts 中 links 配置的分组名
• ratio：比例，可选 portrait（竖向 2
  ，默认）或 square（正方形 1
  ）
• cols：固定列数，可选 2 / 3 / 4 / 5 / 6 / 8，不传则自动填充
• 海报卡片使用 cover 或 icon 字段作为封面图
• 鼠标悬停时显示标题文字
• 极小间隙的紧凑网格布局

在文章 frontmatter 中声明要使用的引擎：

---
mathjax: true
---

---
katex: true
---

何时用哪个：

• 一般公式 → KaTeX（轻量、快速）
• 复杂公式、AMS 宏包、化学式 → MathJax（兼容性更强）

质能方程 $E = mc^2$ 揭示了质量与能量的等价关系。

欧拉公式 $e^{i\pi} + 1 = 0$ 被誉为数学中最美的公式。

$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$

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

• 行内公式：单个 $ 包裹，前后留空格
• 块级公式：$$ 包裹，单独成行
• 支持 aligned、pmatrix、bmatrix 等标准 LaTeX 环境

:::mermaid
flowchart TD
    A[用户访问] --> B{是否登录}
    B -->|是| C[进入首页]
    B -->|否| D[跳转登录页]
    C --> E[浏览文章]
    D --> F[输入账号密码]
    F --> G[验证成功]
    G --> C
:::

• 支持 Mermaid 所有图表类型：flowchart、sequenceDiagram、gantt、classDiagram 等

:::echart
{
  "title": { "text": "月度访问量", "left": "center" },
  "tooltip": { "trigger": "axis" },
  "xAxis": {
    "type": "category",
    "data": ["1月", "2月", "3月", "4月", "5月", "6月"]
  },
  "yAxis": { "type": "value" },
  "series": [{
    "data": [820, 932, 901, 934, 1290, 1330],
    "type": "line",
    "smooth": true,
    "areaStyle": {}
  }]
}
:::

:::echart
{
  "title": { "text": "用户来源分布", "left": "center" },
  "tooltip": { "trigger": "item" },
  "series": [{
    "type": "pie",
    "radius": "50%",
    "data": [
      { "value": 1048, "name": "搜索引擎" },
      { "value": 735, "name": "直接访问" },
      { "value": 580, "name": "邮件营销" },
      { "value": 484, "name": "联盟广告" },
      { "value": 300, "name": "视频广告" }
    ]
  }]
}
:::

• 内容需为合法 JSON，作为 ECharts 的 setOption 配置
• 支持 height 属性自定义高度，如 :::echart{height="300px"}，默认 400px
• 支持 ECharts 所有图表类型：line、bar、pie、scatter、radar 等

:::okr{title="Vergil 主题 2026 Q2" period="2026 第二季度"}

## 提升主题易用性与覆盖度

易用性与覆盖度

| key result | target | current | desc | status | link |
| ---------- | ------ | ------- | ---- | ------ | ---- |
| 新增 5 个 Markdown 内容指令 | 5 | 2 | 当前已实现 plan、okr... | 正常 | |
| 文档站点覆盖全部指令用法 | 30 | 18 | 每个指令需包含语法说明... | 风险 | https://github.com/... |
| 零配置启动体验优化 | 1 | 0 | 简化主题初始化流程... | 滞后 | |

## 扩大社区影响力

社区影响力

| key result | target | current | desc | status | link |
| ---------- | ------ | ------- | ---- | ------ | ---- |
| GitHub Stars 突破 500 | 500 | 320 | 通过技术博客和社交媒体推广 | 正常 | |
| 发布 3 篇主题使用教程 | 3 | 1 | 覆盖安装、自定义、部署全流程 | 正常 | https://github.com/... |
| 收集并处理 20 条用户反馈 | 20 | 12 | 在 GitHub Issues 中追踪和响应 | 正常 | |

:::

• 使用 ## 标题定义 Objective（目标）
• 每个 O 下方用 Markdown 表格定义 Key Results（关键结果）
• 表格列：key result（名称）、target（目标值）、current（当前值）
• 可选列：desc（详细说明）、status（状态：正常/风险/滞后/完成）、link（链接，带链接的 KR 整行可点击）
• 支持 title 和 period 属性设置 OKR 标题与周期
• 自动计算每个 KR、每个 O 以及整体完成度并渲染进度条