VitePress 搭建博客操作指南
前言
由于我之前的博客有点审美疲劳了，外加使用的自己搞的cms系统，有点臃肿，所以在网上找了一下，VitePress是自己比较满意的。
了解VitePress详情：VitePress
前提条件
在开始之前，请确保你的环境满足以下要求：
- Node.js 版本 >= 16.x
- pnpm , yarn, npm 包管理工具。
初始化（我这里使用NPM）
- 选择你存放项目的目录
mkdir vitepress-blog && cd vitepress-blog && npm init
- 安装
npm add -D vitepress
- 初始化
npx vitepress init
将需要回答几个简单的问题：
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./
│
◇ Site title:
│ My Awesome Project
│
◇ Site description:
│ A VitePress Site
│
◆ Theme:
│ ● Default Theme (Out of the box, good-looking docs)
│ ○ Default Theme + Customization
│ ○ Custom Theme
└
执行完后你会得到以下目录结构
┌── .vitepress
│ │ └─ config.mts（全局配置）
├── api-examples.md
├── index.md
├── markdown-examples.md
├── node_modules/（这是一个由 npm 管理的依赖项目录，通常包含很多子目录和文件）
├── package-lock.json（npm 自动生成的，用于锁定安装时的包版本）
└── package.json（项目的配置文件，包含项目的元数据、依赖项等信息）
运行
npm run docs:dev
访问 Local: http://localhost:5173/
你将会看到如下图
至此你的VitePress已经初始化成功！
基础配置
默认配置说明如下：
import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "My Awesome Project", //网站标题
description: "A VitePress Site", //网站描述
themeConfig: { //主题配置
// https://vitepress.dev/reference/default-theme-config
//导航栏配置
nav: [
{ text: 'Home', link: '/' },
{ text: 'Examples', link: '/markdown-examples' }
],
//侧边栏配置
sidebar: [
{
text: 'Examples',
items: [
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
],
//导航栏中展示带有图标的社交帐户链接
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
]
}
})
更多配置项请看这里：站点配置
修改目录如下：images
┌── .vitepress
│ ├── config.mts（全局配置）
├── docs（这里存放md文件）
│ ├── images (这里存放md所用的图片)
│ ├── api-examples.md
│ ├── index.md
│ ├── markdown-examples.md
├── node_modules/（这是一个由 npm 管理的依赖项目录，通常包含很多子目录和文件）
├── package-lock.json（npm 自动生成的，用于锁定安装时的包版本）
└── package.json（项目的配置文件，包含项目的元数据、依赖项等信息）
我这里提供参考配置如下：
import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "My Awesome Project", //网站标题
description: "JAVA搬运工", //网站描述
base: "/", //根目录
logo: '/images/logo.png', //网站logo
srcDir: "docs", //相对目录，用于存放md文件
themeConfig: { //主题配置
//logo设置
logo: "/images/logo.png",
//网站头部设置
head: [["link", {rel: "icon", href: "/favicon.ico"}], ['script', { src: '/live2d.js' }]],
//网站底部设置
footer: {
//底部信息
message: '<a href="https://beian.miit.gov.cn/#/Integrated/index">渝ICP备2023004958号-2</a>',
//底部版权
copyright: " Copyright © 2024 longshao.website All Rights Reserved. ",
},
//本地搜索
search: {
provider: 'local'
},
// https://vitepress.dev/reference/default-theme-config
//导航栏配置
nav: [
{ text: 'Home', link: '/' },
{ text: 'Examples', link: '/markdown-examples' }
],
//侧边栏配置
sidebar: [
{
text: 'Examples',
items: [
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
],
//导航栏中展示带有图标的社交帐户链接
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
],
//更新时间
lastUpdated: {
text: 'Updated at',
formatOptions: {
dateStyle: 'full',
timeStyle: 'medium'
}
},
//手机端配置返回顶部
returnToTop: true,
//手机端配置返回顶部按钮显示文字
returnToTopLabel: "返回顶部",
//手机端配置侧边栏菜单按钮显示文字
sidebarMenuLabel:"菜单",
//右侧内容导航栏
outline: {
level: [2, 6],
label:"导航"
},
//翻页
docFooter: {
prev: "上一页",
next: "下一页",
},
}
})
图示：
主题美化
自定义主题
在.vitepress新增theme目录并且在 theme 目录下新建 style 文件夹，然后新建 index.css 和 var.css
┌── .vitepress
│ │ └─ config.mts（全局配置）
│ │ └─ theme（主题配置）
│ │ └─ style
│ │ └─ index.css
│ │ └─ var.css
│ │ └─ index.ts (主题配置)
├── docs（这里存放md文件）
│ ├── images (这里存放md所用的图片)
│ ├── api-examples.md
│ ├── index.md
│ ├── markdown-examples.md
├── node_modules/（这是一个由 npm 管理的依赖项目录，通常包含很多子目录和文件）
├── package-lock.json（npm 自动生成的，用于锁定安装时的包版本）
└── package.json（项目的配置文件，包含项目的元数据、依赖项等信息）
index.css
/* index.css */
@import ".vitepress/theme/style/var.css";
var.css
/* var.css */
:root {
--vp-c-brand-1: #18794e;
--vp-c-brand-2: #299764;
--vp-c-brand-3: #30a46c;
}
.dark {
--vp-c-brand-1: #3dd68c;
--vp-c-brand-2: #30a46c;
--vp-c-brand-3: #298459;
}
/* 以前的vp-c-brand已弃用 */
:root {
/* hero标题渐变色 */
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
/*hero logo背景渐变色 */
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
--vp-home-hero-image-filter: blur(40px);
}
/* 也可自行单独修改brand按钮 */
/* :root {
--vp-button-brand-border: #F6CEEC;
--vp-button-brand-text: #F6CEEC;
--vp-button-brand-bg: #D939CD;
--vp-button-brand-hover-border: #F6CEEC;
--vp-button-brand-hover-text: #fff;
--vp-button-brand-hover-bg: #D939CD;
--vp-button-brand-active-border: #F6CEEC;
} */
index.ts
/* .vitepress/theme/index.ts */
import DefaultTheme from 'vitepress/theme'
import './style/index.css'
export default {
extends: DefaultTheme,
}
美化后
参数太多，自己根据需求调整就好。
常用美化
彩虹背景动画
新建 rainbow.css 文件
/* 彩虹动画 */
@keyframes rainbow {
0% {
--rainbow-prev: #009ff7;
--rainbow-next: #c76dd1;
}
1.25% {
--rainbow-prev: #009dfa;
--rainbow-next: #cf69c9;
}
2.5% {
--rainbow-prev: #009bfc;
--rainbow-next: #d566c2;
}
3.75% {
--rainbow-prev: #0098fd;
--rainbow-next: #dc63ba;
}
5% {
--rainbow-prev: #0096fd;
--rainbow-next: #e160b3;
}
6.25% {
--rainbow-prev: #0093fd;
--rainbow-next: #e65eab;
}
7.5% {
--rainbow-prev: #2e90fc;
--rainbow-next: #e95ca2;
}
8.75% {
--rainbow-prev: #4d8dfa;
--rainbow-next: #ed5a9a;
}
10% {
--rainbow-prev: #638af8;
--rainbow-next: #ef5992;
}
11.25% {
--rainbow-prev: #7587f5;
--rainbow-next: #f15989;
}
12.5% {
--rainbow-prev: #8583f1;
--rainbow-next: #f25981;
}
13.75% {
--rainbow-prev: #9280ed;
--rainbow-next: #f25a79;
}
15% {
--rainbow-prev: #9f7ce9;
--rainbow-next: #f25c71;
}
16.25% {
--rainbow-prev: #aa78e3;
--rainbow-next: #f15e69;
}
17.5% {
--rainbow-prev: #b574dd;
--rainbow-next: #ef6061;
}
18.75% {
--rainbow-prev: #be71d7;
--rainbow-next: #ed635a;
}
20% {
--rainbow-prev: #c76dd1;
--rainbow-next: #eb6552;
}
21.25% {
--rainbow-prev: #cf69c9;
--rainbow-next: #e8694b;
}
22.5% {
--rainbow-prev: #d566c2;
--rainbow-next: #e46c44;
}
23.75% {
--rainbow-prev: #dc63ba;
--rainbow-next: #e06f3d;
}
25% {
--rainbow-prev: #e160b3;
--rainbow-next: #db7336;
}
26.25% {
--rainbow-prev: #e65eab;
--rainbow-next: #d77630;
}
27.5% {
--rainbow-prev: #e95ca2;
--rainbow-next: #d17a2a;
}
28.75% {
--rainbow-prev: #ed5a9a;
--rainbow-next: #cc7d24;
}
30% {
--rainbow-prev: #ef5992;
--rainbow-next: #c6811e;
}
31.25% {
--rainbow-prev: #f15989;
--rainbow-next: #bf8418;
}
32.5% {
--rainbow-prev: #f25981;
--rainbow-next: #b98713;
}
33.75% {
--rainbow-prev: #f25a79;
--rainbow-next: #b28a0f;
}
35% {
--rainbow-prev: #f25c71;
--rainbow-next: #ab8d0c;
}
36.25% {
--rainbow-prev: #f15e69;
--rainbow-next: #a3900b;
}
37.5% {
--rainbow-prev: #ef6061;
--rainbow-next: #9c920d;
}
38.75% {
--rainbow-prev: #ed635a;
--rainbow-next: #949510;
}
40% {
--rainbow-prev: #eb6552;
--rainbow-next: #8b9715;
}
41.25% {
--rainbow-prev: #e8694b;
--rainbow-next: #83991b;
}
42.5% {
--rainbow-prev: #e46c44;
--rainbow-next: #7a9b21;
}
43.75% {
--rainbow-prev: #e06f3d;
--rainbow-next: #719d27;
}
45% {
--rainbow-prev: #db7336;
--rainbow-next: #679e2e;
}
46.25% {
--rainbow-prev: #d77630;
--rainbow-next: #5da035;
}
47.5% {
--rainbow-prev: #d17a2a;
--rainbow-next: #51a13c;
}
48.75% {
--rainbow-prev: #cc7d24;
--rainbow-next: #44a244;
}
50% {
--rainbow-prev: #c6811e;
--rainbow-next: #34a44b;
}
51.25% {
--rainbow-prev: #bf8418;
--rainbow-next: #1ba553;
}
52.5% {
--rainbow-prev: #b98713;
--rainbow-next: #00a65b;
}
53.75% {
--rainbow-prev: #b28a0f;
--rainbow-next: #00a663;
}
55% {
--rainbow-prev: #ab8d0c;
--rainbow-next: #00a76c;
}
56.25% {
--rainbow-prev: #a3900b;
--rainbow-next: #00a874;
}
57.5% {
--rainbow-prev: #9c920d;
--rainbow-next: #00a87d;
}
58.75% {
--rainbow-prev: #949510;
--rainbow-next: #00a985;
}
60% {
--rainbow-prev: #8b9715;
--rainbow-next: #00a98e;
}
61.25% {
--rainbow-prev: #83991b;
--rainbow-next: #00a996;
}
62.5% {
--rainbow-prev: #7a9b21;
--rainbow-next: #00a99f;
}
63.75% {
--rainbow-prev: #719d27;
--rainbow-next: #00a9a7;
}
65% {
--rainbow-prev: #679e2e;
--rainbow-next: #00a9b0;
}
66.25% {
--rainbow-prev: #5da035;
--rainbow-next: #00a9b8;
}
67.5% {
--rainbow-prev: #51a13c;
--rainbow-next: #00a9c0;
}
68.75% {
--rainbow-prev: #44a244;
--rainbow-next: #00a8c7;
}
70% {
--rainbow-prev: #34a44b;
--rainbow-next: #00a8cf;
}
71.25% {
--rainbow-prev: #1ba553;
--rainbow-next: #00a7d5;
}
72.5% {
--rainbow-prev: #00a65b;
--rainbow-next: #00a6dc;
}
73.75% {
--rainbow-prev: #00a663;
--rainbow-next: #00a6e2;
}
75% {
--rainbow-prev: #00a76c;
--rainbow-next: #00a4e7;
}
76.25% {
--rainbow-prev: #00a874;
--rainbow-next: #00a3ec;
}
77.5% {
--rainbow-prev: #00a87d;
--rainbow-next: #00a2f1;
}
78.75% {
--rainbow-prev: #00a985;
--rainbow-next: #00a0f4;
}
80% {
--rainbow-prev: #00a98e;
--rainbow-next: #009ff7;
}
81.25% {
--rainbow-prev: #00a996;
--rainbow-next: #009dfa;
}
82.5% {
--rainbow-prev: #00a99f;
--rainbow-next: #009bfc;
}
83.75% {
--rainbow-prev: #00a9a7;
--rainbow-next: #0098fd;
}
85% {
--rainbow-prev: #00a9b0;
--rainbow-next: #0096fd;
}
86.25% {
--rainbow-prev: #00a9b8;
--rainbow-next: #0093fd;
}
87.5% {
--rainbow-prev: #00a9c0;
--rainbow-next: #2e90fc;
}
88.75% {
--rainbow-prev: #00a8c7;
--rainbow-next: #4d8dfa;
}
90% {
--rainbow-prev: #00a8cf;
--rainbow-next: #638af8;
}
91.25% {
--rainbow-prev: #00a7d5;
--rainbow-next: #7587f5;
}
92.5% {
--rainbow-prev: #00a6dc;
--rainbow-next: #8583f1;
}
93.75% {
--rainbow-prev: #00a6e2;
--rainbow-next: #9280ed;
}
95% {
--rainbow-prev: #00a4e7;
--rainbow-next: #9f7ce9;
}
96.25% {
--rainbow-prev: #00a3ec;
--rainbow-next: #aa78e3;
}
97.5% {
--rainbow-prev: #00a2f1;
--rainbow-next: #b574dd;
}
98.75% {
--rainbow-prev: #00a0f4;
--rainbow-next: #be71d7;
}
100% {
--rainbow-prev: #009ff7;
--rainbow-next: #c76dd1;
}
}
/* 彩虹色卡 */
:root,.dark {
--rainbow-prev: #009ff7;
--rainbow-next: #c76dd1;
animation: rainbow 8s linear infinite;
}
:root {
/* hero标题渐变色 */
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--rainbow-prev) 30%, var(--rainbow-next));
/*hero logo背景渐变色 */
--vp-home-hero-image-background-image: linear-gradient(-45deg, var(--rainbow-prev) 30%, var(--rainbow-next));
--vp-home-hero-image-filter: blur(80px);
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(120px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(120px);
}
}
/* Safari has a very bad performance on gradient and filter */
.browser-safari,
.browser-firefox {
--vp-home-hero-image-background-image: transparent;
--vp-home-hero-image-filter: '';
}
引用颜色
新建 一个 blockquote.css 文件并填入如下代码
/* .vitepress\theme\style\blockquote.css */
.vp-doc blockquote {
border-radius: 10px;
padding: 18px 20px 20px 15px;
position: relative;
background-color: var(--vp-c-gray-soft);
border-left: 6px solid var(--vp-c-green-2);
}
容器颜色
新建 一个custom-block.css 文件并填入如下代码
/* .vitepress/theme/style/custom-block.css */
/* 深浅色卡 */
:root {
--custom-block-info-left: #cccccc;
--custom-block-info-bg: #fafafa;
--custom-block-tip-left: #009400;
--custom-block-tip-bg: #e6f6e6;
--custom-block-warning-left: #e6a700;
--custom-block-warning-bg: #fff8e6;
--custom-block-danger-left: #e13238;
--custom-block-danger-bg: #ffebec;
--custom-block-note-left: #4cb3d4;
--custom-block-note-bg: #eef9fd;
--custom-block-important-left: #a371f7;
--custom-block-important-bg: #f4eefe;
--custom-block-caution-left: #e0575b;
--custom-block-caution-bg: #fde4e8;
}
.dark {
--custom-block-info-left: #cccccc;
--custom-block-info-bg: #474748;
--custom-block-tip-left: #009400;
--custom-block-tip-bg: #003100;
--custom-block-warning-left: #e6a700;
--custom-block-warning-bg: #4d3800;
--custom-block-danger-left: #e13238;
--custom-block-danger-bg: #4b1113;
--custom-block-note-left: #4cb3d4;
--custom-block-note-bg: #193c47;
--custom-block-important-left: #a371f7;
--custom-block-important-bg: #230555;
--custom-block-caution-left: #e0575b;
--custom-block-caution-bg: #391c22;
}
/* 标题字体大小 */
.custom-block-title {
font-size: 16px;
}
/* info容器:背景色、左侧 */
.custom-block.info {
border-left: 5px solid var(--custom-block-info-left);
background-color: var(--custom-block-info-bg);
}
/* info容器:svg图 */
.custom-block.info [class*="custom-block-title"]::before {
content: '';
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%23ccc'/%3E%3C/svg%3E");
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 4px;
left: -5px;
top: -1px;
}
/* 提示容器:边框色、背景色、左侧 */
.custom-block.tip {
/* border-color: var(--custom-block-tip); */
border-left: 5px solid var(--custom-block-tip-left);
background-color: var(--custom-block-tip-bg);
}
/* 提示容器:svg图 */
.custom-block.tip [class*="custom-block-title"]::before {
content: '';
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23009400' d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E");
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 4px;
left: -5px;
top: -2px;
}
/* 警告容器:背景色、左侧 */
.custom-block.warning {
border-left: 5px solid var(--custom-block-warning-left);
background-color: var(--custom-block-warning-bg);
}
/* 警告容器:svg图 */
.custom-block.warning [class*="custom-block-title"]::before {
content: '';
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z' fill='%23e6a700'/%3E%3C/svg%3E");
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 4px;
left: -5px;
}
/* 危险容器:背景色、左侧 */
.custom-block.danger {
border-left: 5px solid var(--custom-block-danger-left);
background-color: var(--custom-block-danger-bg);
}
/* 危险容器:svg图 */
.custom-block.danger [class*="custom-block-title"]::before {
content: '';
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 4px;
left: -5px;
top: -1px;
}
/* NOTE容器:背景色、左侧 */
.custom-block.note {
border-left: 5px solid var(--custom-block-note-left);
background-color: var(--custom-block-note-bg);
}
/* NOTE容器:svg图 */
.custom-block.note [class*="custom-block-title"]::before {
content: '';
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%234cb3d4'/%3E%3C/svg%3E");
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 4px;
left: -5px;
top: -1px;
}
/* IMPORTANT容器:背景色、左侧 */
.custom-block.important {
border-left: 5px solid var(--custom-block-important-left);
background-color: var(--custom-block-important-bg);
}
/* IMPORTANT容器:svg图 */
.custom-block.important [class*="custom-block-title"]::before {
content: '';
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 981.333a84.992 84.992 0 0 1-84.907-84.906h169.814A84.992 84.992 0 0 1 512 981.333zm384-128H128v-42.666l85.333-85.334v-256A298.325 298.325 0 0 1 448 177.92V128a64 64 0 0 1 128 0v49.92a298.325 298.325 0 0 1 234.667 291.413v256L896 810.667v42.666zm-426.667-256v85.334h85.334v-85.334h-85.334zm0-256V512h85.334V341.333h-85.334z' fill='%23a371f7'/%3E%3C/svg%3E");
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 4px;
left: -5px;
top: -1px;
}
/* CAUTION容器:背景色、左侧 */
.custom-block.caution {
border-left: 5px solid var(--custom-block-caution-left);
background-color: var(--custom-block-caution-bg);
}
/* CAUTION容器:svg图 */
.custom-block.caution [class*="custom-block-title"]::before {
content: '';
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E");
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
margin-right: 4px;
left: -5px;
top: -1px;
}
导航栏毛玻璃
新建一个 blur.css 文件并填入如下代码
/* .vitepress\theme\style\blur.css */
:root {
/* 首页下滑后导航透明 */
.VPNavBar:not(.has-sidebar):not(.home.top) {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px);
}
/* 搜索框透明 */
.DocSearch-Button {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px);
}
/* Feature透明 */
.VPFeature {
border: none;
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
background-color: transparent;
}
/* 文档页侧边栏顶部透明 */
.curtain {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px);
}
@media (min-width: 960px) {
/* 文档页导航中间透明 */
.VPNavBar:not(.home.top) .content-body {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px);
}
}
/* 移动端大纲栏透明 */
.VPLocalNav {
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(10px);
}
}
隐藏横条
新建一个 hidden.css 文件并填入如下代码
/* .vitepress\theme\style\hidden.css */
:root {
/* 文档页Logo出文字下横条 */
@media (min-width: 960px) {
.VPNavBarTitle.has-sidebar .title {
border-bottom-color: transparent;
}
}
/* 页脚横条隐藏 */
.VPFooter {
border-top: none;
}
/* 手机端菜单栏顶部横条隐藏 */
.VPNavBar.screen-open {
border-bottom: none;
}
/* 手机端菜单栏菜单分割线隐藏 */
.VPNavScreenMenuLink {
border-bottom: none;
}
/* 手机端菜单组隐藏 */
.VPNavScreenMenuGroup {
border-bottom: none;
}
/* 手机端大纲栏横条隐藏 */
.VPLocalNav {
border-bottom: none;
}
}
/* 导航栏下划线隐藏 */
.divider {
display: none;
}
Mac风格代码块
新建一个 vp-code.css 文件并填入如下代码
/* .vitepress/theme/style/vp-code.css */
/* 代码块：增加留空边距 增加阴影 */
.vp-doc div[class*=language-] {
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
padding-top: 20px;
}
/* 代码块：添加macOS风格的小圆点 */
.vp-doc div[class*=language-]::before {
content: "";
display: block;
position: absolute;
top: 12px;
left: 12px;
width: 12px;
height: 12px;
background-color: #ff5f56;
border-radius: 50%;
box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
z-index: 1;
}
/* 代码块：下移行号 隐藏右侧竖线 */
.vp-doc .line-numbers-wrapper {
padding-top: 40px;
border-right: none;
}
/* 代码块：重建行号右侧竖线 */
.vp-doc .line-numbers-wrapper::after {
content: "";
position: absolute;
top: 40px;
right: 0;
border-right: 1px solid var(--vp-code-block-divider-color);
height: calc(100% - 60px);
}
.vp-doc div[class*='language-'].line-numbers-mode {
margin-bottom: 20px;
}
插件使用
公告插件
推荐使用这个：https://github.com/ATQQ/sugar-blog/tree/master/packages/vitepress-plugin-announcement，有详细教程
时间线
采用了 @HanochMa/vitepress-markdown-timeline 的项目
引入
npm install vitepress-markdown-timeline
在 config.mts 中注册 markdown 解析插件
import timeline from "vitepress-markdown-timeline";
export default {
markdown: {
//行号显示
lineNumbers: true,
//时间线
config: (md) => {
md.use(timeline);
},
},
}
在 .vitepress/theme/index.ts 中引入时间线样式
// 只需添加以下一行代码，引入时间线样式
import "vitepress-markdown-timeline/dist/theme/index.css";
看板娘
推荐使用这个：https://oml2d.com/，有详细教程
浏览量
基本上使用的是 不蒜子，免费的且足够好用，但是存在访问一次增加两次访问量的情况。
引入
npm install busuanzi.pure.js
在 .vitepress/theme/index.ts 中配置
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { inBrowser } from 'vitepress'
import busuanzi from 'busuanzi.pure.js'
export default {
extends: DefaultTheme,
enhanceApp({ app , router }) {
if (inBrowser) {
router.onAfterRouteChanged = () => {
busuanzi.fetch()
}
}
},
}
在首页使用
本站总访问量 <span id="busuanzi_value_site_pv" /> 次
本站访客数 <span id="busuanzi_value_site_uv" /> 人次
自动侧边栏
推荐使用这个：https://vitepress-sidebar.cdget.com/zhHans/guide/getting-started,有详细教程
PS:需要重启才会生成侧边栏。
禁用F12
使用的是 @cellinlab/vitepress-protect-plugin
引入
npm install vitepress-protect-plugin
在 config.mts 中配置插件，不需要的选项可以不配置
import { defineConfig } from "vitepress"
import vitepressProtectPlugin from "vitepress-protect-plugin"
export default defineConfig({
// other VitePress configs...
vite: {
plugins: [
vitepressProtectPlugin({
disableF12: true, // 禁用F12开发者模式
disableCopy: true, // 禁用文本复制
disableSelect: true, // 禁用文本选择
}),
],
},
})
目前VitePress能完美适配的插件的不多，或多或少需要自己搞，慢慢等社区更新吧，后续找到好的，会更新本文。
布局插槽
默认主题的 <Layout/> 组件有一些插槽，能够被用来在页面的特定位置注入内容。
在 .vitepress/theme/components 目录新建一个 MyLayout.vue组件并
<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
const { Layout } = DefaultTheme
</script>
<template>
<Layout>
<!-- 插槽1 -->
<template #aside-outline-before>
<div class="title">aside-outline-before</div>
</template>
<!-- 插槽2 -->
<template #doc-before>
<div class="title">doc-before</div>
</template>
</Layout>
</template>
<style>
.title {
color: red;
}
</style>
然后在 .vitepress/theme/index.ts 中引入
// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import MyLayout from './components/MyLayout.vue'
export default {
extends: DefaultTheme,
Layout: MyLayout,
}
更多使用，请查看：https://vitepress.dev/zh/guide/extending-default-theme#layout-slots
部署
参考官网即可：https://vitepress.dev/zh/guide/deploy
我这里L-Blog有服务器，直接打包放服务器的，不过多描述 。
扫一扫
5204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
