Appbeebee是一款基于Vitepress開發(fā)的博客主題，專為設(shè)計(jì)和開發(fā)人員設(shè)計(jì)，適合圖文資源分享。主題保留了Vitepress原有布局，優(yōu)化了列表樣式和視覺效果。主要功能包括基于路由的標(biāo)簽分類、存檔分頁、宮格/列表切換、面包屑導(dǎo)航、閱讀時(shí)長統(tǒng)計(jì)和資源匯總組件。特色功能包含可配置的音樂播放器、打賞二維碼、春節(jié)燈籠和煙花許愿掛件等特效。主題部署在Vercel上，免費(fèi)且無需服務(wù)器。項(xiàng)目代碼托管在GitHub。
這是一款基于 vitepress 打造的適合圖文資源分享的博客主題。不改動原有布局的大方向的基礎(chǔ)上，做了列表和一些視覺上的調(diào)整。這款主題更加適合設(shè)計(jì)或者開發(fā)人員進(jìn)行資源的整理和分享。
我選擇 vitepress就是因?yàn)樗乃俣葔蚩欤由喜渴鸬絭ercel免費(fèi)無需服務(wù)器，整體來說經(jīng)濟(jì)實(shí)惠又好用，值得大家使用。
細(xì)節(jié)預(yù)覽
功能介紹
- 基于路由實(shí)現(xiàn)標(biāo)簽、分類、存檔、分頁功能。方便用戶通過頁面域名進(jìn)行分頁或者相關(guān)內(nèi)容的查看；
- 存檔實(shí)現(xiàn)年和年+月的形式；
- 文章列表分為宮格和列表兩種樣式，方便用戶根據(jù)喜好切換；
- 內(nèi)頁增加標(biāo)簽、分類面包屑導(dǎo)航等；
- 增加閱讀時(shí)長等常用功能；
- 文章內(nèi)增加一個(gè)資源匯總組件。方便資源的出處跳轉(zhuǎn)、 github資源數(shù)據(jù)獲取等；
- Feed訂閱
- 根據(jù)標(biāo)簽獲取相關(guān)文章
- 一個(gè)工具導(dǎo)航頁面
- 一個(gè)關(guān)于頁面
特效
- 文章列表可嵌入一個(gè)博主卡片，可配置是否顯示
- 博主卡片可配置選擇放置音樂播放和打賞咖啡
- 背景音樂可配置音樂清單
- 打賞咖啡可配置一個(gè)二維碼圖片
- 音樂播放器基于pinia管理播放狀態(tài)
- 一個(gè)春節(jié)燈籠掛件，可配置燈籠文字以及是否顯示
- 側(cè)欄一個(gè)煙花許愿掛件，可配置標(biāo)題、內(nèi)容以及是否顯示等
- 暗黑模式下可配置雪花特效
第三方組件
- 輪播組件
- 提示組件
- 彈層組件
- 消息框組件
- VueUse 復(fù)制文本、緩存
- pinia狀態(tài)管理
- 時(shí)間友好化組件
開始使用
- git clone克隆或者直接下載這個(gè)倉庫到你的本地電腦
- 本地電腦需要安裝 node.js和 npm或者 yarn。不會的百度如何安裝
- 最好電腦安裝 Visual Studio Code這個(gè)開發(fā)者工具，方便管理代碼
- 用上面這個(gè)開發(fā)工具導(dǎo)入剛下載的這個(gè)倉庫
- 工具菜單選擇終端 > 新建終端，輸入命令 npm install 回車開始安裝本倉庫用到的依賴，可能需要幾分鐘時(shí)間
- 安裝完成依賴，會生成 node_modules目錄
- 打開 package.json這個(gè)文件，文件里有個(gè)三角箭頭+調(diào)試，點(diǎn)擊后會看到工具上方出現(xiàn)dev,build等選項(xiàng)，點(diǎn)擊 dev進(jìn)行本地運(yùn)行看效果
- 可以看到 app比比的完整博客頁面效果
- 打開docs/.vitepress/config.ts文件進(jìn)行全局配置，已經(jīng)注明了各個(gè)參數(shù)的用途，試著改一下，然后剛剛運(yùn)行的博客頁面會自動變內(nèi)容
- 所有前端顯示的文章放在 docs/posts/目錄下，自己試著新建一個(gè)頁面，跟著比比的文章格式寫一篇文章，自己實(shí)踐才是真理
- docs/pages/目錄下放的是功能頁面，一般無需修改
- 工具導(dǎo)航數(shù)據(jù)放在 docs/.vitepress/toolsdata.js里。按照格式添加新的即可
- docs/prepare/目錄下放的是臨時(shí)存放的還不想發(fā)布的文章
- public和 static目錄放一些不會被轉(zhuǎn)義的資源
- 其他的自行摸索代碼
- 后續(xù)公眾號【比比工房】會放一些教程，有問題的可以在公眾號回復(fù)留言問題