将网站从 Vuepress v1 迁移至 v2

因 vuepress v1 即将停止更新且 v2 和 vitepress 有着更好的性能，故计划进行迁移。

现在的 vuepress-next (v2) 是社区项目，而 vitepress 为官方项目。但是 vuepress 的社区主题资源比较多，可以进行丰富的自定义，所以决定迁移至 vuepreess-next。

1. 安装 vuepress-theme-hope

这里采用主题Vuepress-theme-hope。

新建项目：

$ pnpm create vuepress-theme-hope [dir]

按照提示进行安装，结束后可直接启动并访问localhost:8080 查看初始项目。

2. 修改默认路径

项目多语言配置中，英文默认路径为/, 若需要默认路径为中文，则修改配置文件 theme.ts:

{
  //  ...
    locales: {
    "/en/": {
      // navbar
      navbar: enNavbar,

      // sidebar
      sidebar: enSidebar,

      displayFooter: true,

    },

    /**
     * Chinese locale config
     */
    "/": {
      // navbar
      navbar: zhNavbar,

      // sidebar
      sidebar: zhSidebar,

      displayFooter: true,

    },
  },
   //   ...
}

3. 导航栏和侧边栏

将文档迁移过来之后，需要配置导航栏和侧边栏：

导航栏 :navbar/zh.ts

import { navbar } from "vuepress-theme-hope";

export const zhNavbar = navbar([
  "/",
  { text: "笔记", icon: "article", link: "/note/" },
  { text: "Blog", icon: "blog", link: "/blog/" },
  { text: "Leet Code", icon: "code", link: "/leetcode/" },
  { text: "Cheat Sheet", icon: "exercise", link: "/cheatsheet/" },
  { text: "读书笔记", icon: "file", link: "/reading/" },
  { text: "语言笔记", icon: "language", link: "/lang/" },
  { text: "工具", icon: "tool", link: "/tool/" },
  { text: "To Do", icon: "enum", link: "/todo/" },
  { text: "面试", icon: "ask", link: "/interview/" },
  { text: "关于", icon: "info", link: "/about-me" },
]);

在点击导航栏后，页面默认加载对应文件夹下的README.md。

侧边栏: sidebar/zh.ts

import { sidebar } from 'vuepress-theme-hope';

export const zhSidebar = sidebar({
  // note
  '/note/': [
    { text: 'Golang', link: '/note/golang/' },
    { text: 'Docker', link: '/note/docker/' },
   // ...
  ],

  // note sub sidebar
  '/note/golang/': 'structure',
  '/note/docker/': 'structure',
  // ...
});

• path: [sidebar]的形式可以按照访问路径给侧边栏分组，上例中点击笔记之后就会加载对应的侧边栏。
• path: 'structure'：会根据文件夹结构自动生成侧边栏。

4. 配置评论功能

这里选择了 Waline, 也可以选择自己喜欢的服务，详见 评论。

5. 配置搜索功能

这里选用@vuepress/plugin-docsearch, 也可选择自己喜欢的服务，详见 搜索.

Reference

1. Vuepress-theme-hope Docs
2. Vuepress Docs