这是一款基于 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目录放一些不会被转义的资源
- 其他的自行摸索代码
- 后续公众号【比比工房】会放一些教程，有问题的可以在公众号回复留言问题