Northboat Dock

Vuepress

5/3/2021 WheelFrontEnd

安装和初始化

直接用npm全局安装vuepress（需要node环境和npm支持）

npm install -g vuepress
1

创建一个文件夹作为整本书的项目目录并初始化项目

mkdir blog_vuepress
cd blog_vuepress
npm init -y
1
2
3

在项目目录创建docs目录存放博客书籍内容

mkdir docs
1

在docs目录下创建README.md 并手写首页内容

---
home: true

//主页logo
heroImage: /logo.jpg

//按钮连接
actionText: 快速上手 →
actionLink: /zh/guide/

//简介
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。

//脚标
footer: Created by NorthBoat
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

配置

核心配置

在docs目录下创建 .vuepress 目录用于存放配置

cd docs
mkdir .vuepress
1
2

新建中配置文件 config.js

cd .vuepress
touch config.js
1
2

编写 config.js

module.exports = {
    //主页标题
    title: '知码学院',
    //标题描述
    description: '君哥带你上王者',
    dest: './dist',
    //本地开放端口
    port: '7777',
    head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        //导航栏
        nav: [{
            text: '懵逼指南', link: '/guide/'
        }],
        //侧边栏
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsable: true,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'知码学院',
                  collapsable: true,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "有新的内容.",
                buttonText: '更新'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上编辑此页 ！'
    }
}
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

运行blog

vuepress dev docs
1

导航栏配置

在 config.js 的同级目录下创建nav.js，将config.js中nav项修改为

nav: require("./nav.js"),
1

即添加导航栏依赖，再配置nav.js文件

//主管控导航栏

module.exports = [
	{
        //栏标题
		text: '啊哈', link: '/guide/'
	},
    {
        text: 'blog',
        //栏下的副标题
        //此时主标题无法链接(link)
		items: [
			{text: 'Hexo', link: '/blog/hexo/'},
			{text: 'VuePress', link: '/blog/vuepress/'}
		]
    },
    {
        text: 'program',
		items: [
            {text: 'C++', link: '/programe/c++/'},
            {text: 'Java', link: '/programe/java/'},
			{text: 'Python', link: '/programe/python/'}
        ]
    },
	{
		text: 'docker',
		items: [
			{text: 'docker部署', link: '/docker/deployment/'},
			{text: 'docker使用', link: '/docker/usage/'},
			{text: 'docker-java', link: '/docker/docker-java/'}
		]
	},
	{
		text: 'LeetCode',
		items: [
			{text: '力扣题单', link: '/leetcode/leetcode题单.md'},
			{text: '刷题笔记', link: '/leetcode/leetcode刷题笔记.md'},
			{text: '动态规划', link: '/leetcode/动态规划.md'}
		]
	}
]
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

侧边栏配置

在.vuepress下创建sidebar.js，修改config.js中sidebar依赖

sidebar: require("./sidebar.js"),
1

配置.vuepress下的sidebar.js文件，在这里实现对各个侧边栏的主管控，即依赖到各个目录下的sidebar.js文件

//对侧边栏的主管控
//每句最后都要加逗号
module.exports = {
	'/guide/': require('../guide/sidebar'),
	'/blog/hexo/': require('../blog/hexo/sidebar'),
	'/blog/vuepress/': require('../blog/vuepress/sidebar')，
}
1
2
3
4
5
6
7

如 ../blog/vuepress/sidebar.js（../ 表示上一级目录，当不写目录开头时，默认为在 .vuepress 的同级目录下）

//blog.vuepress的侧边栏
module.exports = [
	{
		title: 'blog_vuepress',
		collapsable: false,
		children: [
			'/blog/hexo/notes/vuepress',
		]
	}
]
1
2
3
4
5
6
7
8
9
10

静态资源

静态资源（图片、js等）默认读取位置为.vuepress/public/ 文件夹下，在docs的README中改写配置

---
home: true
//主页图片
heroImage: /imgae/logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: Created by NorthBoat 2021/5/3
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

部署

远端部署

配置核心配置文件config.js

//生成静态网页文件夹（./为docs所在目录下）
dest: './dist',
//base仓库名为github上仓库名称（注意斜杠）
base: '/Blog',
1
2
3
4

在docs所在目录下配置.gitignore文件

node_modules/
docs/.vuepress/theme
package-lock.json
1
2
3

在package.json中添加脚本

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

手写部署脚本deploy.sh

#!/usr/bin/env sh

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

# 生成静态文件
npm run docs:build

# 进入生成的文件夹（该文件夹名称路径配置在config.js中）
cd dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

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

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:NorthBoat/Blog.git master

cd ../
#删除目标文件夹
rm -rf dist
#删除临时缓存文件
rm -rf node_modules
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
27
28
29

运行脚本即可

踩坑指南

记得部署 config 文件中的 base

上传 .md 文件时，要保证文本中（不包括代码块）没有html标签，不然将导致网页body无法显示

在以<img>形式引用的图片后直接接$$公式会造成乱码

Reco

午后的官方指导 (opens new window)

Color

修改主题颜色：reco默认的主题颜色为绿色

在,vurepess目录下新建styles目录，新建文件palette.styl，reco将自动识别并渲染进网页

// 默认值
$accentColor = #9999FF                      // 主题颜色
$textColor = #2c3e50                        // 文本颜色
$borderColor = #eaecef                      // 边框线颜色
$codeBgColor = #282c34                      // 代码块背景色
$backgroundColor = #ffffff                  // 悬浮块背景色



//示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
  opacity: 1
}

.navbar > .links{
  background: #FFC8B4
}

.navbar{
  background: #FFC8B4
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这个文件夹下所有的.styl都将被识别，在里面可以编写自己的css代码对博客进行个性化定制，所需标签的名字可以在网页中选择并查看

我这里是将主题颜色设置为蓝紫色，将导航栏设置为粉橙色

在config.js中配置这一行，博客右侧将根据markdown的标题自动生成子侧边栏

"themeConfig": {
    "subSidebar": 'auto',//在所有页面中启用自动生成子侧边栏，原 sidebar 仍然兼容
}
1
2
3

Math

安装依赖

npm i markdown-it-texmath
npm i katex
1
2

修改 config.js

markdown: {
  lineNumbers: true,
  anchor: { permalink: false },
  toc: {includeLevel: [1,2]},
  extendMarkdown: md => {
    md.use(require('markdown-it-texmath'))
  }
}
1
2
3
4
5
6
7
8

head 中添加样式

['link', {rel:'stylesheet', href:'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css'}],
//['link', {rel:'stylesheet', href:'https://gitcdn.xyz/cdn/goessner/markdown-it-texmath/master/texmath.css'}],
//['script', {src: 'https://github.com/markdown-it/markdown-it/blob/master/bin/markdown-it.js'}],
//['script', {src: 'https://gitcdn.xyz/cdn/goessner/markdown-it-texmath/master/texmath.js'}],
['script', {src: 'https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js'}],
1
2
3
4
5
Last Updated: 6/18/2024, 11:41:37 AM

Slidev

妖风过海
刘森