本页目录
这是一款基于 vitepress 打造的适合图文资源分享的博客主题。不改动原有布局的大方向的基础上，做了列表和一些视觉上的调整。这款主题更加适合设计或者开发人员进行资源的整理和分享。
我选择 vitepress 就是因为它的速度够快，加上部署到 vercel 免费无需服务器，整体来说经济实惠又好用，值得大家使用。
细节预览
功能介绍
-
基于路由实现标签、分类、存档、分页功能。方便用户通过页面域名进行分页或者相关内容的查看；
-
存档实现年和年+月的形式；
-
文章列表分为宫格和列表两种样式，方便用户根据喜好切换；
-
内页增加标签、分类面包屑导航等；
-
增加阅读时长等常用功能；
-
文章内增加一个资源汇总组件。方便资源的出处跳转、 GitHub 资源数据获取等；
-
Feed 订阅
-
根据标签获取相关文章
-
一个工具导航页面
-
一个关于页面
特效
-
文章列表可嵌入一个博主卡片，可配置是否显示
-
博主卡片可配置选择放置音乐播放和打赏咖啡
-
背景音乐可配置音乐清单
-
打赏咖啡可配置一个二维码图片
-
音乐播放器基于 pinia 管理播放状态
-
一个春节灯笼挂件，可配置灯笼文字以及是否显示
-
侧栏一个烟花许愿挂件，可配置标题、内容以及是否显示等
-
暗黑模式下可配置雪花特效
第三方组件
-
轮播组件
-
提示组件
-
弹层组件
-
消息框组件
-
VueUse 复制文本、缓存
-
pinia 状态管理
-
时间友好化组件
开始使用
-
git clone 克隆或者直接下载这个仓库到你的本地电脑
-
本地电脑需要安装 node.js 和 npm 或者 yarn。不会的百度如何安装
-
最好电脑安装 Visual Studio Code 这个开发者工具，方便管理代码
-
用上面这个开发工具导入刚下载的这个仓库
-
工具菜单选择终端 > 新建终端，输入命令 npm install 回车开始安装本仓库用到的依赖，可能需要几分钟时间
-
安装完成依赖，会生成 node_modules 目录
-
打开 package.json 这个文件，文件里有个三角箭头+调试，点击后会看到工具上方出现 dev,build 等选项，点击 dev 进行本地运行看效果
-
可以看到 app 比比的完整博客页面效果
-
打开 docs/.vitepress/config.ts 文件进行全局配置，已经注明了各个参数的用途，试着改一下，然后刚刚运行的博客页面会自动变内容
-
所有前端显示的文章放在 docs/posts/目录下，自己试着新建一个页面，跟着比比的文章格式写一篇文章，自己实践才是真理
-
docs/pages/目录下放的是功能页面，一般无需修改
-
工具导航数据放在 docs/.vitepress/toolsdata.js 里。按照格式添加新的即可
-
docs/prepare/目录下放的是临时存放的还不想发布的文章
-
public 和 static 目录放一些不会被转义的资源
-
其他的自行摸索代码
-
后续公众号【比比工房】会放一些教程，有问题的可以在公众号回复留言问题