目录

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. 参数选择建议

目前可用的 shortcodes 如下：

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

使用方式

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

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

无需单独 import。

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

用于渲染本地或远程视频，同样支持与图片一致的大部分样式类。

参数

示例

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 视频，使用 youtube-nocookie.com 域名。

参数

示例

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

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

说明

• 生成的嵌入地址格式为：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?...。
• 除了你传入的参数外，还会固定附加 isOutside=true。
• bvid、aid、cid 都是可选的，但实际嵌入通常至少应提供 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" />

说明

• 组件会自动生成：
  • 商店链接：https://store.steampowered.com/app/<appid>/
  • 横版封面：header.jpg
  • 竖版封面：library_600x900_2x.jpg
• vertical 模式下会给媒体容器写入固定宽度 200px。
• 组件本身不请求 Steam API，只是按固定 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 的首字符是换行，组件会自动裁掉这个首个换行，方便你在 MDX 里写多行模板字符串。
• no_scanlines 为 false 时会额外附加 scanlines 类。

参数选择建议

媒体类

• 需要图片缩略图跳原图：优先用 ImageCode + url_min
• 需要剧透遮挡：使用 spoiler，需要更强遮挡再叠加 solid
• 需要大图铺满版心：用 full
• 需要突破版心：用 full_bleed

嵌入类

• YouTube：传 id
• Bilibili：优先传 bvid
• Spotify：优先用简写参数，如 album="..."
• Steam：传 appid，再按展示需要选择 variant

提示与展示类

• 提示块：用 Alert
• 复古代码块：用 CRT
• 常规代码高亮：直接用 Markdown 代码块，除非你明确想要 CRT 风格