Vitepress 导航菜单中使用 HTML 标记添加徽章

在 Vitepress 文档项目中，有时我们需要在侧边栏导航菜单项中添加版本号等额外信息。常见做法是使用徽章(Badge)来醒目地展示这些辅助信息。

问题背景

许多开发者尝试在 Vitepress 的导航配置中直接使用 Vue 组件如 <Badge> 来添加徽章，例如：

{text: 'Card <Badge>1.0.0</Badge>', link: '../2024.1.1/card'}

但这种写法不会生效，因为 Vitepress 的导航配置中不支持直接使用 Vue 组件语法。

解决方案

Vitepress 支持在导航配置中使用原生 HTML 标记来实现类似效果。正确的做法是：

{
  text: 'Card <span class="badge">1.0.0</span>',
  link: '../2024.1.1/card'
}

然后通过 CSS 为 .badge 类添加样式，使其看起来像一个标准的徽章：

.badge {
  display: inline-block;
  padding: 0.15em 0.4em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: #6c757d;
  border-radius: 0.25rem;
  margin-left: 0.5em;
  vertical-align: middle;
}

进阶用法

1. 多种颜色徽章：可以通过添加不同的 CSS 类来实现多种颜色的徽章

   .badge-primary { background-color: #007bff; }
   .badge-success { background-color: #28a745; }
   .badge-warning { background-color: #ffc107; color: #212529; }
   

2. 动态版本号：如果需要动态显示版本号，可以通过 Vitepress 的主题扩展来实现

3. 响应式调整：在小屏幕下可以调整徽章的大小和位置，确保布局合理

注意事项

1. 确保 HTML 标记是自闭合的或者正确嵌套，避免破坏导航结构
2. 徽章内容应简洁明了，避免过长影响导航可读性
3. 考虑使用 CSS 变量来统一管理徽章样式，便于主题切换

通过这种 HTML 标记的方式，我们可以在 Vitepress 导航中灵活地添加各种辅助信息，同时保持代码的简洁性和可维护性。