vuepress-theme-vdoing使用體驗

前言

今天在GitHub的trending上看vue專案，其中有個vuepress-theme-vdoing專案看起來挺有意思，于是下載下來使用一下，

看頁面，感覺像是GitHub上的檔案，比如vue官方檔案就是用這種的，之前一直想弄，但沒去嘗試過，今天借著體驗這個專案去了解檔案庫，

首先先使用這個專案，然后分析這個專案的原理，最后自定義，大致就這三步，

專案地址

專案介紹：一款簡潔高效的VuePress 知識管理&博客(blog) 主題

步驟1：下載，下載zip，然后解壓，2.9M大小，

步驟2：初始化，

用vscode打開解壓后的檔案夾；ctrl+`打開vscode的終端；輸入npm install，下載有些慢，

added 1836 packages from 1406 contributors and audited 1838 packages in 925.376s

步驟3：運行，

在終端輸入npm run dev，還是有些慢，不過成功了，

success [07:12:57] Build cbe37a finished in 192440 ms!

最后成功，

體驗不錯，沒出現問題，

由圖可知，

在這里插入圖片描述

這個專案由兩個部分組成，一個是主題設定theme，一個是檔案docs，theme中是設定檔案轉換以及主題切換，

感觸

寫開源專案，如果可以在每個代碼第一行備注一下，會更有利于下一次開發以及多人開發，

更有利于開源專案的發展，

主要在docs上修改，theme中了解其中的結構即可，

theme-vdoing的專案結構原理：index.js自動生成結構化側邊欄；layouts的檔案夾中的Layout.vue組件是圖層組件，包括整個網站的所有組件，如首頁、導航欄、頁面、分類頁面、標簽頁面、歸檔頁面、側邊欄等等；

theme-vdoing的部分不用多管，默認即可，懂一點最好，
在這里插入圖片描述

docs的專案結構：config/nav.js放了導航欄，用于路由；index.md設定首頁的圖片；dist檔案夾存放著運行后生成的靜態網頁；剩下的主體就是markdown檔案了，在開頭需要設定標題，剩下就是正常的markdown檔案筆記了，

在這里插入圖片描述

補充：config.js中設定主題

主要修改docs檔案，在config.js中設定主題等；在nav.js中設定路由；在index.md中設定首頁的圖片；在@pages檔案夾中設定分類、標簽、歸檔的頁面；在目錄頁設定檔案；然后按規范寫檔案，

最后用npm run build 打個包，包在docs/dist中，將這個包放到服務器中即可，

博客網站有兩種，一種是博客平臺，一種是個人博客，用博客平臺的好處是功能強大且推廣好，缺點是受平臺管制；個人博客的主要缺點就是不好搭建，所有衍生出原生和第三方，

原生的個人網站自由度高，但是作業量很大；個人開發一般是套用第三方的網站；同時網站還分靜態網站和動態網站，靜態網站簡單些，但沒互動，如評論、賬戶等功能，

動態博客系統有halo；靜態博客系統有hexo；

動態博客系統的halo的原理是：資料庫h2存盤文章，后臺使用springboot；有markdown決議器，和原生動態網站的開發一樣，需要資料庫，后臺、前臺；

靜態博客系統hexo的原理是：一個靜態站點生成器，將markdown轉化為靜態網頁，然后像原生靜態網站一樣將靜態網頁放到服務器空間即可，

而vuepress-theme-vdoing屬于哪一種呢，感覺和hexo相關，

還不錯，get一招，以后實踐，不過我理想中的博客系統是把前臺和后臺都設計好，然后我只需要在登錄后臺寫博客發表即可，而不是寫好后打個包，再部署一下，這樣有點麻煩，

這部分暫時寫到這，后續看情況使用這個專案，

更新地址：GitHub

更多內容請關注：CSDN、GitHub、掘金

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/40090.html

標籤：其他