基础配置

TIP

在 docs\.vuepress 文件下新建 config.js 文件，基础配置所有配置项在 config.js 文件中进行配置

配置项目名称，项目描述

module.exports = {
  lang: 'zh-CN',
  title: '我睡着的时候不困唉', // 网站标题
  description: '记录学习笔记' // 网站的描述
}

配置项目本地端口，打包目录

module.exports = {
  dest: './dist', // 设置编译后的输出目录./ROOT代表在工程的根目录下生成一个ROOT文件，里面是编译好的文件，可以拿ROOT直接部署
  base: '/zmmblog/', // 设置站点根路径 // 路径名为 "/<REPO>/"
  port: 3026 // 端口号
}

配置 head

module.exports = {
  head: [
    // 增加一个自定义的 favicon
    [
      'link',
      {
        rel: 'icon',
        href: '/favicons/favicon-16x16.png',
        type: 'image/png',
        sizes: '16x16'
      }
    ],
    [
      // 解决外联图片不显示由于我们vuepress本地服务把当前本站的referrer带给了cdn图片请求，第三方发现不是本站的请求
      'meta',
      {
        name: 'referrer',
        content: 'no-referrer'
      }
    ],
    // 移动端优化
    [
      'meta',
      {
        name: 'viewport',
        content:
          'width=device-width,initial-scale=1,user-scalable=no,maximum-scale=2'
      }
    ]
  ]
}

配置 theme 的 navbar

1. 在 docs\.vuepress 文件夹中新建 config\navbar\index.js

export const navbar = [
  {
    text: '首页',
    link: '/'
  },
  {
    text: '站外链接',
    children: [
      { text: 'gitee', link: 'https://gitee.com/zmmlet' },
      { text: '掘金', link: 'https://juejin.cn/user/114004940306909' }
    ]
  },
  {
    text: '前端',
    children: [
      {
        text: 'CSS',
        children: ['/frontend/css/purgeCSS.md', '/frontend/css/SCSS.md']
      },
      {
        text: 'javaScript',
        children: ['/frontend/javaScript/ES6.md']
      },
      {
        text: 'Vue',
        children: ['/frontend/vue/electron+Vue使用总结.md']
      }
    ]
  }
]

2. 在 docs\.vuepress\config\ 文件夹中新建 index.js 文件

export * from './navbar/index.js'

3. 在 docs\.vuepress\config.js 文件中引入使用

import { defaultTheme } from 'vuepress'
import { navbar } from './config/index'

module.exports = {
  theme: defaultTheme({
    logo: '/images/logo.png',
    // 默认主题配置
    navbar: navbar
  })
}

配置 theme 的 sidebar

1. 在 docs\.vuepress 文件夹中新建 config\sidebar\index.js

export const sidebar = {
  '/frontend/': [
    {
      text: 'CSS',
      collapsible: true,
      children: ['/frontend/css/purgeCSS.md', '/frontend/css/SCSS.md']
    },
    {
      text: 'javaScript',
      collapsible: true,
      children: ['/frontend/javaScript/ES6.md']
    },
    {
      text: 'Vue',
      collapsible: true,
      children: ['/frontend/vue/electron+Vue使用总结.md']
    }
  ]
}

2. 在 docs\.vuepress\config\index.js 文件

export * from './sidebar/index.js'

3. 在 docs\.vuepress\config.js 文件中引入使用

import { defaultTheme } from 'vuepress'
import { sidebar } from './config/index'

module.exports = {
  theme: defaultTheme({
    logo: '/images/logo.png',
    // 默认主题配置
    sidebar: sidebar
  })
}

基础配置完整代码

import { defaultTheme } from 'vuepress'
import { navbar, sidebar } from './config/index'
module.exports = {
  lang: 'zh-CN',
  title: '我睡着的时候不困唉', // 网站标题
  description: '记录学习笔记', // 网站的描述
  dest: './dist', // 设置编译后的输出目录./ROOT代表在工程的根目录下生成一个ROOT文件，里面是编译好的文件，可以拿ROOT直接部署
  base: '/zmmblog/', // 设置站点根路径 // 路径名为 "/<REPO>/"
  port: 3026, // 端口号
  head: [
    // 增加一个自定义的 favicon
    [
      'link',
      {
        rel: 'icon',
        href: '/favicons/favicon-16x16.png',
        type: 'image/png',
        sizes: '16x16'
      }
    ],
    [
      // 解决外联图片不显示由于我们vuepress本地服务把当前本站的referrer带给了cdn图片请求，第三方发现不是本站的请求
      'meta',
      {
        name: 'referrer',
        content: 'no-referrer'
      }
    ],
    // 移动端优化
    [
      'meta',
      {
        name: 'viewport',
        content:
          'width=device-width,initial-scale=1,user-scalable=no,maximum-scale=2'
      }
    ]
  ],

  theme: defaultTheme({
    logo: '/images/logo.png',
    // 默认主题配置
    navbar: navbar,
    sidebar: sidebar
  })
}