README
约 595 字大约 2 分钟
2025-08-30
DB-Blog-Plume
本站基于 vuepress & vuepress-theme-plume 构建.
主题作者:https://github.com/pengzhanbo
访问
参考
博客主页为自定义页面,若你也在使用这个博客主题并想参考本博客主页,可查看以下说明:
配置
- 自定义页面的vue组件路径:docs/.vuepress/theme/components
- 自定义页面的css样式文件:docs/.vuepress/theme/styles
- 全局组件:在
docs/.vuepress/client.ts中导入相应的组件和样式,示例如下
import './theme/styles/introduce.css'
import Introduce from './theme/components/ColourPicker.vue'
export default defineClientConfig({
enhance({ app }) {
app.component('ColourPicker', ColourPicker)
},
})组件说明
DockBar.vue-> Dock栏Hitokoto.vue-> 一言BlogHero.vue-> 主页核心组件Introduce.vue-> 介绍页卡片NavPage.vue/NavPageMinecraft.vue-> 导航页面入口NavigationDirectory.vue-> 共用导航页面组件ColourPicker.vue-> 导航栏颜色选择器GitHubCard.vue-> GitHub卡片GiteeCard.vue-> 码云卡片NeteaseMusicCard.vue-> 网易云音乐卡片
Introduce.vue为介绍页卡片组件, 以下组件的使用说明可查看原仓库的README,此处主要进行细微修改并修改手机浏览兼容性.
AboutMeCharacter.vue,AboutMeFriendLink.vue,AboutMeName.vue,AboutMeAbilities.vue,AboutMeText.vue以及Introduce.vue均修改自该博客
AsideOutlineAfter.vue为右边侧边栏目录下方显示的额外跳转链接,可按需求修改或新增更多链接.ColourPicker.vue为导航栏的颜色选择器,可修改主题颜色,修改自该博客.- 导航页数据使用 JSON 维护:将包含
categories与sites数组的 JSON 放入docs/.vuepress/theme/data/后,交互脚本会自动发现它。每个资源均包含id、name、url、desc、category与tags字段;分类图标使用 emoji。 - 可使用交互式脚手架命令逐项新增资源:
pnpm nav:add也可使用完整参数直接新增资源:
pnpm nav:add -- --id=vuepress --name=VuePress --url=https://v2.vuepress.vuejs.org/ --desc="静态站点生成器" --category=frontend --tags=Vue,文档 --data=docs/.vuepress/theme/data/navigation.json交互模式第一步可选择数据文件,分类可输入编号或分类 ID;每次添加成功后可选择继续录入或退出。批量模式须通过 --data 指定目标文件。命令会校验分类、链接格式和资源 ID 是否重复。
主页
- 主页布局请看 BlogHero.vue
- 参考该博客
更新日志
2026/8/22 01:50
查看所有更新日志
3f91c-📝 docs(blog): 更新Blog于87d10-更新于d8567-主题优化于12d88-细节修改于81497-修复NavPage于e5b0b-优化细节于b219e-大更新!于3f455-vp update于627d6-little changes于db5db-+blog于38c5e-update README于d3a40-first commit于