之前有很多朋友問我，我的開源項目文檔網站是用什么搭建的。其實是用搭建的，具體可以參考如何寫出優雅的開源項目文檔 。用來搭建成體系的文檔網站基本夠用了，但有時候我們既有成體系的文章、又有碎片化的文章，如果把文章都掛上去，看起來未免有些凌亂，這時候我們可能需要搭建一個類似知識庫的網站了。最近發現使用可以搭建一個功能強大的文檔網站，推薦給大家！
實戰電商項目mall（50k+star）地址：
簡介
是Vue驅動的靜態網站生成器。對比我們的動態生成網站，對SEO更加友好。
使用具有如下優點：
主題
一般我們使用搭建網站的時候，都會選擇一個主題。這里選擇的是--，一款簡潔高效的知識管理&博客主題，用來搭建文檔網站綽綽有余。
學了技術老忘怎么破？用搭建一個知識庫試試！它能幫助我們更好地管理知識，并能夠快速地把遺忘的知識點找回來。
使用主題具有如下優點：
效果演示
我們先來看下成品效果，有三種不同模式可供選擇，是不是夠炫酷！
搭建
通過搭建網站非常簡單，就算你對Vue不熟悉也沒關系。
# 安裝
npm install
# 運行
npm run dev
配置
由于本身就是個完整的網站了，里面有很多我們不需要的文章和配置，所以我們得替換這些文章并自定義這些配置。
docs
│ index.md -- 首頁配置
├─.vuepress -- 用于存放全局的配置、組件、靜態資源等
│ │ config.js -- 配置文件的入口文件
│ │ enhanceApp.js -- 客戶端應用的增強
│ ├─config
│ │ head.js -- 注入到頁面中的配置
│ │ htmlModules.js -- 插入自定義html模塊
│ │ nav.js -- 頂部導航欄配置
│ │ plugins.js -- 插件配置
│ │ themeConfig.js -- 主題配置
│ ├─public -- 靜態資源目錄
│ │ └─img -- 用于存放圖片
│ ├─styles
│ │ palette.styl -- 主題演示配置
│ └─<結構化目錄>
├─@pages --自動生成的文件夾
│ archivesPage.md -- 歸檔頁
│ categoriesPage.md -- 分類頁
│ tagsPage.md -- 標簽頁
├─images -- 可以用來存放自己的圖片
└─_posts -- 專門存放碎片化博客文章的文件夾，不會自動生成目錄
---
pageComponent:
name: Catalogue
data:
key: 02.mall學習教程
imgUrl: /img/ui.png
description: mall學習教程，架構、業務、技術要點全方位解析。
title: mall學習教程
date: 2020-03-11 21:50:54
permalink: /mall-learning
sidebar: false
article: false
comment: false
editlink: false
---
module.exports = [
{ text: '首頁', link: '/' },
{
text: 'mall學習教程',
link: '/mall-learning/',
items: [
{ text: '序章', link: '/pages/72bed2/' },
{ text: '架構篇', link: '/pages/c68875/' },
{ text: '業務篇', link: '/pages/c981c1/' },
{ text: '技術要點篇', link: '/pages/fab7d9/' },
{ text: '部署篇', link: '/pages/db2d1e/' },
],
}
]
---
home: true
# heroImage: /img/web.png
heroText: macrozheng's blog
tagline: Java后端技術博客，積跬步以至千里，致敬每個愛學習的你。
features: # 可選的
- title: mall學習教程
details: mall學習教程，架構、業務、技術要點全方位解析。
link: /mall-learning/
imgUrl: /img/ui.png
- title: SpringCloud學習教程
details: 一套涵蓋大部分核心組件使用的Spring Cloud教程，包括Spring Cloud Alibaba及分布式事務Seata。
link: /springcloud-learning/
imgUrl: /img/other.png
- title: K8S學習教程
details: 實實在在的K8S實戰教程，專為Java方向人群打造！
link: /springcloud-learning/ # 可選
imgUrl: /img/web.png # 可選
---
---
title: mall整合SpringBoot+MyBatis搭建基本骨架
date: 2021-08-19 16:30:11
permalink: /pages/c68875/
categories:
- mall學習教程
- 架構篇
tags:
- SpringBoot
- MyBatis
---
如果你仔細看下文章列表的話，可以發現有的文章會顯示摘要，而有的不會顯示，我們可以通過注釋來控制摘要的顯示，該注釋之前內容均會作為摘要來顯示；
// 主題配置
module.exports = {
nav,
sidebarDepth: 2, // 側邊欄顯示深度，默認1，最大2（顯示到h3標題）
logo: '/img/avatar.png', // 導航欄logo
repo: 'macrozheng', // 導航欄右側生成Github鏈接
searchMaxSuggestions: 10, // 搜索結果顯示最大數
lastUpdated: '上次更新', // 開啟更新時間，并配置前綴文字 string | boolean (取值為git提交時間)
docsDir: 'docs', // 編輯的文件夾
editlinks: false, // 啟用編輯
editlinkText: '編輯',
sidebar: { mode: 'structuring', collapsable: false}, // 側邊欄 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定義 溫馨提示：目錄頁數據依賴于結構化的側邊欄數據，如果你不設置為'structuring',將無法使用目錄頁
author: {
// 文章默認的作者信息，可在md文件中單獨配置此信息 String | {name: String, link: String}
name: 'macrozheng', // 必需
link: 'https://github.com/macrozheng', // 可選的
},
blogger: {
// 博主信息，顯示在首頁側邊欄
avatar: '/img/avatar.png',
name: 'macrozheng',
slogan: '這家伙很懶，什么都沒寫...',
},
social: {
// 社交圖標，顯示于博主信息欄和頁腳欄
// iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可選，阿里圖標庫在線css文件地址，對于主題沒有的圖標可自由添加
icons: [
{
iconClass: 'icon-github',
title: 'GitHub',
link: 'https://github.com/macrozheng',
},
{
iconClass: 'icon-gitee',
title: 'Gitee',
link: 'https://gitee.com/macrozheng',
},
{
iconClass: 'icon-juejin',
title: '掘金',
link: 'https://juejin.cn/user/958429871749192',
}
],
},
footer: {
// 頁腳信息
createYear: 2019, // 博客創建年份
copyrightInfo:
'marcozheng | MIT License', // 博客版權信息，支持a標簽
},
htmlModules // 插入html模塊
}
// 插件配置
module.exports = [
[
'vuepress-plugin-baidu-tongji', // 百度統計
false, //禁用
{
hm: 'xxx',
},
],
]
// 淺色模式
.theme-mode-light
// 代碼塊淺色主題
//--codeBg: #f6f6f6
//--codeColor: #525252
//codeThemeLight()
// 代碼塊深色主題
--codeBg: #252526
--codeColor: #fff
codeThemeDark()
部署
生成網站也非常簡單，一個命令完成打包，然后放置到的html目錄下即可。
總結
使用+來搭建文檔網站不僅炫酷而且功能強大！對比的動態生成文檔，生成靜態頁面性能更好，同時對SEO也更友好。 如果你只想搭建簡單的單項目文檔的話，基本上也夠用了。如果你想搭建多項目文檔，或者博客網站的話，還是推薦你使用的。
參考資料 項目地址
本文 已經收錄，歡迎大家Star！
