升级到 Vuepress2.0.0-beta.61

从 vuepress2.0.0-beta.40 开始，vuepress 使用了新的 api 接口，意味着原来的配置文件也要进行修改才能使其正确运行。

快速上手

安装 vuepress
- 安装：mkdir vuepress2.0.0-beta.61 && cd vuepress2.0.0-beta.61 && yarn add -D vuepress@next
安装插件
- npm i -D @vuepress/plugin-container@next
- npm i -D @vuepress/plugin-docsearch@next
- npm i -D @vuepress/plugin-pwa@next
- npm install -d vuepress-plugin-anchor-right 项目地址
- yarn add -D vuepress-plugin-sitemap2
复制你的文档到新的 vuepress2.0.0-beta.61 目录中：
- docs 目录，但不要包含 .vuepress/{.cache,.temp,dist} 这三个目录
- deploy.sh 文件
- .gitignore 文件
- 如果有额外的 config 配置目录也要包含进去
package.json 文件添加内容

 "name": "vuepress-next",
  "version": "2.0.0.61",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },

vuepress 配置文件 config.js 内容如下：

点击查看 config.js 代码

const navConf = require('../../config/navConf.js')
import pluginConf from '../../config/pluginConf.js'
const sidebarConf = require('../../config/sidebarConf.js')
const headConf = require('../../config/headConf.js').default

import { defaultTheme } from '@vuepress/theme-default'

export default {
    lang: 'zh-CN',
    title: 'EchoXu Note',
    description: 'ENote 是一个记录 IT 知识点的文档生成器。IT 知识，文档管理，文档记录，文档生成器',
    // base: '/v2/',  // 部署时如果地址是：https://192.168.1.20/v2  这里的路径就要写为 /v2/ 如果是 / 就需要注释此项。
    
    head: headConf,

    plugins: pluginConf,
    
    theme: defaultTheme({
        logo: '/favicon.svg',

        docsDir: 'docs',

        navbar: navConf,

        sidebar: sidebarConf,
        sidebarDepth: 0,  //https://v2.vuepress.vuejs.org/zh/reference/default-theme/config.html#sidebardepth

        lastUpdatedText: '上次更新',
        contributorsText: '贡献者',

        tip: '提示',
        warning: '注意',
        danger: '警告',

        notFound: [
            '这里什么都没有',
            '我们怎么到这来了？',
            '这是一个 404 页面',
            '看起来我们进入了错误的链接',
            ],
        backToHome: '返回首页',

        toggleColorMode: '切换夜间模式',
        toggleSidebar: '切换侧边栏',

        themePlugins: {
            externalLinkIcon: false,
        },
        markdown: {
            headers: {
                level: [2,3],
            },
            toc: {
                level: [2,3,4,5],
            },
            code: {
                lineNumbers: false
            },
                    
        }, 
    }),
}

plugin.js 配置文件内容：

点击查看 plugin.js 代码

// import rightAnchorPlugin from 'vuepress-plugin-right-anchor'; // 右侧悬浮导航，不适用 beta0.61

// import searchPlugin from '@vuepress/plugin-search';  // 如果使用默认的搜索插件需要取消注释此行

import containerPlugin  from '@vuepress/plugin-container';
import pwaPlugin  from '@vuepress/plugin-pwa';
import docsearchPlugin  from '@vuepress/plugin-docsearch';
import { sitemapPlugin } from "vuepress-plugin-sitemap2";
import secretKeyConf from './secretKeyConf';
import vuepressPluginAnchorRight from 'vuepress-plugin-anchor-right';

export default [
    [vuepressPluginAnchorRight()],

    docsearchPlugin({
        apiKey: secretKeyConf.apiKey,
        appId: secretKeyConf.appId,
        indexName: secretKeyConf.indexName,
        locales: {
          '/': {
            placeholder: '搜索文档',
            translations: {
              button: {
                buttonText: '搜索文档',
              },
            },
          },
          '/zh/': {
            placeholder: '搜索文档',
            translations: {
              button: {
                buttonText: '搜索文档',
              },
            },
          },
        },
    }),

	sitemapPlugin({
      hostname: 'https://www.echoxu.cn',
    }),

    pwaPlugin({
        skipWaiting: true,
    }),

    containerPlugin({
        type: 'col2left',
    }),
    containerPlugin(
    {
        type: 'col2right',
    }),
    containerPlugin(
    {
        type: 'col2leftgray',
    }),
    containerPlugin(
    {
        type: 'col2rightbg',
    }),
    containerPlugin(
    {
        type: 'col2leftbgcode',
    }),
    containerPlugin(
    {
        type: 'col2rightbgcode',
    }),
    containerPlugin(
    {
        type: 'collapselist',
        before: (info) => `<details class="custom-container collapselist">${info ? `<summary>${info}</summary>` : ''}\n`,
        after: () => '</details>\n',
    }), 
    // titlenobg 用来取消背景色
    containerPlugin({
        type: 'col2leftnobg',
        before: (info) =>
        `<div class="custom-container col2leftnobg">${info ? `<p class="custom-container-title titlenobg">${info}</p>` : ''}\n`,
        after: () => '</div>\n',
    }),
    containerPlugin({
        type: 'col2rightnobg',
        before: (info) =>
        `<div class="custom-container col2rightnobg">${info ? `<p class="custom-container-title titlenobg">${info}</p>` : ''}\n`,
        after: () => '</div>\n',
    }),
    containerPlugin(
    {
        type: 'highlight-blue',
    }),
    
    containerPlugin({
        type: 'highlight-orange',
    }),
    containerPlugin({
        type: 'highlight-red',
    }),
    containerPlugin({
        type: 'highlight-green',
    }),
    containerPlugin({
        type: 'highlight-purple',
    }),
    containerPlugin({
        type: 'highlight-gray',
    }),
    containerPlugin({
        type: 'img-grid',
    }),
    containerPlugin({
        type: 'content-flex',
    }),

    // 右侧悬浮导航，不适用 beta0.61 https://github.com/xuekai-china/vuepress-plugin-right-anchor
    // rightAnchorPlugin({
    //     customClass: 'customClass',
    //     showDepth: 4,
    //     ignore: [
    //         '/'
    //     ],
    //     expand: {
    //         trigger: 'click',
    //         clickModeDefaultOpen: true
    //     }
    // }),

    // vuepress 默认的搜索插件
    // searchPlugin({
    //     locales: {
    //         '/': {
    //             placeholder: 'Search',
    //         },
    //         '/zh/': {
    //             placeholder: '搜索',
    //         },
    //         maxSuggestions: 8,
    //     },
    // }),
    
]

FAQ

网站托管在阿里云 oss 后, echoxu.cn 如何跳转到 https://www.echoxu.cn ？
- 打开阿里云云解析，添加一条解析记录，内容为：
- @ 显性URL 默认 https://www.echoxu.cn
echoxu.cn 每次刷新都跳转到主页以及页面内容混乱
- 开启 oss 静态网站子目录，操作路径为：数据管理-静态页面-子目录首页