【4】VitePress搭建个人博客-导航栏设置

导航栏

Nav是显示在页面顶部的导航栏。它包含站点标题、全局菜单链接等

网站的标题和logo

首先我们找到 docs/.vitepress/下的config.js文件

export default:{
    themeConfig:{
        //网站标题
        siteTitle:'VitePress',
        //网站的logo
        logo:'logo.jpg'
    }
}

这里通过配置logo来展示网页的logo，需要注意的是logo应该直接放在public种，并定义定义路径

导航链接

export default:{
    themeConfig:{
        nav:[
            {text:"博客",link:"/posts/阅读须知"},
            {text:"学习笔记",link:"/guide/test"}
        ]
    }
}

text是nav种显示的实际文本，link是单击文本时将导航到的链接。链接的路径设置为不带.md前缀的实际文件，并始终以/开头。

导航链接也可以是下拉菜单，我们需要在链接选项上设置items

export default:{
    themeConfig:{
        nav:[
            {text:"博客",link:"/posts/阅读须知"},
            {text:"学习笔记",link:"/guide/test"},
            {
            text:"关于",
            items:[
                {text:'Gitee',link:'/'},
                {text:'GitHub',link:'/'},
                {text:'CSDN',link:'/'},

            ]
            }
        ]
    }
}

注意：下拉菜单中的text不能配置link属性(例如此处的text:“关于”)，因为此处为下拉对话框的按钮,当然你还能通过传入更多嵌套来向下拉菜单中添加子项。

社交属性

你可以定义此选项以在导航中展示带有图标的社交账户链接，例如下图右侧的github图标

export default {
  themeConfig: {
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: '...' },
      // 也可以通过自定义的方式
      {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
        },
        link: '...'
      }
    ]
  }
}

下面是目前支持的图标：

1. ‘discord’
2. ‘facebook’
3. ‘github’
4. ‘instagram’
5. ‘linkedin’
6. ‘slack’
7. ‘twitter’
8. ‘youtube’

页脚设置

页脚配置。 您可以添加 message 和copyright。 由于设计原因，仅当页面不包含侧边栏时才会显示页脚。

    export default {
  themeConfig: {
    footer: {
      message: 'footer',
      copyright: ' © 2024-vitepress'
    }
  }
}