Vuepress 笔记

前言

• 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
• 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
• VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

官方版本搭建

略过

VuePress Theme Hope主题直接安装

在 [dir] 文件夹内新建 vuepress-theme-hope 项目:

pnpm

pnpm create vuepress-theme-hope [dir]

yarn

yarn create vuepress-theme-hope [dir]

npm

npm init vuepress-theme-hope [dir]

适用于使用官方版本安装同时需要切换为 vuepress-theme-hope主题用户安装方式，将 vuepress-theme-hope 作为文档构建器添加到现有项目中，请在项目根目录中运行以下命令:

pnpm

pnpm create vuepress-theme-hope add [dir]

yarn

yarn create vuepress-theme-hope add [dir]

npm

npm init vuepress-theme-hope add [dir]

常用命令

• vuepress dev [dir] 会启动一个开发服务器，以便让你在本地开发你的 VuePress 站点。
• vuepress build [dir] 会将你的 VuePress 站点构建成静态文件，以便你进行后续部署。

注

使用模板

如果你在使用 VuePress Theme Hope 模板，你可以在 package.json 中发现下列三个命令:

{
  "scripts": {
    "docs:build": "vuepress build src",
    "docs:clean-dev": "vuepress dev src --clean-cache",
    "docs:dev": "vuepress dev src"
  }
}

这意味着你可以使用:

npm run docs:dev 启动开发服务器
npm run docs:build 构建项目并输出
npm run docs:clean-dev 清除缓存并启动开发服务器

升级版本

如果你需要升级主题和 VuePress 版本，请执行以下命令:

npx vp-update

"use strict";

const shared = require("@mdit-vue/shared");

const headersPlugin = (
  md,
  {
    level = [1,2,3,3,4,5],
    shouldAllowNested = false,
    slugify = shared.slugify,
    format,
  } = {}
) => {
  const render = md.renderer.render.bind(md.renderer);
  md.renderer.render = (tokens, options, env) => {
    env.headers = shared.resolveHeadersFromTokens(tokens, {
      level,
      shouldAllowHtml: false,
      shouldAllowNested,
      shouldEscapeText: false,
      slugify,
      format,
    });
    return render(tokens, options, env);
  };
};

exports.headersPlugin = headersPlugin;