Vitepress 默认主题中支持在站点标题中使用 HTML 标签

在 Vitepress 文档站点开发过程中，站点标题(siteTitle)是一个重要的展示元素。默认情况下，Vitepress 会对站点标题中的 HTML 标签进行转义处理，这限制了开发者对标题样式的自定义能力。

当前限制

Vitepress 的默认主题目前会将 siteTitle 配置中的 HTML 标签自动转义。例如，如果开发者尝试在标题中添加版本标签：

OI Runner++ <span class="VPBadge tip">v1.0.0</span>

实际渲染时会显示为转义后的文本：

OI Runner++ <span class="VPBadge tip">v1.0.0</span>

这导致无法实现一些常见的标题样式需求，比如在标题旁添加徽章(badge)效果。

技术背景

Vitepress 作为基于 Vue 的静态站点生成器，其默认主题出于安全考虑会对用户输入的文本内容进行转义处理，防止潜在的 XSS(跨站脚本)攻击。然而，对于 siteTitle 这样的配置项，由于是在构建时确定的静态内容，实际上不存在安全风险。

解决方案建议

可以考虑修改 Vitepress 默认主题的实现，使 siteTitle 配置支持 HTML 标签，类似于首页布局(Home layout)中 hero 部分的处理方式。具体来说：

1. 移除对 siteTitle 的 HTML 转义处理
2. 使用 v-html 指令而非文本插值来渲染标题
3. 在文档中明确说明此功能支持 HTML

这种改动不会引入安全风险，因为：

• siteTitle 是在构建时确定的配置项
• 内容完全由开发者控制
• 不像用户生成内容那样存在注入风险

实际应用场景

支持 HTML 标签的站点标题可以实现多种效果：

1. 版本徽章：在标题旁显示版本号标签
2. 样式定制：为标题的不同部分应用不同样式
3. 图标集成：在标题中嵌入 SVG 图标
4. 响应式设计：在不同屏幕尺寸下显示不同的标题内容

实现考量

虽然这个功能看似简单，但在实现时需要考虑：

1. 向后兼容性：确保现有项目不受影响
2. 文档更新：明确说明此功能的使用方法和限制
3. 性能影响：评估使用 v-html 带来的性能变化
4. 主题定制：考虑如何让自定义主题也能利用此功能

这种改进将增强 Vitepress 的灵活性，同时保持其安全性和易用性。