# Vuepress Theme - Nav (Build from meteorlxy)

Nav theme for Vuepress

See demo on my homepage

# Extra Config

As Vuepress doesn't allow themes to access Vuepress's config by now, you have to add extra config in .vupress/config.js of your project.

Here's the sample config of my own homepage:

module.exports = {
  title: 'ZERO',
  description: 'ZERO\'s homepage',
  head: [
    ['link', { rel: 'icon', href: '/assets/img/avator.jpg' }],
  ],
  locales: {
    '/': {
      lang: 'zh-CN',
    },
  },
  theme: 'ZERO',
  themeConfig: {
    personalInfo: {
      nickname: 'ZERO',
      description: 'Happy Coding<br/>Happy Life',
      email: 'meteor.lxy@foxmail.com',
      location: 'Xi\'an City, China',
      organization: 'Xi\'an Jiao Tong University',
      avator: '/assets/img/avator.jpg',
      sns: {
        facebook: {
          account: 'xx',
          link: 'https://www.facebook.com/xx'
        },
        github: {
          account: 'xx',
          link: 'https://github.com/xx'
        },
        linkedin: {
          account: 'xx',
          link: 'http://www.linkedin.com/in/xx'
        },
        twitter: {
          account: 'xx',
          link: 'https://twitter.com/xx'
        },
        weibo: {
          account: '@xx',
          link: 'https://weibo.com/u/xxxxxx'
        }
      }
    },
    // headerBackground priority: url > useGeo
    headerBackground: {
      // url: '/assets/img/bg.jpg',
      useGeo: true
    },
    lastUpdated: true,
    nav: [
      { text: 'Home', link: '/', exact: true },
      { text: 'Posts', link: '/posts/', exact: false  },
      { text: 'About', link: '/about/', exact: false  }, 
    ]
  },
  markdown: {
    toc: {
      includeLevel: [2, 3, 4]
    }
  },
  chainWebpack: (config, isServer) => {
    if (isServer === false) {
      config.node.set('Buffer', false)

      config.optimization.splitChunks({
        maxInitialRequests: 5,
        cacheGroups: {
          vue: {
            test: /[\\/]node_modules[\\/](vue|vue-router)[\\/]/,
            name: 'vendor.vue',
            chunks: 'all'
          },
          commons: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            name: 'vendor.commons',
            chunks: 'all'
          }
        }
      })
    }
  }
}

# TODOS

  • [ ] Comments Support
  • [ ] SEO
  • [ ] General enhancement

Made with ❤️ by Ahmad Mostafa - @z3by