导航菜单
导航菜单
导航菜单配置在 src/data/config/nav.ts 的 headerNavLinks 字段中。
基础结构
headerNavLinks: [
{
label: '页面',
icon: 'home',
children: [
{ label: '主页', href: '/', icon: 'home' },
{ label: '简历', href: '/views/resume/', icon: 'file-text' }
]
},
{
label: '知识库',
icon: 'database',
children: [
{ label: '文档', href: '/docs', icon: 'book-open' },
{ label: '专栏', href: '/series', icon: 'book-open' }
]
}
]
字段说明
| 字段 | 说明 |
|---|---|
label | 菜单显示的文字 |
icon | 菜单图标名称(Lucide 图标库) |
children | 子菜单列表 |
href | 链接地址 |
图标名称
图标使用 Lucide 图标库,名称使用 kebab-case(短横线连接),如:
home— 首页book-open— 文档image— 图片heart— 收藏message-square— 留言more-horizontal— 更多file-text— 文件folder-open— 文件夹lightbulb— 灵感clock— 时间
完整图标列表可访问 lucide.dev。图标名称将 kebab-case 转为 PascalCase 即可在 Lucide 官网搜索对应的图标。
添加自定义页面到导航
如果你创建了自定义页面(如 src/content/pages/friends.md),可以在导航中添加链接:
{
label: '更多',
icon: 'more-horizontal',
children: [
{ label: '友链', href: '/friends', icon: 'link' },
{ label: '留言', href: '/contact', icon: 'message-square' }
]
}
单级菜单
如果不想使用下拉菜单,可以直接配置平级链接:
headerNavLinks: [
{ label: '首页', href: '/', icon: 'home' },
{ label: '博客', href: '/blog', icon: 'file-text' },
{ label: '关于', href: '/about', icon: 'user' }
]