天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
金陵子弟来相送，欲行不行各尽觞。
请君试问东流水，别意与之谁短长？
——《金陵酒肆留别》
文章目录
本篇为博客的简易配置
关于其他详细配置项，如站点基础配置参数、主题配置、打包工具配置、通用配置等等
可参考文章专栏链接：VuePress个人博客专栏
VuePress搭建站点的简易配置
1. 配置文件config.js
VuePress站点的基本配置文件是.vuepress/config.js
1.1 配置文件优先级
需要注意，配置文件也支持ts，会有更好的类型提示，即可将文件定义为.vuepress/config.ts
如果同时配置了多个config配置文件（如config.ts、config.js、config.mjs），生效的优先级如下
优先级从高到低：
ts>js>mjs
.vuepress/config.ts>.vuepress/config.js>.vuepress/config.mjs
1.2 指定配置文件
除默认的配置文件外，还可以通过–config命令指定配置文件，命令如下
vuepress dev docs --config my-config.ts
1.3 配置文件内容
config.js基础的配置内容如下
import {
viteBundler } from '@vuepress/bundler-vite'
import {
defaultTheme } from '@vuepress/theme-default'
import {
defineUserConfig } from 'vuepress'
export default defineUserConfig({
bundler: viteBundler(),
theme: defaultTheme(),
lang: 'zh-CN',
title: '你好， VuePress ！',
description: '这是我的第一个 VuePress 站点',
})
2. 关于博客站点的简易配置
现在开始，逐一实现博客的页面文件、路由、导航栏等配置
2.1 页面文件的创建
vuepress搭建的站点，页面显示的内容就是markdown文件中的内容
我们需要创建一些markdown文件并填充一些内容
docs目录下的README.md文件（如没有该文件可直接创建）
该文件就是访问站点的首页默认展示的页面文件
内容填充如下
README.md
# 寒山李白的个人博客
## 1. 作者介绍
### 1.1 姓名
寒山
李白
寒山李白
### 1.2 籍贯
安徽
### 1.3 技能
睡觉
吃饭
码字
王者
### 1.4 爱好
爬山
跑步
冥想
### 1.5 名言
多学技能，多读书，有个信仰，自律点
## 2. 博客介绍
### 2.1 主题
学习新技能，实践见真知
### 2.2 内容
该博客内容以娱乐为主
### 2.3 宗旨
不断克服困难，永攀第二
### 2.4 合作
和自己合作，和自己和解
## 3. 将进酒
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
### 3.1 将近酒
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
### 3.2 将进酒
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
### 3.3 将进酒
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
此时可访问页面，效果如下
在docs目录下创建文件LIBAI.md，内容填充如下
# 李白诗集精选
李白的唐诗精选内容
在docs目录下创建note目录，在note目录下创建两个md文件
dufu.md
# dufu
dufu
wangwei.md
# wangwei
wangwei
文件创建完毕，接下来进行页面内容中的链接配置
2.2 链接配置
在页面中除了文字还可以配置链接，链接可进行跳转，链接可以是文件路径也可以是url网址
在README.md文件中添加以下几种链接
相对路径链接（LIBAI.md）
<!-- 相对路径 以当前路径为起点-->
[李白个人主页](./LIBAI.md)
绝对路径链接（dufu.md）
<!-- 绝对路径 docs为根路径 -->
[杜甫个人主页](/note/dufu.md)
url链接（百度）
<!-- url链接 -->
[百度地址](https://www.baidu.com)
页面效果展示
2.3 导航栏配置
在首页的右上方，除了主题黑白按钮外，还可以配置一些路由导航，可以是文件路由也可以是网页路由
导航栏配置是在docs/.vuepress/config.js文件中的theme部分中用navbar进行配置
theme: defaultTheme({
// 导航栏
navbar: [{
//导航栏配置部分
}],
}),
2.3.1 文件路由配置
文件路由配置，分为首页导航、单层导航、导航栏组
// 首页导航栏配置，默认路径为/
{
text: '首页',
link: '/'
},
// 其他页面文件的导航配置
{
text: '杜甫',
link: '/note/dufu.md'
},
{
text: '王维',
link: '/note/wangwei.md'
},
// 导航栏组的配置
{
text: '诗人名单',
prefix: '/note/',
children: [
{
text: '杜甫',
link: '/note/dufu.md'
},
{
text: '王维',
link: '/note/wangwei.md'
},
]
},
2.3.2 网页路由配置
网页路由导航的配置，即直接跳转到别的网址
// url导航栏配置
{
text: '百度',
link: 'https://www.baidu.com'
},
2.3.3 完整代码及页面展示
docs/.vuepress/config.js完整代码如下
import {
viteBundler } from '@vuepress/bundler-vite'
import {
defaultTheme } from '@vuepress/theme-default'
import {
defineUserConfig } from 'vuepress'
export default defineUserConfig({
// 导包配置
bundler: viteBundler(),
// 主题配置
theme: defaultTheme({
// 导航栏
navbar: [
// 首页导航栏配置，默认路径为/
{
text: '首页',
link: '/'
},
// 其他页面文件的导航配置
{
text: '杜甫',
link: '/note/dufu.md'
},
{
text: '王维',
link: '/note/wangwei.md'
},
// 导航栏组的配置
{
text: '诗人名单',
prefix: '/note/',
children: [
{
text: '杜甫',
link: '/note/dufu.md'
},
{
text: '王维',
link: '/note/wangwei.md'
},
]
},
// url导航栏配置
{
text: '百度',
link: 'https://www.baidu.com'
},
],
}),
// 语言配置
lang: 'zh-CN',
// 标题配置
title: '欢迎来到寒山李白的博客！',
// 描述
description: '这是我的第一个 VuePress 站点',
})
页面效果展示
点击导航栏可进行跳转，查看不同的文件页面
3. 总结
到此，关于个人博客的基础配置就完成了
可以进行简单的博客配置，创建属于自己的博客内容
当然了，这只是本地启动的一个服务，如果想部署到服务器，或者配置更多功能
可以参考文章专栏：VuePress个人博客专栏
感谢阅读，祝君暴富！