vuepress小課堂005--添加頭部導航

按照官方文檔 添加一個最簡單的

// .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

最終效果是這樣子的

看一下主題源碼

<img
        v-if="$site.themeConfig.logo"
        class="logo"
        :src="$withBase($site.themeConfig.logo)"
        :alt="$siteTitle"
      >

// nav組件 當瀏覽器小於一定尺寸 navlinks會消失
<NavLinks class="can-hide" />

//sidebar組件 當瀏覽器小於一定尺寸 navlinks會出現
  <aside class="sidebar">
    <NavLinks />

    <slot name="top" />

    <SidebarLinks
      :depth="0"
      :items="items"
    />
    <slot name="bottom" />
  </aside>