组件

vanilla-press 内置组件是基于 vanilla-jui 的一套 Markdown 容器组件，主要用于文档页面排版与交互增强。

组件分为容器组件和标签组件：

• 容器组件：语法使用 ::: 开头，如 ::: tabs、::: accordion 等。
• 标签组件：语法使用 < 开头，首字母大写，类似于 HTML 标签，如 <Badge /> 等。

容器组件

Tabs

JavaScript
const pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}

HTML
<article class="j-editor is-sm">  <h1>组件示例</h1>  <p>主体内容使用 vanilla-jui 排版类。</p></article>

Markdown
::: tabs@tab 选项一内容一@tab 选项二内容二:::

Accordion

Markdown
::: accordion multiple collapsible@item 支持目录结构`docs/zh/guide/components.md` 会输出为 `dist/zh/guide/components.html`，资源链接会自动计算相对路径。@item 支持代码高亮代码块会保留 `language-*` class，并写入基础 token 高亮样式。@item 支持页面级组件初始化每个 HTML 会自动写入自己的 `initDocPage({ components: [...] })` 脚本。:::

参数说明

• multiple 是否允许同时展开多个面板，不写即为 false
• collapsible 是否允许折叠所有面板，不写即为 false

Offcanvas

JavaScript
// javascriptconst pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}

Markdown
::: offcanvas [打开面板] left### Offcanvas在 `Offcanvas` 组件中，内容会被包裹在一个面板容器中，点击按钮可以打开或关闭面板。面板容器内支持 `Markdown` 语法。```javascript// javascriptconst pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}```:::

参数说明

• title 按钮文本，写法 ::: offcanvas [按钮文本]，默认值 打开面板
• direction 面板方向，写法 ::: offcanvas [按钮文本] direction，支持 left、right、top、bottom，默认值 right

Tip

Markdown
::: tip这是一个提示信息。:::::: info 自定义标题这是一个提示信息。:::::: success 成功操作已完成。:::::: warning 注意请确认配置内容。:::::: error 错误删除后不可恢复。:::

参数说明

• 主题：tip, info, success, warning, error
• 不传标题时，中文页面默认显示 提示，英文页面默认显示 Tip。

Tree

帮助用户快速了解文档的目录结构的组件。

Markdown
::: treemy-project/├── src/│ ├── components/ [collapsed]│ │ ├── Header.vue│ │ └── Footer.vue│ ├── App.vue│ └── main.js├── public/│ └── index.html├── tests/│ └── app.test.ts├── package.json└── README.md:::

说明

• 文件节点会按后缀查找图标，未注册时回退为 file 图标。
• 在文件夹名称后添加 [collapsed] 可以设置该文件夹默认收起，例如 components/ [collapsed]。

扩展图标

在 src/config/icons.ts 中，按需增减 svg 图标的配置。

TypeScript
export default {  'align-left':    '<path d="M3 4H21V6H3V4ZM3 19H17V21H3V19ZM3 14H21V16H3V14ZM3 9H17V11H3V9Z"></path>',  'align-right':    '<path d="M3 4H21V6H3V4ZM7 19H21V21H7V19ZM3 14H21V16H3V14ZM7 9H21V11H7V9Z"></path>',  copy: '<path d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path>',};

Details

Markdown
::: details 标题这是一个详情面板。:::

标签组件

Group

行内容器组件 <Group /> 用来包裹行内 HTML 或 Badge 等组件。

Markdown
<Group gap={8}>  <Badge text="apple" />  <Badge text="orange" theme="info" />  <Badge text="banana" theme="warning" /></Group>

参数说明

• gap：number 或 null。默认值为 8，渲染为 gap: 8px。

Badge

徽标组件 <Badge /> 支持直接在标题或正文中使用。

Markdown
<Badge text="new" /><Badge text="beta" theme="info" size="sm" />

参数说明

• text：标签文本。若省略，则使用标签内部内容。
• theme：默认值 default，可选值 reverse、solid、soft、wash、info、success、warning、error。
• size：默认值 md，可选值 sm。

Bilibili

Bilibili 组件 <Bilibili /> 支持在文档中嵌入 Bilibili 视频。

Markdown
<Bilibili url="https://www.bilibili.com/video/BV1KE411a7EY/" />

参数说明：

• url：视频 URL。必需。
• autoplay：是否自动播放。默认值为 0，可选值 1。
• ratio：视频比例。默认值为 16 / 9。
• width：视频宽度。默认值为 100%。
• t：视频开始播放时间。默认值为 0，单位为秒。
• muted：是否静音。默认值为 0，可选值 1。
• p：分 P 序号。默认值为 1。
• danmaku：是否显示弹幕。默认值为 0，可选值 1。
• no-related / norelated：是否隐藏相关视频。默认值为 0，可选值 1。
• height：视频高度。默认值为 null，不设置高度。

Youtube

Youtube 组件 <Youtube /> 支持在文档中嵌入 Youtube 视频。

Markdown
<Youtube url="https://www.youtube.com/watch?v=0Puv0Pss33M" />

参数说明：

• url：视频 URL 或视频 ID。必需。支持 youtube.com/watch?v=、youtu.be、youtube.com/embed、youtube.com/shorts、youtube.com/live。
• autoplay：是否自动播放。默认值为 0，可选值 1。
• controls：是否显示播放器控制栏。默认值为 1，可选值 0。
• ratio：视频比例。默认值为 16 / 9。
• width：视频宽度。默认值为 100%。
• start / t：视频开始播放时间。默认值为 0，单位为秒。
• end：视频结束播放时间。默认值为 0，单位为秒。
• muted：是否静音。默认值为 0，可选值 1。
• loop：是否循环播放。默认值为 0，可选值 1。
• no-related / norelated：是否限制相关视频推荐范围。默认值为 0，可选值 1。
• height：视频高度。默认值为 null，不设置高度。