边栏配置
边栏配置
Vergil 支持通过 site-config.ts 配置左右边栏的组件内容和顺序。
配置位置
// src/data/site-config.ts
export default {
// ...其他配置
sidebar: {
left: ['recentPosts', 'siteInfo'],
right: ['welcome', 'heatmap', 'recentPosts', 'featured', 'tags'],
components: {
welcome: { text: '记录技术、生活与思考' },
recentPosts: { limit: 5 },
featured: { limit: 3 },
tags: { limit: 6 },
ghCard: { mode: 'repo', repo: 'user/repo' },
},
},
};
左侧栏
左侧栏顶部是固定区域(不可移除):
- 个人资料卡:头像、名字、副标题、社交图标
- 站内导航:6 个链接网格
固定区域下方可通过 left 数组配置:
| 组件 ID | 说明 | 配置项 |
|---|---|---|
recentPosts | 最近更新列表 | limit(默认 5) |
siteInfo | 站点统计+备案信息 | 无 |
示例
left: ['recentPosts', 'siteInfo'] // 显示最近更新 + 站点信息
left: ['siteInfo'] // 只显示站点信息
left: [] // 只保留固定区域
右侧栏
右侧栏完全通过 right 数组配置,默认用于列表页(首页、归档、标签页等)。
| 组件 ID | 说明 | 配置项 |
|---|---|---|
welcome | 欢迎提示语卡片 | text |
heatmap | 8 周写作热力图 | 无 |
recentPosts | 最近更新列表 | limit(默认 5) |
featured | 精选文章(isFeatured=true) | limit(默认 3) |
tags | 热门标签列表 | limit(默认 6) |
ghCard | GitHub 仓库/用户卡片 | mode/repo/user |
示例
right: ['welcome', 'heatmap', 'recentPosts', 'featured', 'tags']
right: ['welcome', 'featured', 'tags'] // 去掉热力图和最近更新
right: ['welcome', 'ghCard', 'tags'] // 加上 GitHub 卡片
文章页/文档页右侧栏
文章页和文档页的右侧栏目前通过页面级 slot 覆盖实现,不走 right 配置数组:
- 文章页:文章目录(Toc) + 相关文章 + 精选文章
- 文档页:文章目录(Toc)
这些组件需要页面上下文(如当前文章的标题、标签),因此无法在全局配置中指定。
组件级配置
所有可配置项写在 sidebar.components 中:
components: {
welcome: {
text: '记录技术、生活与思考', // 欢迎语内容
},
recentPosts: {
limit: 5, // 显示最近几篇(默认 5)
},
featured: {
limit: 3, // 显示几篇精选(默认 3)
},
tags: {
limit: 6, // 显示几个标签(默认 6)
},
ghCard: {
mode: 'repo', // 'repo' 或 'user'
repo: 'user/repo', // repo 模式:仓库路径
// user: 'username', // user 模式:用户名
// bio: 'optional bio', // user 模式可选:自定义简介
},
}
调整顺序
数组中的顺序就是渲染顺序,写在前面先显示:
right: ['featured', 'welcome', 'heatmap', 'tags'] // 精选文章置顶
隐藏组件
从数组中删除对应的 ID 即可隐藏该组件:
right: ['welcome', 'featured', 'tags'] // 隐藏热力图和最近更新
注意事项
draft: true的文章不会出现在任何边栏组件中- 如果文章数量不足,
recentPosts和featured会自动少显示 ghCard需要配置正确的仓库/用户名才能正常获取数据