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 初始化项目
shell
pnpm init
或者
shell
npm init -y
2.2 安装vitepress
大家使用
对应包管理工具进行安装即可,因为我是用的是pnpm所以就以pnpm进行演示了
shell
pnpm add vitepress
2.3 使用vitepress指令快速搭建项目
shell
pnpm vitepress init
执行 pnpm run docs:dev 进去项目的启动
3. 首页配置文件介绍
官方关于首页相关的配置说明: vitepress.dev/zh/referenc…
相关配置说明我放在下面代码的注释里面了, 很好理解
md
--- 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文件里面写的
html
<!-- 网站的标题 --> <title>测试</title> <!-- 网站的介绍说明 --> <meta name="description" content="测试">
js
export default defineConfig({ // 站点标题 就是网站的名字 title: "测试1", description: "xxxxxxx", })
4.2 导航栏logo图标和文字
然后就是 导航栏的标题 和 logo
js
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文件
js
themeConfig: { ... // 右上角导航配置(路由) nav: [ { text: '首页', link: '/' }, { text: '样例', link: '/markdown-examples' }, { text: '学习笔记', link: '/study/studyNotes' } ], }
4.4 侧边导航栏配置
通过配置侧边导航栏我们可以更好的管理每个模块的知识,
- 比如学习相关的知识放在一个目录下面
- 自己平常一些生活感悟放在一个目录下面
- 自己平常一些繁琐的事情放在一个目录下面
通过这样,对各个模块进行分类管理,使我们更好的查看笔记或者感悟什么的
我们以学习笔记这个模块进行编写
在study目录下面新建3个文件
然后在配置文件config.mjs 进行配置
js
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 底部版权配置
首页面 底部 展示版权相关的信息
js
sidebar: [], // 底部版权部分 footer: { message: 'Released under the MIT License.', copyright: 'Copyright © 2023-present SunFei', },
5. 网站样式美化
新建文件, 如下图所示
在theme/index.js文件里面编写代码
js
// .vitepress/theme/index.js import DefaultTheme from 'vitepress/theme' import './custom.css' export default DefaultTheme
在theme/custom.css进行样式代码编写
他将会应用到全局
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文件进行配置的
js
markdown: { // 代码块风格 theme: 'material-theme-palenight', // theme:'github-light', // 代码块显示行数 lineNumbers: true, }, themeConfig{ ...}
效果:
官方也给出了关于代码块相关的第三方插件 大家感兴趣可以去看看,功能还是蛮多的 vitepress.dev/zh/guide/ma…
7. config.mjs文件 代码
js
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 搭建, 更有参与感,成就感.
gitee地址: gitee.com/sunfei666/v… github地址: github.com/SunFei12345…
