《開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個基於VuePress的知識管理&博客主題——vdoing。

vdoing是VuePress的一個主題，是在默認主題基礎上做的修改和擴展，很多配置仍然沿用官方配置。使用本主題可以很方便地搭建一個結構化的知識庫或博客。這個主題的初衷是打造一個好用的、面向程式設計師的知識管理工具。

對於程式設計師來說，繁雜的知識體系難免會有遺忘的地方。如果有一個方便好用的知識管理工具，可以幫助我們很好地管理知識，並能夠快速地把遺忘的知識點找回來。

特性

知識管理：包含三種典型的知識管理形態：結構化、碎片化、體系化。輕鬆打造屬於自己的知識管理平台
結構化：自動生成側邊欄、目錄頁、索引頁、麵包屑等，輕鬆構建一個結構化知識庫
碎片化&個性化：博客功能提供一種知識的碎片化形態，並提供個性化的博客配置
簡潔高效：以 Markdown 為中心的項目結構，內置自動化工具，以更少的配置完成更多的事。配合多維索引快速定位每個知識點
沉浸式閱讀體驗：專為閱讀設計的UI，配合多種顏色模式、可關閉的側邊欄和導航欄，帶給你一種沉浸式閱讀體驗

擴展功能

相較於默認主題，添加的功能內容主要有：

添加方便管理學習筆記和技術文檔的自動生成結構化側邊欄、自動生成front matter、目錄頁、擴展的搜索框插件、麵包屑、快捷翻頁按鈕等，讓你快速定位到任何你想要找的內容
添加博客相關的文章信息欄（作者與創建時間）、最近更新欄、博主信息欄、頁腳版權欄、分類功能+分類頁、標籤功能+標籤頁、歸檔頁、評論插件等
方便好用的 Markdown 容器
首頁文章列表、個性化配置和樣式美化等
多種顏色模式供用戶選擇：跟隨系統、淺色模式、深色模式、閱讀模式
提高搬磚效率的輔助工具：批量操作front matter工具

快速上手

安裝和啟動

知識庫兼博客風格預設配置

# clone the projectgit clone https://github.com/xugaoyi/vuepress-theme-vdoing.git# enter the project directorycd vuepress-theme-vdoing# install dependency 注意：如安裝不成功請關閉淘寶源。npm install # or yarn install# developnpm run dev # or yarn dev

文檔風格預設配置

# clone the projectgit clone https://github.com/xugaoyi/vuepress-theme-vdoing-doc.git# enter the project directorycd vuepress-theme-vdoing-doc# install dependency 注意：如安裝不成功請關閉淘寶源。npm install # or yarn install# developnpm run dev # or yarn dev

倉庫地址： https://github.com/xugaoyi/vuepress-theme-vdoing-doc

簡潔模板預設配置（社區提供）

# clone the projectgit clone https://github.com/u2sb/vuepress-theme-vdoing-template.git# enter the project directorycd vuepress-theme-vdoing-template# install dependency 注意：如安裝不成功請關閉淘寶源。npm install # or yarn install# developnpm run dev # or yarn dev

倉庫地址： https://github.com/u2sb/vuepress-theme-vdoing-template

使用Vdoing主題

安裝最新的Vdoing主題包：

npm install vuepress-theme-vdoing -D

在.vuepress/config.js中配置使用主題：

// config.jsmodule.exports = { theme: 'vdoing'}

提示：

1、不建議在原默認vuepress項目上單獨安裝使用本主題包，而是clone我的整個項目再替換你自己的內容即可

2、修改config.js配置後需要重新啟動項目才會生效

版本升級

主題的版本會不定期更新，你只需更新npm主題包即可：

npm update vuepress-theme-vdoing

注意

1、如更新後沒起作用或報錯，嘗試把node_modules文件夾刪除再npm i重新安裝

2、在.vuepress/config.js中，設置theme: 'vdoing'才是使用npm主題依賴包

// config.js

module.exports = {

theme: 'vdoing', // npm主題依賴包

// theme: require.resolve('../../vdoing'), // 使用本地主題包

}

一個簡潔高效的VuePress知識管理&博客主題

特性

擴展功能

快速上手

相關案例