不使用Hexo的原因
主要还是自己水平太菜了，想快速发布博客并方便自己使用，但是第三方模板不配有侧边栏和本地搜索，自由度太高，难以驾驭。
基础搭建
本文基于Windows系统，使用vuepress-theme-reco主题进行配置，代码块第一行表示写入的文件
准备材料
- npm
- Gitee仓库，且已配置SSH公钥
本地搭建
- 项目初始化。
新建文件夹用于存放博客：D:\Blog\Test，在当前目录下打开cmd终端：
# cmd
npm init # 回车表示确认
npm install -D vuepress
mkdir docs && echo '# TEST' > docs/README.md # 创建首页展示页，存放于`\docs`目录下
vuepress dev docs # 查看初始效果
初始效果
- 右侧的搜索框是可用的，默认主体已集成了本地搜索功能
-
docs目录下的README.md表示主页展示
务必记住文件路径对应的路由，以后出现链接进入404页面的问题，通常是由于文件夹下没有
README.md文件
Vuepress默认路由
我们将vuepress dev docs集成在package.json脚本中，build用于生成page部署的静态文件，也一并写好
# package.json
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
以后本地查看为npm run dev，静态文件生成npm run build
- 修改配置
安装vuepress-theme-reco主题：
# cmd
npm install vuepress-theme-reco --save-dev
在config.js中修改主题：
# cmd
cd docs && mkdir .vuepress
cd .vuepress && cd.> config.js
打开config.js并写入：
# config.js
module.exports = {
theme: 'reco'
}
查看本地效果npm run dev：
reco主题
- 多了暗黑模式调节等细节
- 配置首页，修改Front Matter
在docs\.vuepress目录下新建public目录，放入sunset.jpg图片（自定义），其他需要图片路径的地方也这样操作。在docs\README.md的顶部添加：
---
home: true # 展示首页
heroImage: /sunset.jpg # 正中间的头像
heroImageStyle: { # 图片调整
maxHeight: '200px',
display: block,
margin: '6rem auto 1.5rem',
borderRadius: '50%',
boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
}
heroText: Lambda Go # 标题
# tagline: 路漫漫其修远兮，吾将上下而求索
# bgImage: '/bg.png'
bgImageStyle: { # 首页背景图片高度
height: '350px'
}
---
首页配置
- 设置导航栏
注意是在config.js的module.exports中进行修改！
# config.js
module.exports = {
themeConfig: {
logo: '/home.png', // 顶端导航图标
nav: [
{ text: 'Home', link: '/', icon: 'reco-home' },
{ text: 'TimeLine', link: '/timeline/', icon: 'reco-date' },
{ text: 'Contact', icon: 'reco-message',
items: [
{ text: 'Gitee', link: 'https://gitee.com/zhouwenjun2020'},
{ text: '简书', link: 'https://www.jianshu.com/u/5b81987c1870'},
]
}
],
// 博客配置
blogConfig: {
category: {
location: 2, // 在导航栏菜单中所占的位置，默认2
text: 'Category' // 默认文案
},
tag: {
location: 3, // 在导航栏菜单中所占的位置，默认3
text: 'Tag' // 默认文案
},
},
},
}
-
nav和blogConfig都可以设置导航栏，nav是Vuepress的接口，blogConfig是本主题的接口，以后考虑合并设置，现在不懂前端知识... - 由于目前还没有写文章，因此没有显示
Category栏 -
Tag栏有默认标签All，因此即便没有Tag，他还是存在的 - icon只能填写本主题已集成的图标，在官方说明文档可以查看相关介绍：
添加导航栏
- 设置侧边栏
首先创建博客文件，在docs目录下新建Speaker目录，并创建好XXXX.md文件，注意：不需要在文件中写一级标题，我们会在Front Matter中设置tittle，如：
# XXXX.md
---
title: Kaldi声纹识别代码详解|egs/aishell
categories:
- 声纹识别
tags:
- Kaldi
publish: true
---
::: tip
尝试添加摘要
:::
<!-- more -->
## stage0 数据准备
（正文）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
- 该主题中，categories和tags必须用这样的方式去写
-
:::是md支持的语法，更多请参考如下文档 - 注意下面需要用more进行分隔
下面为该文档创建侧边栏，依旧在config.js中修改
# config.js
module.exports = {
themeConfig: {
// 侧边栏
sidebar: 'auto',
sidebarDepth: 2,
subSidebar: 'auto', //在所有页面中启用自动生成子侧边栏，原sidebar仍然兼容
},
}
- 没有做过多的修改，设置为自动，以后再调整
- 此时导航栏的
Category栏已经显示出来，且有“声纹识别”分支，同样的，Tag也多了“Kaldi”标签
从分类栏进入
侧边栏get
现在我们点击浏览器的后退，只会出现404页面，待完善，应该是缺少README.md文件，且最好直接设置永久链接
Page服务部署
我使用的是项目页面模式，并不是直接使用io结尾的链接，确保我们已经创建仓库，如：git@gitee.com:zhouwenjun2020/my-vue.git
- 本地配置修改
# config.js
module.exports = {
// 部署
base: '/my-vue/',
}
- base对应仓库名就行，注意两侧均有
/
- 上传到仓库
为了方便，我们写一个bat脚本，像是Vuepress官方提供的deploy.sh脚本一样，在Test目录下新建deploy.bat：
# deploy.bat
call npm run build # 生成静态文件
call cd docs/.vuepress/dist
call git init
call git add -A
call git commit -m 'deploy'
call git push -f git@gitee.com:zhouwenjun2020/my-vue.git master:gh-pages
- 因为调用的不是cmd内部命令，所以在前面都加上
call关键词 - 在cmd中直接运行
deploy.bat
- 去Gitee仓库手动更新
没错，Github可以自动更新，但Gitee不来塞！
点击上方的服务——Gitee Pages——选择分支：gh-pages——更新——点击网页后刷新一下（Gitee有时候抽风不更新）
目前只是最基本的设置，以后再慢慢改进
优化进阶
本节开始，我们将主题转移到vuepress-theme-vdoing，这里的结构更加完整，便于学习Vuepress。
基本框架
.
├── docs
│ ├── .vuepress (可选的)存放全局的配置、组件、静态资源等
│ │ ├── components (可选的)该目录中的 Vue 组件将会被自动注册为全局组件
│ │ ├── theme (可选的)用于存放本地主题
│ │ │ └── Layout.vue
│ │ ├── public (可选的)静态资源目录
│ │ ├── styles (可选的)用于存放样式相关的文件
│ │ │ ├── index.styl 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
│ │ │ └── palette.styl 用于重写默认颜色常量，或者设置新的 stylus 颜色常量
│ │ ├── config (可选的)当config.js里面内容太多时，可以把每一项配置都分割成单独的文件存放到config文件夹
│ │ ├── config.js 全局配置文件
│ │
│ ├── guide 一般用户都在这个目录下创建网站指南，当然你可以不用
│ │ └── README.md 指南里面的具体内容，内容使用markdown书写
│ ├── life（自定义举例用）
│ │ └── life01.md
│ │ └── life02.md
│ │ └── life03.md
│ │ └── README.md
│ ├── study（自定义举例用）
│ │ └── english
│ │ │ └── english01.md
│ │ │ └── english02.md
│ │ │ └── english3.md
│ │ └── math
│ │ │ └── math01.md
│ │ │ └── math02.md
│ │ │ └── math3.md
│ ├── README.md
│
└── package.json
网友评论