TIPS:
基于 vitepress博客APP比比已经完成：appbeebee.com/ ,
可以边品鉴边阅读下面的内容
===
我是最近才了解到 vitepress，之前用过 vuepress搭建过一个文档。
是在某天的下午，我看到了一个博客：罗磊的独立博客：luolei.org/
快速、清爽的博客风格瞬间吸引了我。
在作者的回复中我了解到是用 vitepress搭建的。
于是一个晚上通读了官方 vitepressa.dev 对它的介绍，构建速度是 vuepress的100倍、vue3、更好的适配 ts、热更新、对 SEO更友好等等关键词都在深深的打动着我
于是决定用它搭建一个前端资源分享博客。
第一步：拿来主义
我对这个资源博客的要求就是清爽、有分类、标签、存档、相关文章、翻页页码就 OK了。
主意拿定后我就前往 github.com搜索 vitepress+blog关键词，别说，还真看到了一款简单清爽的开源代码
github.com/airene/vite…
博客预览：ti.bi/
直接 git clone本地后，安装依赖。完美本地运行。
第二步：优化路由
在添加几篇文章体验后，发现这个 demo的列表都是生成静态的，page_2.html｜｜page_3.html。这样会在结构中自动生成许多的.md文件。
还有一点就是标签和存档列表都是独立没有翻页，如果内容多了后续很难阅读。
而我想要的列表形式应该是
html?tag=xxx&category=xxx&year=xxxx&month=xx&page=2
一个页面就能进行列表筛选和翻页。
于是我有在 github上找到了github.com/ATQQ/sugar-… 博客地址：sugarat.top/
而这个源码正好是我要的这种列表形式
在下载了大佬的源码研究了一番后终于实现了按分类、按标签、按年、按年+月的方式进行内容筛选，也加上了页码的功能，目前是文章达到 24 篇为一页，未达到 24 篇不显示页码
第三步：完善布局，加些小动画
这个博客我保留了 vitepress的原始结构，左侧为分类菜单，右侧为内容区。添加了网格和列表排版方式，增加了随机看一篇文章
详情页还增加了相关文章、版权CC、面包屑导航、友好时间、字数等常用信息
因为是资源分享为主，在内容里我嵌入了出处信息 vue组件，并异步获取 github相关 api信息
在处理作者模块的地方，我决定就不放联系方式那些了，用了一个跟随鼠标眨眼睛的动画，外加一个我喜欢听的歌曲播放器和打赏咖啡
打赏咖啡的二维码用的是微信小程序收款码，方便快捷到微信零钱里，还不收手续费
第四步：vercel部署上线
这个操作百度一下有很多教程，简单点讲就是不用自己搭建服务器，把本地代码上传到 github后，通过 vercel网站进行免费构建，再绑定一个域名即可。
这样，一个没有什么成本的资源博客网站就建成了。
最后，申请个 google联盟广告丰富一下网站。再外链一下自己的公众号和原创会员平台，香香的 app比比站点就出炉了～～
欢迎大家品鉴：appbeebee.com/
