VuePress简介
VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
快速搭建一个环境
- 创建并进入一个新目录
mkdir study && cd study
- 初始化
npm init
- 安装本地依赖VuePress
npm install -D vuepress
- 创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
- 设置package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
- 启动
npm run docs:dev
VuePress 会在 http://localhost:8080启动一个热重载的开发服务器
基础配置
如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：
module.exports = {
title: 'Study',
description: '学习使用VuePress'
}
此时界面类似于：
导航栏设置
修改 config.js:
module.exports = {
title: 'Study',
description: '学习使用VuePress',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '无涯子博客',
items: [
{ text: 'Github', link: 'https://github.com/wyz210052253/' },
{ text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
]
}
]
}
}
添加侧边栏
现在我们添加一些 md 文档，目前文档的目录如下：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ blogs
| └─ Dubbo学习总结.md
| └─ Zookeeper深入学习.md
└─ package.json
config.js 配置如下:
module.exports = {
title: 'Study',
description: '学习使用VuePress',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '无涯子博客',
items: [
{ text: 'Github', link: 'https://github.com/wyz210052253/' },
{ text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
]
}
],
sidebar: [
{
title: '首页',
path: '/',
collapsable: false,
children: [
{ title: "学习前提", path: "/" }
]
},
{
title: '技术文章',
path: '/blogs/Dubbo学习总结',
collapsable: false,
children: [
{ title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
{ title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
],
}
]
}
}
安装主题
现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们可以直接使用主题，这里使用的主题是 vuepress-theme-rec：
npm install vuepress-theme-reco --save-dev
在 config.js 里引用该主题：
module.exports = {
title: 'Study',
description: '学习使用VuePress',
theme: 'reco',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '无涯子博客',
items: [
{ text: 'Github', link: 'https://github.com/wyz210052253/' },
{ text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
]
}
],
sidebar: [
{
title: '首页',
path: '/',
collapsable: false,
children: [
{ title: "学习前提", path: "/" }
]
},
{
title: '技术文章',
path: '/blogs/Dubbo学习总结',
collapsable: false,
children: [
{ title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
{ title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
],
}
]
}
}
文章信息
---
title: Dubbo学习总结
author: 无涯子
date: '2023-04-27'
---
设置语言
module.exports = {
title: 'Study',
description: '学习使用VuePress',
theme: 'reco',
locales: {
'/': {
lang: 'zh-CN'
}
},
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '无涯子博客',
items: [
{ text: 'Github', link: 'https://github.com/wyz210052253/' },
{ text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
]
}
],
sidebar: [
{
title: '首页',
path: '/',
collapsable: false,
children: [
{ title: "学习前提", path: "/" }
]
},
{
title: '技术文章',
path: '/blogs/Dubbo学习总结',
collapsable: false,
children: [
{ title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
{ title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
],
}
]
}
}
、
开启目录结构
module.exports = {
title: 'Study',
description: '学习使用VuePress',
theme: 'reco',
locales: {
'/': {
lang: 'zh-CN'
}
},
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '无涯子博客',
items: [
{ text: 'Github', link: 'https://github.com/wyz210052253/' },
{ text: '博客园', link: 'https://www.cnblogs.com/wyzstudy/' }
]
}
],
sidebar: [
{
title: '首页',
path: '/',
collapsable: false,
children: [
{ title: "学习前提", path: "/" }
]
},
{
title: '技术文章',
path: '/blogs/Dubbo学习总结',
collapsable: false,
children: [
{ title: "Dubbo学习总结", path: "/blogs/Dubbo学习总结" },
{ title: "Zookeeper深入学习", path: "/blogs/Zookeeper深入学习" }
],
}
],
subSidebar: 'auto'
}
}
自定义修改样式
.dark .content__default code {
background-color: rgba(58,58,92,0.7);
color: #fff;
}
部署Github
部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：Study。
在根目录下建立一个脚本文件：deploy.sh
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy Github'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:wyz210052253/Study.git master:pages
cd -
执行脚本：
sh deploy.sh
通过Github访问
在线地址：https://wyz210052253.github.io/Study/
标签：学习,title,text,博客,超好,link,VuePress,path From： https://www.cnblogs.com/wyzstudy/p/17364338.html