Start typing to search

Press ESC to close
沉浸

导航菜单

导航菜单

导航菜单配置在 src/data/site-config.tsheaderNavLinks 字段中。

基础结构

headerNavLinks: [
    {
        label: '页面',
        icon: 'Home',
        children: [
            { label: '主页', href: '/', icon: 'Home' },
            { label: '简历', href: '/views/resume/', icon: 'FileText' }
        ]
    },
    {
        label: '知识库',
        icon: 'Database',
        children: [
            { label: '文档', href: '/docs', icon: 'BookOpen' },
            { label: '专栏', href: '/series', icon: 'BookOpen' }
        ]
    }
]

字段说明

字段说明
label菜单显示的文字
icon菜单图标名称(Lucide 图标库)
children子菜单列表
href链接地址

图标名称

图标使用 Lucide 图标库,直接写图标名称即可,如:

  • Home — 首页
  • BookOpen — 文档
  • Image — 图片
  • Heart — 收藏
  • MessageSquare — 留言
  • MoreHorizontal — 更多

完整图标列表可访问 lucide.dev

添加自定义页面到导航

如果你创建了自定义页面(如 src/content/pages/friends.md),可以在导航中添加链接:

{
    label: '更多',
    icon: 'MoreHorizontal',
    children: [
        { label: '友链', href: '/friends', icon: 'Link' },
        { label: '留言', href: '/contact', icon: 'MessageSquare' }
    ]
}

单级菜单

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

headerNavLinks: [
    { label: '首页', href: '/', icon: 'Home' },
    { label: '博客', href: '/blog', icon: 'FileText' },
    { label: '关于', href: '/about', icon: 'User' }
]
未知标题
00:00
00:00
播放列表