自定义组件测试

GHReadme.vue

在页面中插入指定GitHub仓库的README.md并渲染。

参数列表

• owner（必需）：指定GitHub仓库的所有者（用户名或组织名）
• repo（必需）：指定GitHub仓库的名称
• customTitle（可选）：指定右上角显示的自定义标题，若未指定，则为：${owner}/${repo}/blob/${branch}/README.md

输入：

<GHReadme owner="kgy145" repo="kgy145" custom-title="README.md" />

输出：

README.md

少女祈祷中...

GHRepo.vue

在页面中插入指定GitHub仓库链接和对应的LICENSE badge。

参数列表

• owner（必需）：指定GitHub仓库的所有者（用户名或组织名）
• repo（必需）：指定GitHub仓库的名称
• customTitle（可选）：指定仓库链接的自定义文字，若未指定，则为：${owner}/${repo}
• displayType（可选）：展示方式，可选值有full（链接和badge全部显示）、link（仅显示链接）、license（仅显示badge），默认值为full

输入：

- <GHRepo owner="kgy145" repo="kgy145.github.io" />
- <GHRepo owner="vuejs" repo="vitepress" customTitle="VitePress 📝💨" />
- 点击右面链接获取字体：<GHRepo owner="lxgw" repo="LxgwWenkai" display-type="link" />
- 看板娘的LICENSE是<GHRepo owner="stevenjoezhang" repo="live2d-widget" display-type="license" />

• kgy145/kgy145.github.io

• VitePress 📝💨

• 点击链接获取字体：

  lxgw/LxgwWenkai

• 左下角看板娘的LICENSE是

  

BlogList.vue

在页面中插入博客列表，显示最近的文章。

参数列表

• limit （可选）：显示文章数量，默认 5
• excerptLength （可选）：摘要截取长度，默认 150
• badgeMap （可选）：自定义标签颜色映射对象，键为标签名，值为 { bg, color }
• card （可选）：是否以卡片样式展示，默认 true

输入：

<BlogList :limit="3" :card="true" />

输出：

• 旋律快照#6（2026-09-25）

  旋律快照#6（2026-09-25） > ## 写在前面 > 旋律快照第六期！大家中秋假期过得好吗？过得不尽兴也没关系，反正还有几天天就要到国庆假期了（提前庆祝）！今天带来的是ryo的知名曲ワールドイズマイン（世界第一的公主殿下），这首歌应该算是特别古早的一首了，但有时候怀旧一些也是很不错的体验呢。...

  2026年9月25日ACG
• 旋律快照#5（2026-09-18）

  旋律快照#5（2026-09-18） > ## 写在前面 > 旋律快照第五期！今天献上的是のぼる↑的白い雪のプリンセスは，也算是很古早的一首歌了，在2010年就能调教的很不错也是能体现很高的水平了。<Spoiler>神奇的是网易云音乐上烤版翻唱竟然被标记成了原版，就算是翻唱的十分好听也不能这样啊aw...

  2026年9月18日ACG
• Effective Java EXTRA - 第2章 创建和销毁对象

  Effective Java EXTRA - 第2章 创建和销毁对象 ::: info 引用内容的页码来源于《Effective Java 中文版（原书第3版）》（人民邮电出版社，ISBN: 978-7-115-62898-5，2024年3月第1版），仅供参考 ::: 条目1: 用静态方法代替构造器...

  2026年9月14日软件相关

MusicCard.vue

显示包含歌曲元数据，简介及网易云链接的卡片。

参数列表

• title （必填）：歌曲标题，类型 String
• transliteration （可选）：译名或副标题，类型 String，默认 ''
• singer （可选）：演唱者，类型 String，默认 ''
• lyricist （可选）：作词者，类型 String，默认 ''
• composer （可选）：作曲者，类型 String，默认 ''
• arranger （可选）：编曲者，类型 String，默认 ''
• description （可选）：简介文本（纯文本），类型 String，默认 ''。若使用了默认插槽，则插槽内容完全覆盖此属性。
• neteaseId （可选）：网易云歌曲 ID（数字或字符串），提供后将显示播放器，默认 null

输入：

<MusicCard 
    title="アスノヨゾラ哨戒班"
    transliteration="明日的夜空哨戒班"
    singer="IA"
    lyricist="Orangestar"
    composer="Orangestar"
    arranger="Orangestar"
    netease-id="1946819289">
  《明日的夜空哨戒班》（日语：アスノヨゾラ哨戒班）是Orangestar于2014年08月19日投稿的VOCALOID原创曲，是第一首由IA演唱的神话曲，同时也是第二首没有初音未来参与演唱的神话曲。
  
  _部分数据摘录自<a href="https://mzh.moegirl.org.cn/%E6%98%8E%E6%97%A5%E7%9A%84%E5%A4%9C%E7%A9%BA%E5%93%A8%E6%88%92%E7%8F%AD">萌娘百科</a>_
  
  _因为原唱是vip歌曲，所以这里放了烤版翻唱QWQ，想听原版点[这里](https://music.163.com/#/song?id=30870173)_
</MusicCard>

输出：

アスノヨゾラ哨戒班

明日的夜空哨戒班

• 演唱：IA
• 作词：Orangestar
• 作曲：Orangestar
• 编曲：Orangestar

《明日的夜空哨戒班》（日语：アスノヨゾラ哨戒班）是Orangestar于2014年08月19日投稿的VOCALOID原创曲，是第一首由IA演唱的神话曲，同时也是第二首没有初音未来参与演唱的神话曲。

部分数据摘录自萌娘百科

因为原唱是vip歌曲，所以这里放了烤版翻唱QWQ，想听原版点这里

如果无法播放，点击此处跳转网易云音乐

Spoiler.vue

用于遮挡内容，鼠标悬停时显示，移开恢复，点击切换并锁定。

参数列表

• color （可选）：遮挡层的颜色，类型 String，默认 'var(--vp-c-bg-alt)'
• tooltip （可选）：悬停提示文本，类型 String，默认 '你知道的太多了'

输入：

<Spoiler tooltip="点击查看秘密">
  这里是被遮挡的信息，鼠标悬停或点击可以揭示。
</Spoiler>

输出：

这里是被遮挡的信息，鼠标悬停或点击可以揭示。