Appbeebee是一款基于Vitepress開發的博客主題，專為設計和開發人員設計，適合圖文資源分享。主題保留了Vitepress原有布局，優化了列表樣式和視覺效果。主要功能包括基于路由的標簽分類、存檔分頁、宮格/列表切換、面包屑導航、閱讀時長統計和資源匯總組件。特色功能包含可配置的音樂播放器、打賞二維碼、春節燈籠和煙花許愿掛件等特效。主題部署在Vercel上，免費且無需服務器。項目代碼托管在GitHub。
這是一款基于 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目錄放一些不會被轉義的資源
- 其他的自行摸索代碼
- 后續公眾號【比比工房】會放一些教程，有問題的可以在公眾號回復留言問題