升级到 vuepress2.49

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

---

配置文件

请将如下代码放至到 ./vuepress 目录下：

点击查看 config.js

const navConf = require('../../config/navConf.js')
const pluginConf = require('../../config/pluginConf.js')
const sidebarConf = require('../../config/sidebarConf.js')
const headConf = require('../../config/headConf.js')
// const secretKeyConf = require('../../config/secretKeyConf')

const { defaultTheme } = require('vuepress')

module.exports = {
    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,

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

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

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

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

        themePlugins: {
            externalLinkIcon: false,
        },
        
    }),

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

}

请将插件配置文件放至到 /config 目录下：

点击查看 pluginConf.js

const { rightAnchorPlugin } = require('vuepress-plugin-right-anchor')
//const { searchPlugin } = require('@vuepress/plugin-search')
const { containerPlugin } = require('@vuepress/plugin-container')
const { pwaPlugin } = require('@vuepress/plugin-pwa')
const { docsearchPlugin } = require('@vuepress/plugin-docsearch')
const { sitemapPlugin } = require("vuepress-plugin-sitemap2");

module.exports = [
    rightAnchorPlugin({
        customClass: 'customClass',
        showDepth: 4,
        ignore: [
            '/'
        ],
        expand: {
            trigger: 'click',
            clickModeDefaultOpen: true
        }
    }),
    // searchPlugin({
    //     locales: {
    //         '/': {
    //             placeholder: 'Search',
    //         },
    //         '/zh/': {
    //             placeholder: '搜索',
    //         },
    //         maxSuggestions: 8,
    //     },
    // }),
    docsearchPlugin({
        apiKey: '你的 api key',
        appId: '你的 appID',
        indexName: '你的 index',
        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',
    }),
]

---

升级至 2.0.0-beta.49

下载插件

• 下载 vuepress-plugin-right-anchor，此插件已支持 vuepress-2.0.0-beta.49，只是它的 package.json 中版本指定为 2.0.0-beta.45
• unzip -o vuepress-plugin-right-anchor-2.1.0-rc.2.zip

安装悬浮目录插件

• cd vuepress-plugin-right-anchor-2.1.0-rc.2
• 创建新的 vuepress 目录：mkdir vuepress
• 修改插件的 package.json 使其支持 vuepress2.0.0-beta.49，需要修改两处
  • sed -i 's/2.0.0-beta.45/2.0.0-beta.49/g' example/package.json
  • sed -i 's/2.0.0-beta.45/2.0.0-beta.49/g' package.json
• 删除 vuepress-plugin-right-anchor-2.1.0-rc.2 下的 yarn.lock，防止报错，rm -rf yarn.lock
• 在 vuepress-plugin-right-anchor-2.1.0-rc.2 下执行：yarn install
• 复制所需的文件：cp example/package.json vuepress/
• 将 vuepress-plugin-right-anchor-2.1.0-rc.2/package.json 中 example 全部替换为 vuepress：sed -i 's/example/vuepress/g' package.json
• 将插件安装到 vuepress 目录：yarn build:vuepress

安装最新版本的 vuepress

• 为新的 vuepress 安装依赖：cd vuepress && yarn install
• 复制你的文档到新的 vuepress 中：
  • 进入原来的 vuepress 目录然后复制docs 下除了 .vuepress 目录的所有内容到新的 vuepress 下的 docs 目录
  • 进入原来的 vuepress 目录然后复制 docs/.vuepress 下的 styles、public、config.js 到新的 vuepress/docs.vuepress 目录下，点我查看配置文件，这里一定不要复制 .cache 和 .temp 目录，dist 目录也不要复制
  • 进入原来的 vuepress 目录然后复制 config、deploy.sh、.gitignore
  • 如有其它内容也要复制进去，我这里有如下文件需要复制：getmdlinkAfter.txt、getmdlinkBefore.txt、getmdLink.sh、images、imgbak、uploadQN-linux.sh
• 安装需要的插件，插件是否启用相关设置

# 如果使用默认的搜索请使用：@vuepress/plugin-search@2.0.0-beta.49
yarn add -D @vuepress/plugin-docsearch@2.0.0-beta.49
yarn add -D @vuepress/plugin-container@next
yarn add -D @vuepress/plugin-pwa@2.0.0-beta.49
yarn add -D vuepress-plugin-sitemap2

• 使用新的 vuepress
  • 将 vuepress 目录移动到 ~/Programe 中
  • 运行：cd vuepress && yarn docs:dev
• 部署时需要修改 deploy.sh 中的 vuepress 版本号为 vuepress2.0.0-beta.49

---

FAQ

问：@vuepress/plugin-search: Uncaught (in promise) Error: useRouteLocale() is called without provider.

• https://github.com/vuejs/vuepress/issues/3040