导航菜单

导航菜单配置在 src/data/config/nav.ts 的 headerNavLinks 字段中。

基础结构

TypeScript

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' }        ]    }]

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），可以在导航中添加链接：

TypeScript

{    label: '更多',    icon: 'more-horizontal',    children: [        { label: '友链', href: '/friends', icon: 'link' },        { label: '留言', href: '/contact', icon: 'message-square' }    ]}

{
    label: '更多',
    icon: 'more-horizontal',
    children: [
        { label: '友链', href: '/friends', icon: 'link' },
        { label: '留言', href: '/contact', icon: 'message-square' }
    ]
}

单级菜单

如果不想使用下拉菜单，可以直接配置平级链接：

TypeScript

headerNavLinks: [    { label: '首页', href: '/', icon: 'home' },    { label: '博客', href: '/blog', icon: 'file-text' },    { label: '关于', href: '/about', icon: 'user' }]

headerNavLinks: [
    { label: '首页', href: '/', icon: 'home' },
    { label: '博客', href: '/blog', icon: 'file-text' },
    { label: '关于', href: '/about', icon: 'user' }
]