前言
更新: Invalid Date 字数: 0 字 时长: 0 分钟
🍊Hello，各位好，我是面包！
这篇文档收集了一些我在使用Vitepress搭建静态博客网站时的小碎片知识。
Vitepress默认模板的安装
Vitepress库的安装
前置依赖
npm|pnpm|yarn检查安装命令：
npm -v安装Vitepress
npm add -D vitepress初始化
npx vitepress init本地启动静态网站
run docs:dev本地启动静态网站
run docs:build小纸条
- npm install是用来安装项目依赖的命令。当你克隆一个使用npm管理依赖的项目时，或者想为你的项目添加新的依赖时，你通常需要运行这个命令。这个命令会自动解析项目的package.json文件，安装所有需要的依赖包。安装后的依赖包会被放在项目根目录下的node_modules文件夹中。
- npm run dev是一个用于启动开发环境的命令。这个命令通常会运行一些脚本，这些脚本会启动项目的开发服务器，并可能还会运行一些其他的开发相关的任务，比如热更新代码、启动测试服务器等。在开发模式下，由于node会在后台做动态资源转发操作，所以一般不会产生跨域问题。
- npm run build是一个用于构建生产环境的命令。这个命令通常会运行一些脚本，这些脚本会打包你的项目，将所有的代码、资源文件压缩合并，然后输出到一个指定的目录中，这个目录通常是用于部署生产的。在生产环境下，由于没有node的动态资源转发操作，如果前后端分离项目中前端和后端的地址不同源，就会产生跨域问题。
指定文档目录
在config.mts指定文档目录为docs
export default defineConfigWithTheme({
srcDir: "docs",
})为博客增加鼠标点击特效-烟花
新建一个./theme/components/confetti.vue文件
TIP
组件代码
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import confetti from 'canvas-confetti';
// 定义触发烟花效果的函数
const triggerFireworks = (event: MouseEvent) => {
const x = event.clientX / window.innerWidth; // 鼠标点击的相对 X 坐标
const y = event.clientY / window.innerHeight; // 鼠标点击的相对 Y 坐标
// 配置烟花效果
confetti({
particleCount: 150, // 粒子数量，增加数量以增强效果
startVelocity: 5, // 初始速度，降低速度
spread: 360, // 扩散角度，360 度表示全方位扩散
origin: { x, y }, // 粒子的起始位置
gravity: 0.2, // 重力值，使粒子更轻盈
scalar: 0.8, // 粒子大小
ticks: 200, // 动画持续时间（帧数）
shapes: ["circle", "square", "star"], // 粒子形状
colors: ["#ff00ff", "#00ffff", "#ffff00", "#ff0000", "#00ff00", "#0000ff"], // 粒子颜色
drift: 0, // 粒子的水平漂移量
decay: 0.94, // 粒子速度衰减
});
// 添加上升的粒子效果
confetti({
particleCount: 30,
startVelocity: 10,
spread: 360,
origin: { x, y },
gravity: -0.2, // 负值使粒子向上飘动
scalar: 0.6,
ticks: 120,
shapes: ["square"],
colors: ["#ff0000", "#00ff00", "#0000ff"],
});
};
// 挂载时绑定全局点击事件
onMounted(() => {
document.addEventListener("click", triggerFireworks);
});
// 组件销毁时移除事件监听
onUnmounted(() => {
document.removeEventListener("click", triggerFireworks);
});
</script>:::
然后在index.ts中添加全局定义
Details
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import './style.css'
import confetti from "./components/confetti.vue"
export default {
extends: DefaultTheme,
Layout: () => {
return h(DefaultTheme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
})
},
async enhanceApp({ app, router, siteData }) {
// 注册全局组件transparent
app.component('confetti' , confetti),
}
} satisfies Theme最后在md中调用即可
Details
<!-- 爆炸效果 -->
<confetti />Vitepress插入live2d人物，为你的网页添加一个看板娘
.
docs
├─ .vitepress ->VitePress的配置目录
│ └─ config.mts ->定义网站的全局配置
│ └─ theme ->自定义主题
│ └─ index.mts 或者 index.ts ->定义主题的样式、布局和功能
├─ docs ->存放文档内容的主目录
│ ├─ index.md ->文档网站的首页文件
│ └─ public ->存放静态资源的目录
└─ node_modules ->Node.js项目中依赖模块的存储目录在你的VitePress项目中安装oh-my-live2d库
npm install oh-my-live2d@latest然后在.vitepress/theme/index.ts文件中添加以下代码
// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme';
export default {
...DefaultTheme,
async enhanceApp() {
if (!import.meta.env.SSR) {
const { loadOml2d } = await import('oh-my-live2d');
loadOml2d({
models: [
{
path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json'
}
]
});
}
}
};在path路径中填写你的模型文件.model.json|.model3.json
loadOml2d参数解析
mobileDisplay:移动端人物展示开关(true|false)
models: {
path:本地|在线模型地址
position:人物位置
scale:人物缩放大小
stageStyle:舞台范围(width宽度height高度)
}
loadOml2d({
mobileDisplay: true,
models: [
{
"path": ['/ariu/ariu.model3.json',],
"position": [0, 60],
"scale": 0.08,
"stageStyle": {
"height": 500
}
},
{
"path": ['/豌豆射手/豌豆射手.model3.json',],
"position": [0, 60],
"scale": 0.16,
"stageStyle": {
"height": 400
}
}
]
});小纸条
本地模型文件要放在public文件夹下，支持多级搜索
小纸条
如果出现这个报错可不必理会，正常build就行。
live2d人物来源
以下列出此网站的live2d人物来源
【免费L2D模型】可盐可甜的机能风少女！无料模型大公开~点击领取-哔哩哔哩
【live2d免费模型】⚡️小黑子:过来吧我的辛苦奴隶⚡️-哔哩哔哩
网上开源的live2d人物模型库
[人物模型库]-(https://github.com/oh-my-live2d/live2d-models)
[狐狸]-(https://model.oml2d.com/Senko_Normals/senko.model3.json)
[小恶魔]-(https://model.oml2d.com/Pio/model.json)
[学生]-(https://model.oml2d.com/shizuku/shizuku.model.json)
[上班族]-(https://model.oml2d.com/shizuku_pajama/index.json)
解决Vitepress无法加载图床外链的问题
在config.mts的export default defineConfigWithTheme中添加以下代码
head: [
/* 解决了Vitepress无法加载图床链接的问题 */
[
"meta",
{
name:"referrer",
content:"no-referrer"
}
],
],