环境为：windows。
1 安装下载
（1）安装nodesjs
nodejs 下载，建议安装 nodejs 17 之前的版本，亲测使用 nodejs 18 会有错误：digital envelope routines::unsupported。（2023-03-10）
（2）安装 vuepress
官方不再推荐全局安装，但是我把 vuepress 安装为本地依赖总是有问题，最终还是安装全局依赖。
打开终端，运行以下命令即可安装：
npm install -g vuepress
2 目录结构
创建目录，并在目录打开终端对目录进行初始化：
npm init -y
推荐的目录结构如下：
.
├── docs/
│ ├── .vuepress/
| | |
│ │ ├── public/
│ │ ├── config.js
│ │
│ │
│ ├── README.md
│
└── package.json
我的目录结构如下：
docs/
│ guide.md
│ README.md
│
├─.vuepress
│ │ config.js
│ │
│ └─public
│ │ avatar.jpg
│ │ favicon.ico
│ │
│ ├─c
│ │ 64位内存布局.jpg
│ │ 内存映像.png
│ │ 栈增长.png
│ │
│ └─dist
├─c
│ │ c-style.md
│ │ ccollections.md
│ │ learn-c.md
│ │ README.md
│ │
│ └─kandrc
│ kandrc01.md
│ kandrc02.md
│ README.md
│
├─data-structure
│ index.md
│ README.md
│
├─inbox
│ how-to-use-vuepress.md
│ README.md
│
└─Linux
learn-linux.md
linux-collections.md
README.md
config.js
其中：
docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/public: 静态资源目录。。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
修改 pakage.json 内容：
{
"name": "notes",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue-template-compiler": "^2.7.14"
}
}
页面路由
| 文件相对路径 | 页面路由地址 |
|---|---|
/README.md |
/ |
C语言/README.md |
/C语言/ |
C语言/基础知识.md |
/C语言/基础知识.html |
所以主页面的内容就写在 docs/README.md:
---
home: true
heroImage: /favicon.ico
actionText: open
actionLink: /guide/
lang: zh-CN
---
\`\`\`c {5}
int main(int argc, char *argv[])
{
while(!is_death(me)) {
reading();
studying();
coding();
sharing();
}
return EXIT_SUCCESS;
}
\`\`\`
::: slot footer
MIT Licensed | Copyright © 2023 [shachi](https://chunni98.github.io)
:::
3 配置
config.js 内是全局配置：
module.exports = {
// 站点标题
title: 'CS Wiki',
// 站点描述
description: 'shachi 的 CS 知识库',
// 输出根目录
dest: './dist',
// 站点目录
base: '/cs-wiki/',
// Markdown 代码块行号
markdown: {
lineNumbers: true
},
// 默认主题的配置
themeConfig: {
// 导航栏的图标
logo: '/favicon.ico',
// 导航栏的链接
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'C', link: '/c/' },
{ text: 'Linux', link: '/linux/' },
{
text: '计算机基础',
// ariaLabel: 'Language Menu',
items: [
{
text: '理论', items: [
{ text: '数据结构', link: '/data-structure/' },
{ text: '计算机网络', link: '#' },
{ text: '计算机组成原理', link: '#' },
{ text: '操作系统', link: '#' },
{ text: '数据库', link: '#' },
]
},
{
text: '工具', items: [
{ text: 'gcc', link: '#' },
{ text: 'gdb', link: '#' },
{ text: 'makefile', link: '#' },
{ text: 'shell', link: '#' },
{ text: '正则表达式', link: '#' },
{ text: 'git', link: '#' },
{ text: 'python', link: '#' },
]
}
]
},
{ text: '嵌入式', items:[
{ text: 'x86汇编', link: '#' },
]
},
{ text: 'Blog', link: 'https://chunni98.github.io' },
],
// 侧边栏配置
//sidebar: 'auto', // 自动生成仅包含当前页面的侧边栏
sidebar: {
'/c/':[
{
title: 'inbox', // 组名
collapsable: false, // 不可折叠
children: [
'/c/c-style',
'learn-c',
'ccollections'
],
},
{
title: 'K&R C', // 组名
path: '/c/kandrc/',
collapsable: true,
children: [
'/c/kandrc/kandrc01',
'/c/kandrc/kandrc02'
],
}
],
'/Linux/': [
'',
'learn-linux',
'linux-collections'
]
},
lastUpdated: '最后更新',// 最后更新的时间，基于 git
// 上/下一篇链接
nextLinks: true,
prevLinks: true,
// 页面滚动
smoothScroll: true
}
}
3 运行和编译
在目录下打开终端：
# 运行输入这个命令
npm run docs:dev
# 编译输入这个命令
npm run docs:build
运行后可在 localhost:8080 预览，vuepress 支持热重载。
运行命令可能出现错误：Error: Cannot find module ‘vue-template-compiler’
在目录下运行命令: npm install vue-template-compiler 安装缺失的包即可。
最终效果如下：
Snipaste_2023-03-11_12-11-04.png
