[JavaScript知识库]从 docsify 转战 vuePress2.0我经历了什么?（二）

前段时间,docsify 的cdn崩了，我翻了一下很久之前的笔记，打开贼慢不说，样式全没了。于是下定决心找个时间看看有什么好的文档工具重新弄一个，虽然都是几年前的笔记文档，但毕竟这些笔记见证了我的成长，不能丢。最终选定了vuePress2，下面将记录使用 vuePress2 的详细过程。

vuepress官方文档https://v2.vuepress.vuejs.org/zh/

使用 vuepress2.0 打造静态博客网站（二）

一. 配置页面

1. 执行上面的步骤后，docs目录下多了一个 .vuepress的文件夹，在这个文件夹下创建一个新的文件：config.js

自行配置以下信息,保存,并重新运行项目

import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  lang: 'zh-CN',
  title: 'zerojs-零技术',
  description: '这是zerojs-零技术的博客网站',
})

重新运行项目后,可以看到我们的配置已经生效了.

2. 在 docs 目录下新建写文章的目录

这里,我新建了两个文件夹以及两个 md 文件,(文件名自己取)

3. 配置首页

以下是我的首页配置代码,供参考

---   
home: true
heroImage: https://vuepress.vuejs.org/hero.png
actions:
  - text: 开始学习
    link: /guide/start.md
    type: primary
  - text: vue3
    link: /vue3/base
    type: secondary
features:
- title: 静态博客
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + vite 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress2.0 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright ? 2022 zerojs 
footerHtml: true
---

运行效果,完美!

点击开始学习,成功跳转

4. 配置顶部导航目录

以下是我的配置代码,供参考

import { defineUserConfig } from "vuepress";

import { defaultTheme } from "@vuepress/theme-default";

export default defineUserConfig({
  lang: "zh-CN",
  title: "zerojs-零技术",
  description: "这是zerojs-零技术的博客网站",
  theme: defaultTheme({
    navbar: [
      {
        text: "web",
        link: "/guide/start.md",
      },
      {
        text: "vue3",
        link: "/vue3/base.md",
      },
      {
        text: "Group",
        children: [
          {
            text: "分组",
            children: [{ text: "子项1", link: "/guide/start.md" },{ text: "子项2", link: "/vue3/base.md" }],
          },
        ],
      },
    ],
  // 侧边栏对象
    // 不同子路径下的页面会使用不同的侧边栏
    sidebar: {
      '/guide/': [
        {
          text: "指南",
          children: [{ text: "指南1", link: "/guide/start.md" },{ text: "指南2", link: "/vue3/base.md" }],
        },
      ],
      '/vue3/': [
        {
          text: "vue3基础",
          children: [{ text: "基础1", link: "/guide/start.md" },{ text: "基础2", link: "/vue3/base.md" }],
        },
      ],
    },

  }),
});

运行效果

二. 插件配置

先了解一下默认主题内置的插件有哪些

1. prismjs : 代码块代码高亮
2. nprogress : 切换到另一个页面时会展示进度条
3. medium-zoom : 图片提供可缩放的功能
4. external-link-icon : 该插件会为你 Markdown 内容中的外部链接添加一个图标
5. back-to-top : 返回顶部

1. 使用搜索插件

自行选择使用哪一个,我用的是 docsearch

npm i -D @vuepress/plugin-docsearch@next

在 config.js 中引入

部分代码

import { docsearchPlugin } from '@vuepress/plugin-docsearch'



  plugins: [
    docsearchPlugin({
      // 配置项
    }),
  ],

运行效果

完结

以上操作,我从 docsify 转战 vuePress2.0 重写文档的目的已经达到了. 剩下的骚操作有空再研究, 哪位大神有研究主题,好玩的插件等欢迎评论区交流!

线上预览: zerojs的个人博客

传送门

本项目源码地址
docsify教程 by zerojs
vuepress官方文档
docsify官方文档