前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载VitePress 默认主题内置的全局Badge组件可以在文档标题Heading旁添加内联状态标签用于标注章节类型、支持版本或实验性状态。本文以docs/ja/reference/default-theme-badge.md为核心骨架结合当前仓库的组件源码、主题变量与全局注册实现完整讲解 Badge 的用法、类型体系、自定义样式与底层原理帮助你直接在 Markdown 中写出专业、可维护的状态标注。Badge 能做什么在长文档中读者经常需要快速识别某段内容的性质这是一个提示、一项实验性功能还是某个版本才支持的 APIVitePress 的Badge组件正是为此而生——它以内联小标签的形式出现在标题右侧例如### Title Badge typeinfo textdefault / ### Title Badge typetip text^1.9.0 / ### Title Badge typewarning textbeta / ### Title Badge typedanger textcaution /渲染结果如下TitleTitleTitleTitle它尤其适合两类场景标注章节的类型如composable、helper、component或标注 API 的版本支持范围如^1.9.0。在当前仓库的官方文档中就有大量真实用例例如 runtime-api.md 中每个 API 都带有typeinfo的分类标签而 site-config.md 和 mpa-mode.md 则用typewarning textexperimental标注实验性功能。基本用法全局可用的BadgeBadge是默认主题通过enhanceApp全局注册的组件因此你不需要 import也不需要引入任何额外配置直接在任意 Markdown 文件中书写即可。通过text属性设置标签文字最常用的是text属性它接受一个字符串作为标签内容### Title Badge typeinfo textdefault / ### Title Badge typetip text^1.9.0 / ### Title Badge typewarning textbeta / ### Title Badge typedanger textcaution /通过子元素设置更复杂的内容Badge同时接受children插槽内容子元素会显示在标签内部。当传入子元素时text属性会被忽略### Title Badge typeinfocustom element/BadgeTitle custom element利用子元素特性你可以在标签内放置 HTML 或更丰富的文本结构而不仅限于纯字符串。类型体系从 4 种到 7 种类型原日文文档给出的type取值是 4 种info | tip | warning | danger。而从当前仓库源码看组件已扩展为7 种类型与 Markdown 容器custom block的告警配色体系保持一致// src/client/theme-default/components/VPBadge.vue withDefaults(defineProps{ text?: string type?: info | note | tip | important | caution | warning | danger }(), { type: tip // 默认值为 tip })各类型的语义与配色来源如下基于 vars.css 中的颜色令牌type语义文字色/背景色来源info中性信息--vp-c-text-2/--vp-c-default-softnote常规说明--vp-c-note-1/--vp-c-note-soft品牌色tip推荐/提示默认--vp-c-tip-1/--vp-c-tip-soft品牌色important重要事项--vp-c-important-1/--vp-c-important-soft紫色caution谨慎操作--vp-c-caution-1/--vp-c-caution-softwarning警告--vp-c-warning-1/--vp-c-warning-softdanger危险/废弃--vp-c-danger-1/--vp-c-danger-soft这里有一个值得注意的实现细节在未启用分级容器graded containers时caution默认映射为红色系、warning映射为黄色系而当页面启用.vp-graded-containers后warning会切换为橙色、caution切换为黄色见 vars.css 中的:root:where(:has(.vp-graded-containers))规则。因此 Badge 的颜色会随主题的容器配色体系自动保持一致。自定义每种类型的颜色如果你不满意默认配色可以通过覆盖 CSS 变量的方式定制——Badge 的样式完全由 CSS 变量驱动无需修改组件源码。默认变量值以下是当前仓库 vars.css 中定义的全部默认值包含文档未列出的note、important、caution三种:root { --vp-badge-info-border: transparent; --vp-badge-info-text: var(--vp-c-text-2); --vp-badge-info-bg: var(--vp-c-default-soft); --vp-badge-note-border: transparent; --vp-badge-note-text: var(--vp-c-note-1); --vp-badge-note-bg: var(--vp-c-note-soft); --vp-badge-tip-border: transparent; --vp-badge-tip-text: var(--vp-c-tip-1); --vp-badge-tip-bg: var(--vp-c-tip-soft); --vp-badge-important-border: transparent; --vp-badge-important-text: var(--vp-c-important-1); --vp-badge-important-bg: var(--vp-c-important-soft); --vp-badge-caution-border: transparent; --vp-badge-caution-text: var(--vp-c-caution-1); --vp-badge-caution-bg: var(--vp-c-caution-soft); --vp-badge-warning-border: transparent; --vp-badge-warning-text: var(--vp-c-warning-1); --vp-badge-warning-bg: var(--vp-c-warning-soft); --vp-badge-danger-border: transparent; --vp-badge-danger-text: var(--vp-c-danger-1); --vp-badge-danger-bg: var(--vp-c-danger-soft); }每个类型对应三组变量border边框色、text文字色、bg背景色。默认边框均为transparent所以视觉上呈现为纯色圆角标签。覆盖方式在你的自定义主题样式中重新声明这些变量即可例如把tip改成深色品牌背景、浅色文字:root { --vp-badge-tip-border: var(--vp-c-brand-2); --vp-badge-tip-text: #ffffff; --vp-badge-tip-bg: var(--vp-c-brand-1); }由于变量声明在:root上你还可以借助 CSS 的暗色/亮色主题媒体查询media (prefers-color-scheme: dark)为不同外观模式分别定制配色。Props 接口Badge组件对外暴露的 props 如下以当前源码 VPBadge.vue 为准interface Props { // 当 slot子元素被传入时此值会被忽略 text?: string // 默认值为 tip与 Markdown 容器/告警的颜色体系一致 type?: info | note | tip | important | caution | warning | danger }text与子元素二选一传了子元素就显示子元素否则回退显示text。这一点在组件模板中体现得很直观span classVPBadge :classtype dirauto slot{{ text }}/slot /spandirauto表示标签方向根据内容自动判断对多语言如 RTL 语言文档更友好。源码级实现解析全局注册Badge之所以开箱即用是因为默认主题在enhanceApp钩子中完成了全局注册// src/client/theme-default/without-fonts.ts import VPBadge from ./components/VPBadge.vue const theme: Theme { Layout, enhanceApp: ({ app }) { app.component(Badge, VPBadge) } }同时VPBadge也作为具名导出对外暴露export { default as VPBadge }因此自定义主题时同样可以直接 import 复用。样式细节在 VPBadge.vue 的style中可以看到若干值得留意的设计基础样式为display: inline-block、圆角0.75rem、font-size: 0.75rem、white-space: nowrap并通过transform: translateY(-0.125rem)微调垂直对齐使其与标题基线自然贴合针对h1 .VPBadge、h2 .VPBadge等场景做了专门的vertical-align: middle对齐优化还预留了.small尺寸变体更小的字号与内边距供其他组件内部复用.VPDocFooter .VPBadge { display: none }表示在文档页脚区域会自动隐藏 Badge避免干扰页脚布局。目录Outline自动忽略Badge 还被目录提取逻辑主动忽略——outline.ts 中的ignoreRE正则包含VPBadge因此带 Badge 的标题生成目录锚点时标签文字不会污染目录文本只会保留标题本身的文字内容。实战建议标注 API 状态对composable、helper、component等 API 分类使用typeinfo参考 runtime-api.md 的写法标注版本支持用typetip text^1.9.0表示最低支持版本便于读者快速判断可用性标注实验性/废弃用typewarning textexperimental或typedanger textdeprecated参考 mpa-mode.md 与 site-config.md统一主题如需全站统一 Badge 配色在主题入口处集中覆盖--vp-badge-*变量而不是逐页书写内联样式。总之Badge是 VitePress 默认主题中零配置、低成本、高辨识度的标题标注方案标记用途看type标注文字用text或子元素深度定制靠 CSS 变量底层由 VPBadge.vue 与主题变量体系共同支撑值得在你的文档站点中广泛使用。赞分享前端文档【免费下载链接】vitepressVite Vue powered static site generator.项目地址https://gitcode.com/gh_mirrors/vi/vitepress点击查看免费下载相关推荐VitePress 默认主题导航栏Nav配置完全指南站点标题、图标、菜单链接与自定义组件VitePress 默认主题导航栏Nav配置完全指南站点标题、图标、菜单链接与自定义组件 导航栏Nav是 VitePress 默认主题中固定在页面顶部前端文档Vant 4 Tag 标签组件完全指南样式、关闭交互与主题定制Vant 4 Tag 标签组件完全指南样式、关闭交互与主题定制 Tag标签是 Vant 4 移动端组件库中用于标记关键词、概括主要内容的轻量级组件常见于前端UI组件ruflo 研究蜂群策略用 claude-flow Swarm 构建并行深度研究流水线ruflo 研究蜂群策略用 claude flow Swarm 构建并行深度研究流水线 本文聚焦 ruflo 仓库中的 Research Swarm Stra前端文档上一篇终极指南使用llama.cpp实现模型蒸馏让小模型拥有大能力下一篇3分钟搞定Gemma模型转换llama.cpp终极避坑指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考