目录

1. 如何使用
2. 1. Alert
3. 2. ImageCode
4. 3. Video
5. 4. Youtube
6. 5. Bilibili
7. 6. Spotify
8. 7. Steam
9. 8. CRT
10. 实用建议

目前可用的短代码：

• Alert
• ImageCode
• Video
• Youtube
• Bilibili
• Steam
• Spotify
• CRT

如何使用

在 MDX 中，这些组件已经通过 ExtendMarkdown.astro 注入，所以你可以直接这样写：

1
<Alert type="note">Hello</Alert>

无需额外导入。

1. Alert

渲染 GitHub 风格的提示块。

属性

示例

1
<Alert type="note">
2
这是一个提示。
3
</Alert>
4

5
<Alert type="warning">
6
这是一个警告。
7
</Alert>

说明

• 内容通过默认插槽传递。
• 如果省略 type，则使用 note。

2. ImageCode

渲染一张图片，并支持一组可组合的样式类。

属性

示例

1
<ImageCode
2
  url="/images/example.png"
3
  alt="示例图片"
4
  no_hover="true"
5
/>
6

7
<ImageCode
8
  url="/images/original.png"
9
  url_min="/images/preview.png"
10
  alt="可点击的预览"
11
  full="true"
12
/>

说明

• solid 只有在启用 spoiler 时才有效。
• 当存在 url_min 时，组件会渲染一个指向 url 的链接预览图。
• full、full_bleed、start、end 这些布局标志最好有意识地使用，而不是全部一起使用。

3. Video

渲染本地或远程视频，支持与 ImageCode 大多数相同的展示类。

属性

示例

1
<Video
2
  url="/videos/demo.webm"
3
  alt="演示视频"
4
  controls="true"
5
/>
6

7
<Video
8
  url="/videos/hero.webm"
9
  full_bleed="true"
10
  autoplay="true"
11
  muted="true"
12
  loop="true"
13
  playsinline="true"
14
/>

说明

• 组件直接将 url 传递给 <video src>，不会推断格式。
• solid 只有在启用 spoiler 时才有意义。
• 与 ImageCode 不同，Video 不支持 url_min 或 no_hover。

4. Youtube

使用 youtube-nocookie.com 域名嵌入 YouTube 视频。

属性

示例

1
<Youtube id="0Da8ZhKcNKQ" />
2

3
<Youtube id="0Da8ZhKcNKQ" autoplay="true" start={30} />

说明

• 嵌入 URL 格式为 https://www.youtube-nocookie.com/embed/<id>。
• 只有在提供相应属性时才会追加查询参数。

5. Bilibili

嵌入 Bilibili 播放器。

属性

示例

1
<Bilibili bvid="BV1yt4y1Q7SS" />
2

3
<Bilibili
4
  bvid="BV1yt4y1Q7SS"
5
  page={2}
6
  autoplay="true"
7
/>

说明

• 组件构建类似 //player.bilibili.com/player.html?... 的 URL。
• 它始终追加 isOutside=true。
• 所有 ID 属性技术上是可选的，但实际上通常应该至少提供 bvid 或 aid。

6. Spotify

嵌入 Spotify 内容，如专辑、播放列表、曲目、节目和剧集。

属性

示例

1
<Spotify album="5gDJVilnZpPt8zwBC467UH" />
2

3
<Spotify type="track" id="11dFghVXANMlKmJXsNCbNl" />
4

5
<Spotify playlist="37i9dQZF1DXcBWIGoYBM5M" height={480} />

说明

• 你可以通过两种方式传递属性：
  • 简写：album="..."、track="..." 等
  • 通用：type="album" id="..."
• 如果两者都存在，简写属性优先。
• 如果既没有简写属性，也没有有效的 type + id 对，组件会抛出错误。
• 默认高度：
  • track → 152
  • 其他所有类型 → 352

7. Steam

显示 Steam 商店卡片。

属性

示例

1
<Steam appid="1127400" />
2

3
<Steam appid="730" variant="vertical" />

说明

• 组件构建：
  • 商店 URL：https://store.steampowered.com/app/<appid>/
  • 横向图片：header.jpg
  • 纵向图片：library_600x900_2x.jpg
• 在 vertical 模式下，媒体容器固定宽度为 200px。
• 它不调用 Steam API，只根据给定的 appid 构建 URL。

8. CRT

渲染 CRT 风格的代码容器。

属性

示例

1
<CRT code={`
2
Hello, CRT
3
`} />
4

5
<CRT
6
  no_scanlines="true"
7
  code={`
8
No scanlines here
9
`}
10
/>

说明

• 如果 code 以换行符开头，组件会 stripping 第一个换行符，以获得更干净的多行模板使用体验。
• 当 no_scanlines 为 false 时，组件还会添加 scanlines 类。

实用建议

媒体

• 需要一个链接到原图的预览图：使用带有 url_min 的 ImageCode
• 需要剧透遮罩：使用 spoiler，并添加 solid 获得更强效果
• 需要内容栏内的全宽图片：使用 full
• 需要超出内容栏的内容：使用 full_bleed

嵌入

• YouTube：传递 id
• Bilibili：优先使用 bvid
• Spotify：优先使用简写属性如 album="..."
• Steam：传递 appid，然后根据布局需求选择 variant

提示和展示

• 使用 Alert 进行标注
• 使用 CRT 来渲染复古终端风格的代码
• 使用普通 Markdown 代码块来展示常规的高亮代码，除非你特别想要 CRT 效果