这篇文章详细介绍了使用 VitePress 搭建静态个人博客或知识库的相关内容，包括 VitePress 介绍、安装步骤、首页配置文件、文件说明、网站样式美化、其他设置及相关代码等，涵盖了从初始化项目到各种配置的具体细节和代码示例。
关联问题: vitepress适合新手吗 vitepress样式难改吗 能自定义代码块主题吗 基于该文章内容继续向AI提问
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 搭建, 更有参与感,成就感.
gitee地址: gitee.com/sunfei666/v… github地址: github.com/SunFei12345…
扫一扫
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
