首页自定义排版方案

方案对比

方案	复杂度	灵活性	维护性	推荐度
方案一：Vue 组件	⭐ 低	⭐⭐ 中	⭐⭐⭐ 高	⭐⭐⭐⭐⭐
方案二：自定义布局	⭐⭐ 中	⭐⭐⭐ 高	⭐⭐ 中	⭐⭐⭐
方案三：Layout 插槽	⭐⭐⭐ 高	⭐⭐⭐⭐ 很高	⭐⭐ 中	⭐⭐

---

方案一：在 Markdown 中使用 Vue 组件（✅ 推荐）

优点

• ✅ 简单快速：无需修改主题配置，直接在 Markdown 中使用
• ✅ 易于维护：组件独立，便于更新和调试
• ✅ 性能好：VitePress 自动优化组件加载
• ✅ 响应式：自动适配移动端

缺点

• ⚠️ 功能相对有限（但对于 Tab 切换、图表等已足够）
• ⚠️ 需要创建 Vue 组件文件

实现步骤

1. 已创建的组件：

   • BenchmarkTabs.vue - Tab 切换和性能对比图表
   • ToolCards.vue - 四个工具的介绍卡片

2. 在 docs/index.md 中使用：

---
layout: home
hero:
  # ... hero 配置
features:
  # ... features 配置
---

<!-- 在 Markdown 中直接使用组件 -->
<BenchmarkTabs />

<ToolCards />

3. 已自动注册：组件已在 .vitepress/theme/index.ts 中注册，可直接使用

使用示例

查看 docs/index-example.md 文件了解完整示例。

---

方案二：自定义布局组件

优点

• ✅ 完全控制：可以完全自定义首页布局
• ✅ 灵活性高：可以覆盖默认的 hero 和 features 区域
• ✅ 可复用：布局组件可以在其他页面复用

缺点

• ⚠️ 需要更多代码
• ⚠️ 需要处理响应式布局
• ⚠️ 可能与 VitePress 默认样式冲突

实现方式

1. 创建自定义布局组件：

   • .vitepress/components/HomeLayout.vue
   • 完全自定义 hero、features、benchmark 等区域

2. 修改 docs/index.md：

---
layout: home-custom
# 使用自定义布局
---

3. 在主题中注册布局：

// .vitepress/theme/index.ts
import HomeLayout from '../components/HomeLayout.vue'

export default {
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      'home': () => h(HomeLayout)
    })
  }
}

---

方案三：使用 Layout 插槽（高级）

优点

• ✅ 最大灵活性：可以完全控制页面结构
• ✅ 深度定制：可以修改任何 VitePress 默认行为

缺点

• ⚠️ 复杂度高：需要深入理解 VitePress 架构
• ⚠️ 维护困难：升级 VitePress 时可能需要调整
• ⚠️ 学习曲线陡峭

实现方式

1. 使用 Layout 插槽：

// .vitepress/theme/index.ts
export default {
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      'home-features-after': () => h(BenchmarkTabs),
      'home-hero-after': () => h(ToolCards)
    })
  }
}

2. 完全自定义 Layout：

export default {
  Layout: () => {
    return h(CustomLayout)
  }
}

---

推荐方案：方案一

理由：

1. ✅ 已创建好组件，可以直接使用
2. ✅ 简单易用，维护成本低
3. ✅ 满足 Tab 切换、图表等需求
4. ✅ 符合 VitePress 最佳实践

快速开始

1. 更新 docs/index.md：

---
layout: home
hero:
  name: Bun 3.3 is here
  text: A fast JavaScript
  tagline: Bun is a fast all-in-one JavaScript runtime.
  # ... 其他配置
features:
  # ... features 配置
---

<BenchmarkTabs />

<ToolCards />

2. 测试：

pnpm dev

3. 自定义数据：
   • 修改 BenchmarkTabs.vue 中的 benchmarkData 对象
   • 修改 ToolCards.vue 中的 tools 数组

---

组件说明

BenchmarkTabs 组件

• 功能：Tab 切换 + 性能对比图表
• Props：无（数据在组件内部）
• 自定义：修改 benchmarkData 对象

ToolCards 组件

• 功能：四个工具的介绍卡片（Runtime、Package Manager、Test Runner、Bundler）
• Props：无（数据在组件内部）
• 自定义：修改 tools 数组

---

下一步

1. 选择方案：建议使用方案一
2. 更新首页：将组件添加到 docs/index.md
3. 自定义数据：根据实际需求修改组件中的数据
4. 样式调整：根据需要修改组件的 CSS
5. 测试：在开发服务器中查看效果