使用 VuePress 构建站点

1npm init vuepress vuepress-site

 1mkdir vuepress-site && cd vuepress-site
 2# 初始化项目
 3npm init
 4# 安装 vuepress
 5npm install -D vuepress@next
 6# 安装打包工具和主题
 7npm i -D @vuepress/bundler-vite@next @vuepress/theme-default@next
 8# 创建 docs 文件夹和配置文件夹
 9mkdir docs && mkdir docs/.vuepress
10# 创建 VuePress 的配置文件
11touch docs/.vuepress/config.ts

1├─ docs
2│  ├─ .vuepress
3│  │  └─ config.ts
4│  └─ index.md
5├─ .gitignore
6└─ package.json

1{
2  "scripts": {
3    "docs:dev": "vuepress dev docs",
4    "docs:build": "vuepress build docs",
5  },
6  ...
7}

 1---
 2# 标记该页是主页
 3home: true
 4# 首页图片的 URL
 5heroImage: /image/logo.png
 6heroText: 首页标题，如果不设置，则默认使用站点 title
 7tagline: 首页标语，如果不设置，则默认使用站点 description
 8# 显示的按钮
 9actions:
10  - text: 开始 →
11    link: 相对于 docs 的文章链接，当然，你也可以放置一个 URL
12    type: primary
13  - text: 快速上手
14    link: 相对于 docs 的文章链接，当然，你也可以放置一个 URL
15    type: secondary
16# 复制官网的例子
17features:
18  - title: 简洁至上
19    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
20  - title: Vue 驱动
21    details: 享受 Vue 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
22  - title: 高性能
23    details: VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
24
25footer: 页脚
26# 是否允许页脚中使用 HTML 如果设置为 true ，那么 footer 会被作为 HTML 代码处理。
27footerHtml: false
28---

 1export default defineUserConfig({
 2    // 网站 title，首页缺失 heroText 默认使用这个
 3    title: "我的 VuePress 站点",
 4    // 网站 desc，首页缺失 tagline 默认使用这个
 5    description: "使用 vuepress2 搭建的小站点，会是什么效果呢？真令人期待！",
 6
 7    // 默认的打包工具
 8    bundler: viteBundler(),
 9    theme: defaultTheme(),
10})

 1export default defineUserConfig({
 2    // https://vuepress.vuejs.org/zh/guide/deployment.html#github-pages
 3    // base 选项与本地运行无关，只和部署有关
 4    base: "/repo/",
 5    // 本地启动时预览的端口，默认 8080，可以自己修改
 6    port: 8080,
 7
 8    // 网站 meta 信息
 9    // favicon
10    head: [["link", {rel: "icon", href: "/images/logo.png"}]],
11    title: "Title",
12    description: "Description",
13
14    bundler: viteBundler(),
15
16    // 主题配置
17    theme: defaultTheme({
18        // 也可以设置为一个 URL，例如：https://gitlab.com/foo/image.jpg
19        logo: "/image/logo.png",
20
21        // 仓库配置，可以是 github、gitee、gitlab 等，会自动识别
22        // GitHub 仓库，也可以设置为一个 URL，例如：https://gitlab.com/foo/bar
23        repo: "username/repo",
24        // 源文件所在分支
25        docsBranch: "main",
26        // 源文件所在的仓库的目录名称
27        docsDir: "docs",
28
29        // 替换一些英文的默认值 https://ecosystem.vuejs.press/zh/themes/default/locale.html#selectlanguagetext
30        // 默认值： "Edit this page"
31        editLinkText: "编辑本页",
32        // 默认值： "Last Updated"
33        lastUpdatedText: "最后修改",
34        // 默认值： "Contributors"
35        contributorsText: "贡献者",
36        // 默认值： "toggle color mode"
37        toggleColorMode: "昼夜模式切换",
38        // 默认值： "Back to home"
39        backToHome: "返回首页",
40        // 侧边栏配置，显示列表深度 1，包含 <h2>，默认值为 2 显示到 <h3> 层级
41        sidebarDepth: 1,
42
43        // 侧边栏显示内容
44        sidebar: [
45            {
46                // 大标题，相当于分组，children 中的文档都属于此分组，该标题默认不可点击
47                text: "指南",
48                // 该项配置 children 的文章目录是否折叠，默认为 false 即不折叠
49                // 为 true 时自动折叠，不可与 link 共存
50                collapsible: true,
51                children: [
52                    "/guide/index.md",
53                    "/guide/如何学好算法.md",
54                    "/guide/如何学好数据结构.md",
55                ],
56            },
57            {
58                // 只要设置了 link 选项，text 就可以有点击事件了，点击跳转 link 配置的路径
59                text: "进阶",
60                // 不可与 collapsible 共存
61                link: "/advanced/算法1.md",
62                children: [
63                    "/advanced/数据结构.md",
64                    "/advanced/算法1.md",
65                ],
66            },
67        ],
68    })
69})

 1├─ docs
 2│  ├─ .vuepress
 3│  │  └─ public
 4│  │  └─ config.js
 5│  ├─ guide
 6│  │  └─ index.md
 7│  │  └─ 如何学好算法.md
 8│  │  └─ 如何学好数据结构.md
 9│  ├─ advanced
