之前有很多朋友問我，我的開源項目文檔網(wǎng)站是用什么搭建的。其實是用搭建的，具體可以參考如何寫出優(yōu)雅的開源項目文檔 。用來搭建成體系的文檔網(wǎng)站基本夠用了，但有時候我們既有成體系的文章、又有碎片化的文章，如果把文章都掛上去，看起來未免有些凌亂，這時候我們可能需要搭建一個類似知識庫的網(wǎng)站了。最近發(fā)現(xiàn)使用可以搭建一個功能強大的文檔網(wǎng)站，推薦給大家！

實戰(zhàn)電商項目mall（50k+star）地址：

簡介

是Vue驅動的靜態(tài)網(wǎng)站生成器。對比我們的動態(tài)生成網(wǎng)站，對SEO更加友好。

使用具有如下優(yōu)點：

主題

一般我們使用搭建網(wǎng)站的時候，都會選擇一個主題。這里選擇的是--，一款簡潔高效的知識管理&博客主題，用來搭建文檔網(wǎng)站綽綽有余。

學了技術老忘怎么破？用搭建一個知識庫試試！它能幫助我們更好地管理知識，并能夠快速地把遺忘的知識點找回來。

使用主題具有如下優(yōu)點：

效果演示

我們先來看下成品效果，有三種不同模式可供選擇，是不是夠炫酷！

搭建

通過搭建網(wǎng)站非常簡單，就算你對Vue不熟悉也沒關系。

# 安裝
npm install
# 運行
npm run dev

配置

由于本身就是個完整的網(wǎng)站了，里面有很多我們不需要的文章和配置，所以我們得替換這些文章并自定義這些配置。

docs
│  index.md -- 首頁配置
├─.vuepress -- 用于存放全局的配置、組件、靜態(tài)資源等
│  │  config.js -- 配置文件的入口文件
│  │  enhanceApp.js -- 客戶端應用的增強
│  ├─config
│  │      head.js -- 注入到頁面中的配置
│  │      htmlModules.js -- 插入自定義html模塊
│  │      nav.js -- 頂部導航欄配置
│  │      plugins.js -- 插件配置
│  │      themeConfig.js -- 主題配置   
│  ├─public -- 靜態(tài)資源目錄
│  │  └─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學習教程，架構、業(yè)務、技術要點全方位解析。
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: '業(yè)務篇', 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學習教程，架構、業(yè)務、技術要點全方位解析。
    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實戰(zhàn)教程，專為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
---

如果你仔細看下文章列表的話，可以發(fā)現(xiàn)有的文章會顯示摘要，而有的不會顯示，我們可以通過注釋來控制摘要的顯示，該注釋之前內(nèi)容均會作為摘要來顯示；

// 主題配置
module.exports = {
  nav,
  sidebarDepth: 2, // 側邊欄顯示深度，默認1，最大2（顯示到h3標題）
  logo: '/img/avatar.png', // 導航欄logo
  repo: 'macrozheng', // 導航欄右側生成Github鏈接
  searchMaxSuggestions: 10, // 搜索結果顯示最大數(shù)
  lastUpdated: '上次更新', // 開啟更新時間，并配置前綴文字   string | boolean (取值為git提交時間)
  docsDir: 'docs', // 編輯的文件夾
  editlinks: false, // 啟用編輯
  editlinkText: '編輯',
  sidebar: { mode: 'structuring', collapsable: false}, // 側邊欄  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定義    溫馨提示：目錄頁數(shù)據(jù)依賴于結構化的側邊欄數(shù)據(jù)，如果你不設置為'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, // 博客創(chuàng)建年份
    copyrightInfo:
      'marcozheng | MIT License', // 博客版權信息，支持a標簽
  },
  htmlModules // 插入html模塊
}

// 插件配置
module.exports = [
  [
    'vuepress-plugin-baidu-tongji', // 百度統(tǒng)計
    false, //禁用
    {
      hm: 'xxx',
    },
  ],
]

 // 淺色模式
 .theme-mode-light
   // 代碼塊淺色主題
   //--codeBg: #f6f6f6
   //--codeColor: #525252
   //codeThemeLight()
    // 代碼塊深色主題
    --codeBg: #252526
    --codeColor: #fff
    codeThemeDark()

部署

生成網(wǎng)站也非常簡單，一個命令完成打包，然后放置到的html目錄下即可。

總結

使用+來搭建文檔網(wǎng)站不僅炫酷而且功能強大！對比的動態(tài)生成文檔，生成靜態(tài)頁面性能更好，同時對SEO也更友好。 如果你只想搭建簡單的單項目文檔的話，基本上也夠用了。如果你想搭建多項目文檔，或者博客網(wǎng)站的話，還是推薦你使用的。

參考資料 項目地址

本文 已經(jīng)收錄，歡迎大家Star！