# VuePress 笔记

# 1. 安装配置

环境
- node v12.14.1
- npm 6.13.4
安装 VuePress
```
# 安装
npm install -g vuepress  # 可以使用 cnpm
```
1
2
如果 back-to-top 插件出现问题，尝试本地安装 vuepress，不要用-g全局

# 2. 创建项目

项目启动
```
npm run dev
```
1

推送到 github

deploy.sh 文件配置

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

echo "*** buid complete ***"

# 进入生成的文件夹
cd docs/.vuepress/dist

echo "*** start push ***"

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io，-f 强制推送，选择性使用
git push -f https://gitee.com/hoppou/hoppou master
git push -f https://github.com/alternativedestiny/alternativedestiny.github.io master

echo "*** push complete ***"
sleep 5s  # 避免窗口立即关闭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

执行推送
```
npm run deploy
```
1

# 3. 自动导航栏和侧边栏

文件目录

vuepress_project/
    |_docs/
        |_.vuepress/
            |_config.js
        |_pages/
            |_Python/
                |_Python-01-环境_Env.md

1
2
3
4
5
6
7

源码：可以直接放在 config.js 文件，也可以单独放到一个 js 文件中然后导入。

const fs = require('fs');

// 自动获取侧边栏
function getSideBar(folder) {
    // 只能用绝对路径
    path = 'D:/PersonalProject/vue_press/docs/pages/' + folder + '/';
    let file_list = fs.readdirSync(path);
    for (let i = 0; i < file_list.length; i++) {
        file_list[i] = file_list[i].slice(0, -3);
    }
    return file_list;
}

// 自动获取导航栏
function getNav(folder) {
    path = 'D:/PersonalProject/vue_press/docs/pages/' + folder + '/';
    let file_list = fs.readdirSync(path);
    let nav_text = [];
    for (let i = 0; i < file_list.length; i++) {
        nav_text.push({
            text: file_list[i].slice(0, -3),
            link: '/pages/' + folder + '/' + file_list[i].slice(0, -3)
            });
    }
    return nav_text;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

使用：在 config.js 文件中设置 nav 和 sidebar

module.exports = {
    ......
    themeConfig: {
        ......
        nav: [
            {
                text: 'Python',
                items: getNav('Python')
            },
        ],
        sidebar: {
            '/pages/Python/': getSideBar('Python'),
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4. 调整显示宽度

修改 docs->styles->palette.styl 文件，增加如下内容

// 显示宽度由百分比调整，根据需求修改
$contentWidth = 80%

1
2

# 5. Gitalk

# 6. 参考

← Vue3 学习笔记 Vue 学习笔记 →