vitepress 配置样式及插件记录
更新: 2025/8/7 字数: 0 字 时长: 0 分钟
1. 配置右侧目录自动增加序号
脚本介绍
由于vitepress 自身右侧目录无目录编号看起来不习惯，就增加了一个，主要是增加插件.vitepress\plugins\markdown-plugins\autoNumbering.ts和在mydoc.vitepress\config.ts引用插件
脚本代码
ts
import type { PluginWithOptions } from 'markdown-it'
interface NumberingOptions {
level?: number // 级别从几开始编号，默认 1
}
export function markdownItAutoNumbering(options: NumberingOptions = {}): PluginWithOptions {
const startLevel = options.level ?? 1
return (md) => {
const counters: number[] = []
md.core.ruler.push('auto_heading_numbering', (state) => {
counters.length = 0
for (const token of state.tokens) {
if (token.type === 'heading_open') {
const level = Number(token.tag.slice(1))
if (level >= startLevel) {
while (counters.length < level) counters.push(0)
counters[level - 1]++
for (let i = level; i < counters.length; i++) {
counters[i] = 0
}
const contentToken = state.tokens[state.tokens.indexOf(token) + 1]
if (contentToken && contentToken.type === 'inline') {
const numberPrefix =
counters
.slice(startLevel - 1, level)
.filter((num) => num > 0)
.join('.') + '. '
contentToken.content = numberPrefix + contentToken.content
if (contentToken.children && contentToken.children.length > 0) {
contentToken.children[0].content = numberPrefix + contentToken.children[0].content
}
}
}
}
}
})
}
}ts
<!-- 增加一行，2是我是从h2才开始计数的 -->
md.use(markdownItAutoNumbering({ level: 2 }))2. 配置宽屏
样式文件
具体的操作方法是直接是浏览器里面打开 f12 然后选择样式进行在这个里面调整成想要的结果之后再去改配置文件，参考了https://vp.teek.top/guide/theme-enhance.html 具体的文件新建引用就不说了直接贴代码
代码内容
css
:root {
/* 这里你可以设置具体的最大宽度，也可以用 100vw 实现全宽 */
--full-width-max-width: 100vw;
--page-max-width: 100vw;
--doc-max-width: 100vw;
--vp-sidebar-width: 272px; /* 你可以根据项目实际 sidebar 宽度调整 */
}
/* 全局样式统一调整 */
@media (min-width: 1280px) {
/* Navbar 样式 */
.VPNavBar.has-sidebar > .wrapper > .container > .title {
padding-left: max(32px, calc((100vw - var(--full-width-max-width) + 64px) / 2)) !important;
width: calc((100vw - var(--full-width-max-width) + 64px) / 2 + var(--vp-sidebar-width) - 32px) !important;
}
.VPNavBar > .wrapper > .container,
.VPNavBar.has-sidebar > .wrapper > .container {
max-width: var(--full-width-max-width) !important;
}
.VPNavBar.has-sidebar > .wrapper > .container > .content {
padding-left: max(32px, var(--vp-sidebar-width)) !important;
padding-right: 32px !important;
width: 100% !important;
}
/* Sidebar 样式 */
.VPSidebar {
padding-left: max(32px, calc((100vw - var(--full-width-max-width) + 64px) / 2)) !important;
width: calc((100vw - var(--full-width-max-width) + 64px) / 2 + var(--vp-sidebar-width) - 32px) !important;
}
/* Doc 页面容器布局（有 sidebar） */
.VPContent.has-sidebar {
padding-left: 0 !important;
padding-right: 0 !important;
}
.VPDoc.has-aside .content-container {
/* 避开左右两侧（加 padding 后多减一点，防止撑到 aside） */
width: calc(100vw - var(--vp-sidebar-width) - var(--vp-aside-width, 272px) - 50px) !important;
max-width: calc(100vw - var(--vp-sidebar-width) - var(--vp-aside-width, 272px) - 50px) !important;
/* 左移避开 Sidebar */
margin-left: var(--vp-sidebar-width) !important;
/* 内容内部 padding，避免贴边 */
padding: 0 20px !important;
box-sizing: border-box;
}
/* Doc 页面容器布局（无 sidebar） */
.VPDoc:not(.has-sidebar) .container,
.VPDoc:not(.has-sidebar) .container > .content {
max-width: var(--full-width-max-width) !important;
width: var(--full-width-max-width) !important;
margin: 0 auto !important;
padding: 0 24px !important;
box-sizing: border-box;
}
}
/* 1440px 以上的细化调整 */
@media (min-width: 1440px) {
.VPNavBar > .wrapper > .container {
max-width: var(--full-width-max-width) !important;
}
.VPNavBar.has-sidebar > .divider {
padding-left: calc((100vw - var(--full-width-max-width)) / 2 + var(--vp-sidebar-width)) !important;
}
}
/* 1536px 以上的细化调整 */
@media (min-width: 1536px) {
.VPNavBar > .wrapper > .container,
.VPDoc .container {
max-width: var(--full-width-max-width) !important;
}
}3. 自建不蒜子
源码配置
直接放源码吧，用的网上的开源程序，docker 部署在服务器,官方还有一些其他配置可以参考着改下源码
sh
# 这个的前提是部署过redis，他是借助redis的，下面的密钥看情况，目前默认的应该是无密钥也可以用
# 至于重启或者删除容器会不会丢失数据之类的，未测试
docker run -d \
--name busuanzi \
-e TZ=Asia/Shanghai \
--network mynet \
-p 8080:8080 \
-v /root/data/bsz:/app/expose \
-e REDIS_ADDRESS=redis:6379 \
-e REDIS_PASSWORD=******** \
-e BSZ_SECRET=9f3d7a1e5b824c6d9a2f4e8b0c1d3f7a \
-e WEB_LOG=true \
xcsoft/busuanzi:latestvue
<!-- 参考了官网其实额没看太懂，目前这个实际上就相当于重复请求api获取数字，另外总感觉访问人数有多的，看了后台是IP记录应该 -->
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const sitePv = ref('--')
const siteUv = ref('--')
onMounted(() => {
// 动态插入 busuanzi 脚本，配置自定义 API 和参数，换成自己的
const script = document.createElement('script')
script.src = 'https://********/busuanzi/js'
script.setAttribute('data-api', 'https://******/busuanzi/api')
script.setAttribute('data-prefix', 'busuanzi')
script.setAttribute('data-style', 'default')
script.async = true
document.body.appendChild(script)
console.log('Busuanzi script appended')
// 轮询检测 busuanzi 更新的数据
const timer = setInterval(() => {
const pv = document.getElementById('busuanzi_site_pv')
const uv = document.getElementById('busuanzi_site_uv')
console.log('Checking busuanzi values:', pv?.textContent, uv?.textContent)
if (pv?.textContent && pv.textContent !== '--') {
sitePv.value = pv.textContent
}
if (uv?.textContent && uv.textContent !== '--') {
siteUv.value = uv.textContent
}
if (sitePv.value !== '--' && siteUv.value !== '--') {
clearInterval(timer)
console.log('Busuanzi data fetched, timer cleared.')
}
}, 500)
})
</script>
<template>
<div class="panel">
<div class="container">
<section class="grid">
<span class="text">
本站总访问量 <span id="busuanzi_site_pv" class="font-bold">{{ sitePv }}</span> 次
</span>
<span class="text">
本站访客数 <span id="busuanzi_site_uv" class="font-bold">{{ siteUv }}</span> 人次
</span>
</section>
</div>
</div>
</template>
<style scoped>
.panel {
margin-top: 12px;
margin-bottom: 8px;
}
.container {
background-color: var(--vp-c-bg-soft);
border-radius: 8px;
width: 100%;
min-height: 32px;
max-width: 1152px;
margin-left: auto;
margin-right: auto;
}
.grid {
font-weight: 500;
padding: 12px;
justify-items: center;
align-items: center;
grid-template-columns: repeat(2, minmax(0, 1fr));
display: grid;
gap: 12px;
}
.text {
font-size: 0.875rem;
line-height: 1.25rem;
}
</style>