10│  │  └─ 数据结构.md
11│  │  └─ 算法1.md
12│  └─ index.md
13├─ .gitignore
14└─ package.json

 1export default defineUserConfig({
 2
 3    head: [["link", {rel: "icon", href: "/images/logo.png"}]],
 4    title: "Title",
 5    description: "Description",
 6
 7    // 多语言配置，locales 为每种语言设置不同语言设计站点 meta 描述信息
 8    // 如果一个语言没有声明 lang, title, description 或者 head，VuePress 将会尝试使用顶层配置的对应值。
 9    // 如果每个语言都声明了这些值，那么顶层配置中的对应值可以被省略。
10    locales: {
11        // / 在 vuepress 中是特例，代表网站默认使用的语言配置
12        "/": {
13            lang: "zh",
14            title: "多语言配置——中文大标题",
15            description: "爆竹声中一岁除 春风送暖入屠苏",
16            head: []
17        },
18        // 推荐使用 / 结尾，否则导航进入时可能出现 404
19        "/en/": {
20            lang: "en",
21            title: "English Language Title",
22            description: "i dont speak english",
23            head: []
24        }
25        // 其它语言
26        ...
27    },
28
29    bundler: viteBundler(),
30
31    theme: defaultTheme({
32        // 也可以设置为一个 URL，例如：https://gitlab.com/foo/image.jpg
33        logo: "/image/logo.png",
34        // 仓库配置，可以是 github、gitee、gitlab 等，vuepress 会自动识别
35        // GitHub 仓库，也可以设置为一个 URL，例如：https://gitlab.com/foo/bar
36        repo: "username/repo",
37        // 仓库中源文件所在分支
38        docsBranch: "main",
39        // 仓库中源文件的所在目录
40        docsDir: "docs",
41        // 侧边栏配置，显示列表深度 1，包含 <h2>；默认值 2 <h3>
42        sidebarDepth: 1,
43
44        // 为不同语言配置不同的显示标签，对不同语言的用户更加友好。
45        // 这里 locales 配置需要根据网站的 locales 的键来配置
46        locales: {
47            // 中文配置
48            "/": {
49                selectLanguageText: "选择语言",
50                selectLanguageName: "简体中文",
51                // 替换一些英文的默认值
52                // 默认值： "Edit this page"
53                editLinkText: "修改此页",
54                // 默认值： "Last Updated"
55                lastUpdatedText: "最后修改",
56                // 默认值： "Contributors"
57                contributorsText: "贡献者",
58                // 默认值： "toggle color mode"
59                toggleColorMode: "昼夜模式切换",
60                // 默认值： "Back to home"
61                backToHome: "返回首页",
62                prev: "上一页",
63                next: "下一页",
64
65                // 侧边栏
66                sidebar: [
67                    {
68                        text: "指南",
69                        children: [
70                            "/guide/index.md",
71                            "/guide/如何学好算法.md",
72                            "/guide/如何学好数据结构.md",
73                        ],
74                    },
75                ]
76            },
77
78            // 英文配置
79            "/en/": {
80                selectLanguageName: "English",
81                sidebar: [
82                    {
83                        text: "Guide",
84                        children: [
85                            "/guide/index.md",
86                        ],
87                    },
88                ]
89            }
90            // other
91            ...
92        }
93    }),
94}

 1├─ docs
 2│  ├─ .vuepress
 3│  │  └─ public
 4│  │  └─ config.ts
 5│  ├─ en
 6│  │  └─ guide
 7│  │  │  └─ index.md
 8│  │  └─ index.md
 9│  ├─ guide
10│  │  └─ index.md
11│  │  └─ 如何学好算法.md
12│  │  └─ 如何学好数据结构.md
13│  ├─ advanced
14│  │  └─ 数据结构.md
15│  │  └─ 算法1.md
16│  └─ index.md
17├─ .gitignore
18└─ package.json