以下为本博客的一些组件语法示例

提示

• vuepress-theme-plume 主题预览请看这里
• vuepress-theme-plume Markdown基础语法请看这里

GitHubCard.vue

<GitHubCard url="https://github.com/vuejs/core" />

参数 url 填入仓库地址，示例：

正在加载 GitHub 仓库信息

GiteeCard.vue

<GiteeCard url="https://gitee.com/quchenghao/wechatmsg" />

参数 url 填入仓库地址，示例：

正在加载 Gitee 仓库信息

NeteaseMusicCard.vue

<NeteaseMusicCard id="1363276989" />

参数 id 填入音乐ID，示例：

正在加载网易云音乐信息

WordCount.vue

1. 默认：自动识别当前一级分组

<WordCount label="当前笔记字数：" />

示例：

READING / WORDS当前笔记字数统计加载中…

2. 识别当前二级分组

<WordCount :depth="2" label="当前二级分组字数：" />

示例：

READING / WORDS当前二级分组字数统计加载中…

3. 手动指定某个分组

<WordCount path="/notes/qian-ru-shi-kai-fa/" label="嵌入式开发 分组总字数：" />

示例：

READING / WORDS嵌入式开发 分组总字数统计加载中…

4. 显示全站总字数

<WordCount path="/" label="全站总字数：" />

示例：

READING / WORDS全站总字数统计加载中…

GroupDirectory.vue

• 自动识别当前 README 所在物理目录
• 自动读取同级 Markdown 的标题、摘要、日期、图标和字数
• 新增或删除 Markdown 后，开发环境或重新构建时自动更新
• 支持递归目录、名称/日期排序和手动指定目录

<GroupDirectory />

示例：

DIRECTORY / 03

本组目录

同一分组下的内容会在这里自动汇总。

01Plume主题预览--- 正文内容。 @property CSS at-rule是 CSS Houdini API 的一部分，它允许开发者显式地定义他们的 CSS 自定义属性, 允许进行属性类型检查、设…2026/08/30935 字02Plume默认语法示例以下为vuepress-theme-plume内置的一些组件语法示例 使用 组件来显示行内信息，如状态或标签。 VuePress - VuePress - VuePress - Vue…2026/03/10268 字03图片素材工作流使用指南图片统一放在 docs/.vuepress/public/assets/，文章中始终使用 /assets/... 引用，不使用 Markdown 同目录相对路径。 用途 目录 ---2026/08/30752 字

GitHubReadme.vue

• 支持完整 GitHub URL 或 owner/repo
• 使用 GitHub 官方 HTML 媒体类型获取已渲染 README
• 包含骨架加载、错误重试、分支信息、仓库入口
• 超长内容默认折叠，可展开/收起
• 清理危险 HTML，并隔离远程 README 锚点，避免与页面标题冲突

<GitHubReadme url="https://github.com/DavidBlackCN/DB-Blog-Plume" />

示例：

正在加载 GitHub README

更新日志

2026/8/30 16:28

查看所有更新日志

• 07246-📝 docs(repo): 博客&文档更新于 2026/8/30
• 35f98-笔记更新于 2026/3/10
• 867f0-新增不准确的wordcount于 2026/3/9

版权所有

许可证：署名-非商业性-相同方式共享 4.0 国际 (CC-BY-NC-SA-4.0)

上一页Plume默认语法示例

下一页图片素材工作流使用指南