VitePress

VuePress   VitePress

VuePress、VitePress 是静态网站生成器（SSG, Static Site Gennerator）便捷生成静态网站。 基于单页应用程序（SPA, Single Page Application）理念。提供导航功能使其快速响应及便捷切换。 支持 Markdown 格式文档生成相应 HTML 文件。 可用于构建文档、博客和其他静态网站。

VuePress、VitePress 由 Vue团队共同维护；后续，Vue 团队将重点放在 VitePress。（推荐使用）

v	component
VuePress1	基于Vue 2、 webpack
VuePress2	支持Vue 3 、Vite
VitePress	基于Vue 3 、Vite

首页内容页

QuickStart

required: node.js 18+

1. 创建项目根目录

mkdir /path/to/project && cd project

2. 添加vitepress模块

npm add -D vitepress

3. 初始化

npx vitepress init

4. 需求选择

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme + Customization
│
◇  Use TypeScript for config and theme files?
│  No
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

5. dev 模式

npm run docs:dev

文件结构

├── docs
│   ├── .vitepress
│   │   ├── cache
│   │   ├── config.mjs
│   │   ├── latex.mjs
│   │   └── theme
│   │       ├── custom.css
│   │       ├── index.js
│   │       └── style.css
│   ├── api-examples.md
│   ├── markdown-examples.md
│   ├── example
│   │   └── doc.md
│   └── index.md (home page)
├── node_modules
└── package.json

route

export default defineConfig({
	// 顶部导航
	nav: [
		{  
	        text: 'L1 title',  
	        items: [{text: 'example doc', link: '/example/doc'}]
	    }
	],
	// 侧边导航
	sidebar: [  
	    {  
	        text: 'L1 title',  
	        items: [{text: 'example doc', link: '/example/doc'}]
	    }
    ]
});

LaTex

方法一

• 添加模块

$ npm add markdown-it-mathjax3

• 配置 .vitepress/latex.js

import mathjax3 from 'markdown-it-mathjax3';  
  
const customElements = [  
    'mjx-container',  
    'mjx-assistive-mml',  
    'math',  
    'maction',  
    'maligngroup',  
    'malignmark',  
    'menclose',  
    'merror',  
    'mfenced',  
    'mfrac',  
    'mi',  
    'mlongdiv',  
    'mmultiscripts',  
    'mn',  
    'mo',  
    'mover',  
    'mpadded',  
    'mphantom',  
    'mroot',  
    'mrow',  
    'ms',  
    'mscarries',  
    'mscarry',  
    'mscarries',  
    'msgroup',  
    'mstack',  
    'mlongdiv',  
    'msline',  
    'mstack',  
    'mspace',  
    'msqrt',  
    'msrow',  
    'mstack',  
    'mstack',  
    'mstyle',  
    'msub',  
    'msup',  
    'msubsup',  
    'mtable',  
    'mtd',  
    'mtext',  
    'mtr',  
    'munder',  
    'munderover',  
    'semantics',  
    'math',  
    'mi',  
    'mn',  
    'mo',  
    'ms',  
    'mspace',  
    'mtext',  
    'menclose',  
    'merror',  
    'mfenced',  
    'mfrac',  
    'mpadded',  
    'mphantom',  
    'mroot',  
    'mrow',  
    'msqrt',  
    'mstyle',  
    'mmultiscripts',  
    'mover',  
    'mprescripts',  
    'msub',  
    'msubsup',  
    'msup',  
    'munder',  
    'munderover',  
    'none',  
    'maligngroup',  
    'malignmark',  
    'mtable',  
    'mtd',  
    'mtr',  
    'mlongdiv',  
    'mscarries',  
    'mscarry',  
    'msgroup',  
    'msline',  
    'msrow',  
    'mstack',  
    'maction',  
    'semantics',  
    'annotation',  
];  
  
export const LaTex_CONF = {  
    markdown: {  
        config: (md) => {  
            md.use(mathjax3)  
        }  
    },  
    vue: {  
        template: {  
            compilerOptions: {  
                isCustomElement: (tag) => customElements.includes(tag)  
            }  
        }  
    }  
}

• 引用配置

import {defineConfig} from 'vitepress'  
import {LaTex_CONF} from './latex.mjs';

export default defineConfig({  
    ...LaTex_CONF,
}

方法二

• 添加模块

$ npm add markdown-it-mathjax3

• 配置

export default defineConfig({  
    markdown: {  
        math: true
    },
})

参考

VitePress之LaTeX语法支持

https://github.com/tani/markdown-it-mathjax3

https://vitepress.dev/zh/guide/markdown#math-equations

mermaind

• 安装

$ npm install vitepress-plugin-mermaind mermaid

• 配置

// .vitepress/config.js
import { withMermaid } from "vitepress-plugin-mermaid";

export default withMermaid({
    // your existing vitepress config...
    // optionally, you can pass MermaidConfig
    mermaid: {
      // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
    },
    // optionally set additional config for plugin itself with MermaidPluginConfig
    mermaidPlugin: {
      class: "mermaid my-class", // set additional css classes for parent container 
    },
});

参考

https://emersonbottero.github.io/vitepress-plugin-mermaid/

https://emersonbottero.github.io/vitepress-plugin-mermaid/guide/getting-started.html

https://mermaid.nodejs.cn/