吉林公司網(wǎng)站建設(shè)一條龍全包（有哪些文檔文庫平臺(tái)網(wǎng)站）文檔庫網(wǎng)站，
大家好，我是保姆皮，最近我上線了自己的《編程寶典》網(wǎng)站，可以在線閱讀我分享過的各種編程學(xué)習(xí)路線和知識(shí)干貨。指路：https://codefather.cn/
不少小伙伴催我出教程，說也想做個(gè)類似的文檔網(wǎng)站所以我用最快的速度出了 “保姆級(jí)文檔網(wǎng)站制作教程”，并且開源了一套網(wǎng)站模板大家只需要幾分鐘的時(shí)間，就能快速做出同款的、精簡的文檔網(wǎng)站推薦觀看視頻教程：https://www.bilibili.com/video/BV1LQ4y1V79r/
以下為文字版教程：引言首先，很多同學(xué)肯定會(huì)覺得這個(gè)網(wǎng)站的風(fēng)格比較眼熟沒錯(cuò)，這是基于 VuePress 靜態(tài)網(wǎng)站生成器開發(fā)的有同學(xué)問了，你咋不用 vitepress 嘞？啊，也用過，但是在生態(tài)和成熟度上不及 VuePress，折騰一番后還是選擇返璞歸真。
別看這么一個(gè)網(wǎng)站非常精簡，但是想做好它，這里面的門道可多著呢你要閱讀 VuePress 的官方文檔，還要在琳瑯滿目的插件中做選擇，很費(fèi)時(shí)間我出這期教程的目的，就是幫大家做做減法，不用閱讀那老長的官方文檔，我?guī)痛蠹疫x好了插件。
甚至，我給大家提供了一套我們自己增強(qiáng)的、開箱即用的文檔網(wǎng)站模板以后你要做自己的文檔網(wǎng)站，直接用這個(gè)模板，不用寫代碼，有手就行VuePress 文檔網(wǎng)站制作教程一、項(xiàng)目啟動(dòng)先花 30 秒的時(shí)間啟動(dòng)項(xiàng)目首先打開我的開源項(xiàng)目 codefather，切換分支為 template 模板。
指路：https://github.com/liyupi/codefather
然后下載代碼壓縮包：
解壓后，用 WebStorm 或 VS Code 等開發(fā)工具打開項(xiàng)目項(xiàng)目基于 VuePress 實(shí)現(xiàn)，需要 Node 和 Npm 環(huán)境，盡量和我的版本號(hào)保持一致防止后面出現(xiàn)莫名其妙的報(bào)錯(cuò)，沒有的同學(xué)請到官網(wǎng)安裝一下。
首次運(yùn)行前，需要運(yùn)行 npm install 命令安裝依賴：
安裝依賴成功后，在 package.json 文件中點(diǎn)擊 docs:dev 運(yùn)行即可：
運(yùn)行成功，默認(rèn)在本地的 8080 端口，就能訪問到網(wǎng)站啦！
接下來，我會(huì)詳細(xì)講解這套 VuePress 模板，包括目錄結(jié)構(gòu)、基本配置、主題配置、插件配置等，讓大家在學(xué)會(huì) VuePress 的基礎(chǔ)上、能靈活運(yùn)用這套模板輕松定制網(wǎng)站二、模板目錄結(jié)構(gòu)先來看下 VuePress 模板的目錄結(jié)構(gòu)，如下圖：。
所有的文檔（目錄）直接放到項(xiàng)目根目錄下即可三、基本配置我們打開 VuePress 的核心配置文件 config.ts，所有的配置基本都集中在這個(gè)文件，可以在這里全局改變網(wǎng)站的內(nèi)容、主題樣式、使用插件增強(qiáng)能力等。
先來看一些基本配置：1、網(wǎng)站基本信息包括網(wǎng)站標(biāo)題、描述，還有我們自定義的作者、域名、全局標(biāo)簽：const author = "程序員魚皮"; const domain = "https://codefather.cn"
; const tags = ["程序員", "編程", "計(jì)算機(jī)"]; exportdefaultdefineConfig({ title: "魚皮的編程寶典", description:
"貼心的編程學(xué)習(xí)路線，全面的編程知識(shí)百科", ... }); 2、網(wǎng)站 head 標(biāo)簽head 標(biāo)簽作為 HTML 網(wǎng)頁文件的大腦，通常包含了網(wǎng)頁的重要基本信息，比如上面提到的網(wǎng)頁標(biāo)題、描述等使用 VuePress 工具，我們可以在 head 配置中添加網(wǎng)站 head 標(biāo)簽信息，比如設(shè)置站點(diǎn)圖標(biāo)、設(shè)置有利于 SEO（搜索引擎優(yōu)化）的元信息、添加第三方統(tǒng)計(jì)分析代碼等：。
head: [ // 站點(diǎn)圖標(biāo) ["link", { rel: "icon", href: "/favicon.ico" }], // SEO [ "meta", { name:
"keywords", content: "程序員魚皮, 編程學(xué)習(xí)路線, 編程知識(shí)百科, Java, 編程導(dǎo)航, 前端, 開發(fā), 編程分享, 項(xiàng)目, IT, 求職, 面經(jīng)", }, ],
// 百度統(tǒng)計(jì) [ "script", {}, ` var _hmt = _hmt || []; (function(){ var hm = document.createElement(
"script"); hm.src = "https://#/hm.js?2675818a983a3131404cee835018f016"; var
s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); `, ], ],
3、永久鏈接默認(rèn)情況下，VuePress 是根據(jù)文檔層級(jí)生成的訪問鏈接，如下圖：
但如果文檔存放的目錄改變了，那么原有的鏈接就會(huì)失效，會(huì)影響 SEO 和用戶訪問所以建議使用永久鏈接，只要在 config.ts 中加上這行配置即可：permalink: "/:slug", 開啟永久鏈接后，系統(tǒng)自動(dòng)根據(jù)文章標(biāo)題生成鏈接地址，會(huì)更簡短、精確，不會(huì)被文檔目錄結(jié)構(gòu)影響。
效果如下：
永久鏈接的生成規(guī)則可以自己配置，或者給某個(gè)頁面定制永久鏈接，詳見官方文檔官方文檔：https://vuepress.vuejs.org/zh/guide/permalinks.html#%E8%83%8C%E6%99%AF。
4、開啟文件熱更新VuePress 默認(rèn)提供了熱更新，改動(dòng)文檔或配置時(shí)會(huì)自動(dòng)更新網(wǎng)站，但是范圍有限，如果是自定義的 js、ts 等前端文件，修改后不會(huì)觸發(fā)熱更新可以添加 extraWatchFiles 配置解決，為特定范圍的文件開啟熱更新。
比如模板中所有的 ts 文件和側(cè)邊欄配置文件：// 監(jiān)聽文件變化，熱更新extraWatchFiles: [".vuepress/*.ts", ".vuepress/sidebars/*.ts"], 5、Markdown 配置
VuePress 的基本功能就是把我們寫的 Markdown 文件渲染成網(wǎng)站，我們可以在 markdown 配置中自定義網(wǎng)站的渲染規(guī)則，比如顯示代碼塊的行號(hào)、支持更細(xì)層級(jí)的標(biāo)題渲染等：markdown: {
// 開啟代碼塊的行號(hào)lineNumbers: true, // 支持 4 級(jí)以上的標(biāo)題渲染extractHeaders: ["h2", "h3", "h4", "h5", "h6"], }, 四、主題配置
這里我使用的是 VuePress 默認(rèn)主題，因?yàn)楦?、更穩(wěn)定官網(wǎng)默認(rèn)主題配置：https://vuepress.vuejs.org/zh/theme/default-theme-config.html。
也有同學(xué)推薦 Hope 主題，其實(shí)我以前有的文檔網(wǎng)站就是用的它，但后面覺得界面有點(diǎn)復(fù)雜了，個(gè)人還是喜歡最精簡的哈哈想修改主題配置，只需要更改 config.ts 配置文件中的 themeConfig 配置即可。
exportdefaultdefineConfig({ ... // 主題配置themeConfig: { logo: "/logo.png", nav: navbar, sidebar,
lastUpdated: "最近更新", // GitHub 倉庫位置repo: "liyupi/codefather", docsBranch: "master", // 編輯鏈接
editLinks: true, editLinkText: "完善頁面", // @ts-ignore// 底部版權(quán)信息 footer, // 額外右側(cè)邊欄 extraSideBar, }, });
1、主題基本配置包括整個(gè)網(wǎng)站的 Logo、GitHub 倉庫的基本信息、頁面底部展示最近更新時(shí)間、頁面底部展示編輯文章鏈接等配置如下：exportdefaultdefineConfig({ ... 。
// 主題配置themeConfig: { // 替換 logologo: "/logo.png", // 頁面底部展示最近更新時(shí)間lastUpdated: "最近更新",
// GitHub 倉庫和分支信息repo: "liyupi/codefather", docsBranch: "master", // 頁面底部展示編輯文章editLinks
: true, editLinkText: "完善頁面", }, }); 2、導(dǎo)航欄配置由于導(dǎo)航欄配置可能比較復(fù)雜，為了讓配置更清晰，我們可以集中把導(dǎo)航配置寫在 navbar.ts 文件中如下圖：
然后在 config.ts 的主題配置中引用 navbar 即可：import navbar from "./navbar"; exportdefaultdefineConfig({ // 主題配置
themeConfig: { nav: navbar, }, }); 可以參考官方文檔的語法，添加導(dǎo)航欄配置，支持子導(dǎo)航欄導(dǎo)航欄配置文檔：https://vuepress.vuejs.org/zh/theme/default-theme-config.html#。
%E5%AF%BC%E8%88%AA%E6%A0%8F示例代碼：// .vuepress/config.jsmodule.exports = { themeConfig: { nav: [ { text:
Languages, ariaLabel: Language Menu, items: [ { text: Chinese, link: /language/chinese/
}, { text: Japanese, link: /language/japanese/ } ] } ] } } 效果如下：
3、側(cè)邊欄配置和導(dǎo)航欄一樣，所有的側(cè)邊欄配置都放在 sidebar.ts 文件中，然后在 config.ts 中引用但是由于側(cè)邊欄的配置比較復(fù)雜，文章多的時(shí)候需要分組、還要能自動(dòng)識(shí)別文章中的小標(biāo)題，所以這里我摸索出來的 。
最佳實(shí)踐 是：1）將同類的文章放到同一個(gè)目錄里，比如學(xué)習(xí)路線：
2）將該目錄的所有文章（側(cè)邊欄配置）集中寫在單獨(dú)的配置文件中，比如 roadmapSideBar.ts，放到 sidebars 目錄下：
3）在側(cè)邊欄 sidebar.ts 配置中，引用各分類的側(cè)邊欄配置文件，實(shí)現(xiàn)不同分類下的文章，展示的側(cè)邊欄不同import {SidebarConfig4Multiple} from"vuepress/config"。
; import roadmapSideBar from"./sidebars/roadmapSideBar"; // @ts-ignoreexportdefault { "/學(xué)習(xí)路線/": roadmapSideBar,
// 降級(jí)，默認(rèn)根據(jù)文章標(biāo)題渲染側(cè)邊欄"/": "auto", } as SidebarConfig4Multiple; 效果如下：
4、底部配置這是我們自己使用 VuePress 自定義主題能力二次開發(fā)的功能，和導(dǎo)航欄、側(cè)邊欄配置一樣，只用在 footer.ts 中填寫配置，就能自動(dòng)在網(wǎng)頁底部生成友情鏈接、備案信息等，非常方便！ 示例代碼如下：
/** * 底部版權(quán)信息 */exportdefault { friendLinks: [ { label: "魚鳶網(wǎng)絡(luò)", href: "https://yuyuanweb.com/"
, }, { label: "老魚簡歷", href: "https://www.laoyujianli.com/", }, { label
: "編程學(xué)習(xí)圈", href: "https://yupi.icu", }, ], copyright: { href: "https://beian.miit.gov.cn/"
, name: "滬ICP備19026706號(hào)-6", }, }; 效果如下：
5、右側(cè)附加邊欄配置這也是我們自己使用 VuePress 自定義主題能力二次開發(fā)的功能，和前面講的配置一樣，只用在 extraSideBar.ts 中填寫配置，就能自動(dòng)在網(wǎng)頁右側(cè)生成一個(gè)固定的側(cè)邊欄了，從而提供一些附加能力，比如對站長很重要的引流支持等。
示例代碼如下，支持自定義 HTML 代碼：/** * 額外右側(cè)邊欄 */exportdefault [ { title: "手機(jī)看", icon: "/icon/mobile.png"
, popoverTitle: "微信掃一掃", popoverUrl: "/qrcode-codefather.png", popoverDesc: "可以手機(jī)看或分享至朋友圈"
, }, { title: "星球", icon: "/icon/xingqiu.png", popoverTitle: 保姆級(jí)實(shí)戰(zhàn)項(xiàng)目教程、編程學(xué)習(xí)指南、學(xué)習(xí)資源、求職指南、技術(shù)分享、編程交流
, popoverUrl: "/qrcode-codenav.png", popoverDesc: "知識(shí)星球：編程導(dǎo)航", }, } 效果如下：
五、插件配置除了上述基本能力外，我選擇 VuePress 的主要原因就是它的插件生態(tài)特別好，隨便下個(gè)插件，就能增強(qiáng)網(wǎng)站的能力可以在 awesome-vuepress 項(xiàng)目中看到大量的插件，點(diǎn)進(jìn)去就能看到插件的介紹、安裝方式等。
指路：https://github.com/vuepressjs/awesome-vuepress#plugins
但是大家也發(fā)現(xiàn)了，插件太多，反而不知道該用哪些了一個(gè)個(gè)試也太費(fèi)時(shí)間了！所以這里我?guī)痛蠹易隽藴p法，在模板中只保留了我認(rèn)為有用的核心插件分別介紹一下：1、返回頂部安裝（其實(shí)模板中已經(jīng)幫大家裝好了）：yarn
add -D @vuepress/plugin-back-to-top # OR npm install -D @vuepress/plugin-back-to-top開啟插件配置，一行代碼就能搞定：
module.exports = { plugins: [@vuepress/back-to-top] } 2、圖片點(diǎn)擊放大可以讓網(wǎng)站中的所有圖片支持點(diǎn)擊放大功能開啟插件配置，一行代碼就能搞定：module
.exports = { plugins: ["@vuepress/medium-zoom"] } 3、SEO 相關(guān)插件安裝插件后，只需要修改幾行配置，就能讓你的網(wǎng)站更容易被搜索引擎收錄，從而提高訪問量。
SEO 相關(guān)插件有很多，列舉幾個(gè)我覺得不錯(cuò)的：1）谷歌分析是一款有利于谷歌搜索引擎優(yōu)化的插件：module.exports = { plugins: [ [ @vuepress/google-analytics
, { ga: // 補(bǔ)充自己的谷歌分析 ID，比如 UA-00000000-0 } ] ] } 2）vuepress-plugin-seo作用是可以自定義生成的網(wǎng)站 meta 標(biāo)簽內(nèi)容，比如把文章描述、標(biāo)簽信息放到標(biāo)簽中，從而增加收錄率。
插件官方：https://github.com/lorisleiva/vuepress-plugin-seo示例代碼：// 定義常量const author = "程序員魚皮"; const domain =
"https://codefather.cn"; const tags = ["程序員", "編程", "計(jì)算機(jī)"]; // https://github.com/lorisleiva/vuepress-plugin-seo
[ "seo", { siteTitle: (_, $site) => $site.title, title: ($page) => $page.title, description: ($page) => $page.frontmatter.description || $page.description, author: (_, $site) => $site.themeConfig.author || author, tags: ($page) => $page.frontmatter.tags || tags, type: ($page) =>
"article", url: (_, $site, path) => ($site.themeConfig.domain || domain || "") + path, image: ($page, $site) => $page.frontmatter.image && (($site.themeConfig.domain && !$page.frontmatter.image.startsWith(
"http")) || "") + $page.frontmatter.image, publishedAt: ($page) => $page.frontmatter.date &&
new Date($page.frontmatter.date), modifiedAt: ($page) => $page.lastUpdated && new Date($page.lastUpdated), }, ],
3）sitemap 插件可以自動(dòng)給網(wǎng)站生成 sitemap.xml 站點(diǎn)地圖，讓搜索引擎更了解你的網(wǎng)站插件官方：https://github.com/ekoeryanto/vuepress-plugin-sitemap。
配置代碼如下：// https://github.com/ekoeryanto/vuepress-plugin-sitemap ["sitemap", { hostname: domain, },
], 4）自動(dòng)推送到百度插件除了被動(dòng)等待搜索引擎收錄文章外，我們也可以主動(dòng)給搜索引擎推送文章，提高收錄率使用這個(gè)插件，文章就會(huì)定期、自動(dòng)地推送給百度，非常方便插件官方：https://github.com/IOriens/vuepress-plugin-baidu-autopush。
配置代碼如下：// https://github.com/IOriens/vuepress-plugin-baidu-autopush [ vuepress-plugin-baidu-autopush ]
4、支持代碼復(fù)制這個(gè)插件對程序員來說可太實(shí)用了，只需一行配置，用戶就能一鍵復(fù)制網(wǎng)站上的代碼塊：
配置代碼如下：// https://github.com/znicholasbrown/vuepress-plugin-code-copy ["vuepress-plugin-code-copy", { successText:
"代碼已復(fù)制", }, ], 5、配置 RSS 訂閱RSS 是一種統(tǒng)一的內(nèi)容更新標(biāo)準(zhǔn)，使用這個(gè)插件，可以讓更多用戶通過 RSS 訂閱的方式查看到你網(wǎng)站的內(nèi)容，從而增加訪問量插件官方：https://github.com/webmasterish/vuepress-plugin-feed。
配置代碼如下：// https://github.com/webmasterish/vuepress-plugin-feed [ "feed", { canonical_base: domain,
count: 10000, // 需要自動(dòng)推送的文檔目錄 posts_directories: [], }, ], 6、顯示文章標(biāo)簽插件插件官方：https://github.com/zq99299/vuepress-plugin/tree/master/vuepress-plugin-tags
這個(gè)插件其實(shí)可有可無，允許你用 Markdown 的 FrontMatter 語法定義標(biāo)簽，然后在網(wǎng)站上展示。比如在某篇文章開頭定義了如下代碼：
一行代碼就能開啟配置了：// https://github.com/zq99299/vuepress-plugin/tree/master/vuepress-plugin-tags ["vuepress-plugin-tags"
], 然后就能看到如下效果：
7、圖片懶加載插件官方：https://github.com/tolking/vuepress-plugin--lazy最后這個(gè)插件我覺得最有用，只需要一行代碼配置：[-lazy]就能給網(wǎng)站所有的圖片添加懶加載功能，當(dāng)頁面滾動(dòng)到圖片位置時(shí)才會(huì)請求加載圖片，對于圖片較多的網(wǎng)站來說，大幅提高加載速度、節(jié)約帶寬。
六、項(xiàng)目部署最后，我們要進(jìn)行項(xiàng)目部署，也就是發(fā)到服務(wù)器上供別人訪問。VuePress 的部署非常簡單，首先在 package.json 文件中執(zhí)行 docs:build 打包命令：
打包成功，可以看到 .vuepress 目錄下多了個(gè) dist 目錄，所有生成的網(wǎng)頁資源都在該目錄下：
接下來，我們只需要把 dist 目錄下所有的文件，扔到服務(wù)器上就可以了。我之前已經(jīng)給大家分享了好幾種不同的項(xiàng)目上線方式，感興趣的同學(xué)可以翻翻我之前的視頻，這里就不重復(fù)演示了。
最后通過這個(gè)教程，我相信大家不僅學(xué)到了文檔網(wǎng)站的制作方法，還收獲了很多其他的前端小知識(shí)，比如 SEO、懶加載之類的，希望對大家有幫助，都能做出自己的文檔網(wǎng)站來沉淀分享知識(shí)學(xué)會(huì)的話點(diǎn)贊收藏支持下啦，謝謝大家~。