1. vitepress 介绍
VitePress 由 Vite 和 Vue 驱动的静态站点生成器
简单、强大、快速。就是你想要的现代 SSG 框架！
SSG 说明:
SSG（Static Site Generator）是一种用于生成静态网站的工具或框架。
它将网站的内容和模板文件作为输入，然后根据预定义的规则和配置生成静态的HTML、CSS和JavaScript文件。
与动态网站相比，静态网站不需要在每次请求时生成页面内容，因此可以提供更快的加载速度和更高的安全性。
vitepress 特点
-
专注内容:
- 只需 Markdown 即可轻松创建美观的文档站点。
-
享受 Vite 无可比拟的体验
- 服务器即时启动，闪电般的热更新，还可以使用基于 Vite 生态的插件。
-
使用 Vue 自定义
- 直接在 Markdown 中使用 Vue 语法和组件，或者使用 Vue 组件构建自定义主题。
-
速度真的很快！
- 采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。
2. 安装
2.1 初始化项目
pnpm init
或者
npm init -y
2.2 安装vitepress
大家使用
对应包管理工具进行安装即可,因为我是用的是pnpm所以就以pnpm进行演示了
pnpm add vitepress
2.3 使用vitepress指令快速搭建项目
pnpm vitepress init
执行 pnpm run docs:dev 进去项目的启动
3. 首页配置文件介绍
官方关于首页相关的配置说明:
vitepress.dev/zh/referenc…
相关配置说明我放在下面代码的注释里面了, 很好理解
---
layout: home
hero:
# 主标题
name: SunFei博客
# 副标题
text: VitePress + Vue 搭建
# 内容介绍
tagline: JavaScript Html CSS ThreeJs Uniapp Echarts ...
# 右边图片
image:
src: /sq.svg
alt: VitePress
actions:
# 按钮主题
- theme: brand
# 按钮文字
text: 快速开始
link: /markdown-examples
- theme: alt
text: vitepress官方
link: https://vitepress.dev/
# 特色
features:
# icon图标,目前只支持emoji
- icon: ⚡️
# 标题
title: 前端知识
# 介绍
details: HTML CSS JavaScript TypeScript Vue3等部分的基础以及进阶的内容知识点,整合自己以及别人的资料
- icon: 🖖
title: 数据结构与算法
details: 介绍了基本数据结构以及相关的经典算法，强调问题-数据-算法的抽象过程，关注数据结构与算法的时间空间效率，培养编写出高效程序从而解决实际问题的综合能力。
- icon: 🛠️
title: 常用前端工具
details: 提供一系列的提高前端开发效果的工具网站,例如UI渐变色生成器 盒子阴影调试 Flex Grid 布局调试 包括常用的图标库...
- icon: 💓
title: 个人项目难点总结
details: 个人在开发项目中所遇到的技术难点,以及解决方案...
---
配置完之后,我们的首页就应该变成了这样
4. config.mjs文件说明
配置文件 (.vitepress/config.js) 让你能够自定义 VitePress 站点的各个方面，最基本的选项是站点的标题和描述,还有更多…. 下面进行介绍:
4.1 站点标题和介绍
站点 标题 和 介绍
类似于我们的html文件里面写的
<!-- 网站的标题 -->
<title>测试</title>
<!-- 网站的介绍说明 -->
<meta name="description" content="测试">
export default defineConfig({
// 站点标题 就是网站的名字
title: "测试1",
description: "xxxxxxx",
})
4.2 导航栏logo图标和文字
然后就是 导航栏的标题 和 logo
export default defineConfig({
// 站点标题 就是网站的名字
title: "测试1",
description: "xxxxxxx",
themeConfig: {
// nav导航栏 左边的logo旁边的文字
siteTitle: 'Sun_Fei',
// 网站左上角的logo图标
logo: '/planet.svg',
}
})
/planet.svg 会默认读取public文件下的planet.svg, 所以需要在目录里面创建该文件
效果:
4.3 顶部导航项
- {} 一个对象表示一个路由配置
- text: 文字
- link: 点击文字跳转到指定的md文件
themeConfig: {
...
// 右上角导航配置(路由)
nav: [
{ text: '首页', link: '/' },
{ text: '样例', link: '/markdown-examples' },
{ text: '学习笔记', link: '/study/studyNotes' }
],
}
4.4 侧边导航栏配置
通过配置侧边导航栏我们可以更好的管理每个模块的知识,
- 比如学习相关的知识放在一个目录下面
- 自己平常一些生活感悟放在一个目录下面
- 自己平常一些繁琐的事情放在一个目录下面
通过这样,对各个模块进行分类管理,使我们更好的查看笔记或者感悟什么的
我们以学习笔记这个模块进行编写
在study目录下面新建3个文件
然后在配置文件config.mjs 进行配置
themeConfig: {
....
sidebar: [
{
items: [
{
text: '学习笔记',
// 开启折叠按钮
collapsible: true,
collapsed: true,
items: [
{ text: 'Vue学习笔记', link: '/study/vue.md' },
{ text: 'Node学习笔记', link: '/study/node.md' },
{ text: 'React学习笔记', link: '/study/react.md' }
]
},
{ text: 'Markdown Examples', link: '/markdown-examples'},
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
],
...
}
效果:
对于其他的目录添加也是相同的 , 创建好文件, 在配置文件进行正确的路由配置,然后就可以正常跳转访问了.
4.5 底部版权配置
首页面 底部 展示版权相关的信息
sidebar: [],
// 底部版权部分
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2023-present SunFei',
},
5. 网站样式美化
新建文件, 如下图所示
在theme/index.js文件里面编写代码
// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme
在theme/custom.css进行样式代码编写
他将会应用到全局
/* 该文件配置网站的文字 图标 等等 一系列dom元素的样式文件 */
:root {
/* 通过配置 自定义颜色 */
--vp-home-hero-name-color: transparent;
/* 主页标题文字的颜色 */
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, rgb(244, 145, 15), #7eaadf);
/* 主页左侧背景添加渐变光圈 */
--vp-home-hero-image-background-image: linear-gradient(135deg, #ff9100 10%, #ffc400 50%);
--vp-home-hero-image-filter: blur(100px);
/* botton按钮 */
/* --vp-button-brand-border: #81634b; */
/* 按钮文本颜色 */
--vp-button-brand-text: #ffffff;
/* 按钮背景颜色 */
--vp-button-brand-bg: #ff9100;
/* 鼠标悬停的效果之后的样式 */
--vp-button-brand-hover-border: #00FFEE;
--vp-button-brand-hover-text: #000000;
--vp-button-brand-hover-bg: #00FFEE;
--vp-button-brand-active-border: #ff7500;
/* 主题基色 */
--vp-c-brand: #ff8400;
/* 白色模式 主题基色 */
--vp-c-brand-light: #ff8400;
/* 黑色模式 主题基色 */
--vp-c-brand-dark: #ff8400;
}
在控制台找到对应的属性变量, 复制变量, 填写新值, 就可以覆盖原有的样式
6. 其他设置
6.1代码块行数显示 和 高亮
也是在config.mjs文件进行配置的
markdown: {
// 代码块风格
theme: 'material-theme-palenight',
// theme:'github-light',
// 代码块显示行数
lineNumbers: true,
},
themeConfig{ ...}
效果:
官方也给出了关于代码块相关的第三方插件 大家感兴趣可以去看看,功能还是蛮多的 vitepress.dev/zh/guide/ma…
7. config.mjs文件 代码
import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
// 站点标题 就是网站的名字
title: "测试1",
description: "xxxxxxx",
themeConfig: {
// nav导航栏 左边的logo旁边的文字
siteTitle: 'Sun_Fei',
// 网站左上角的logo图标
logo: '/planet.svg',
// 右上角导航配置(路由)
nav: [
{ text: '首页', link: '/' },
{ text: '样例', link: '/markdown-examples' },
{ text: '学习笔记', link: '/study/studyNotes' }
],
sidebar: [
{
items: [
{
text: '学习笔记',
// 开启折叠按钮
collapsible: true,
collapsed: true,
items: [
{ text: 'Vue学习笔记', link: '/study/vue.md' },
{ text: 'React学习笔记', link: '/study/react.md' },
{ text: 'Node学习笔记', link: '/study/node.md' },
]
},
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
],
// 配置成自己的的github地址, 当然也可以配置掘金的icon 和 掘金的地址
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
],
// 底部版权部分
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2023-present SunFei',
},
},
markdown: {
// 代码块风格
theme: 'material-theme-palenight',
// theme:'github-light',
// 代码块显示行数
lineNumbers: true,
},
})
8. 结语
先说到这里吧, 后续我会搭建一个基础模块,放在gitee里面,大家如果想使用vitepress 搭建自己的博客, 可以采用. 当然也可以自己从0 到 1 搭建, 更有参与感,成就感.
原文链接：https://juejin.cn/post/7337882838845997090 作者：VUE
