vuepress小课堂005--添加头部导航

原创

于 2020-03-11 01:51:25 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuepress

本篇博客介绍如何按照VuePress官方文档，为站点添加头部导航。通过在public目录下创建/assets/img/logo.png，实现了自定义头部导航的最终效果。文章还将展示所使用的主题源码。

按照官方文档添加一个最简单的

// .vuepress/config.js
module.exports = {
    themeConfig: {
        nav: [
            {
                text: 'Languages',
                ariaLabel: 'Language Menu',
                items: [
                    {
                        text: 'Group1',
                        items: [
                            {text: 'Chinese', link: '/language/chinese/'},
                            { text: 'Japanese', link: '/language/japanese/'}
                        ]
                    },
                    {
                        text: 'Group2', 
                        items: [
                            { text: 'Chinese', link: '/language/chinese/' },
                            { text: 'Japanese', link: '/language/japanese/' }
                        ]
                    }
        ]
    }],
        logo: '/assets/img/logo-new.png',
}
}

我在public里面建立了/assets/img/logo.png

最终效果是这样子的