愛了！Guide哥手把手教你搭建一個文檔類型的網站!免費且高速！

時間 2020-04-15

標籤 guide 手把手搭建一個文檔類型網站免費高速欄目網站開發简体版

原文原文鏈接

還記得我在上週發的《V2.0 版本的 JavaGuide 面試突擊版來啦！帶着它的在線閱讀版原本啦！》這篇文章中答應手把手教你們搭建一下下面同樣的文檔類型網站不？css

這篇文章 Guide 哥就手把手教你們搭建一個像下面這樣的文檔類型的網站，你能夠用來當作項目的說明文檔，也還能夠當作本身專屬的知識小倉庫。html

官網教程的也很詳細了，地址在這裏：https://docsify.js.org/#/zh-cn/quickstart ，不過個人這篇教程比較貼合實際使用。vue

下面演示的全部內容的源文件在這裏：https://github.com/Snailclimb/docsify-demojava

最終效果展現地址：https://snailclimb.gitee.io/docsify-demo/#/git

一.前置條件

確保本身電腦下載安裝了 NPM 而且使用這個命令： npm i docsify-cli -g安裝了 docsify-cli 這個工具。
確保本身有一個 Github 帳號（碼雲帳號爲非必選項，有的話更好）。

二.初始化項目並預覽

1.新建一個文件夾：mkdir docsify-demogithub

2.進入文件夾並運行 docsify 初始化命令：cd docsify-demo -> docsify init ./面試

你會發現 docsify-demo 文件夾下面多了下面這些文件，一一爲你解釋一下它們是幹嗎的！chrome

3.本地預覽網站：docsify serve ./ 而後訪問：http://localhost:3000/npm

三.給咱們的項目增長點顏色

建議 clone 一下個人倉庫： https://github.com/Snailclimb/docsify-demo ，在本地運行一下，這是一個比較典型的使用 docsify 搭建的網站，能夠做爲參考。若是大家想搭建一個不錯的文檔網站的話，能夠在個人這個基礎上去改。app

3.1 修改配置文件 index.html

主要配置了文檔網站的名字以及開啓了一些配置選項。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>docsify-demo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>

<body>
  <div id="app"></div>
  <!-- docsify-edit-on-github -->
  <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
  <script>
    window.$docsify = {
      name: 'docsify-demo',
      repo: 'https://github.com/Snailclimb/JavaGuide-Interview',
      maxLevel: 5,//最大支持渲染的標題層級
      subMaxLevel: 3,
      homepage: 'README.md',
      coverpage: true,
      loadSidebar: true,
      auto2top: true,//切換頁面後是否自動跳轉到頁面頂部
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>

</html>

3.2 添加側邊欄文件

在第一步中，咱們在已經開啓了側邊欄選項：

loadSidebar: true

可是，僅僅這樣還不行，咱們須要定義一個名爲 _sidebar.md的文件，文件的內容就是咱們側邊欄的內容。

以下圖所示，咱們定義了一個側邊欄，而且爲它添加了一些內容：

通常建議將文檔放進 docs 文件下面，能夠參考個人倉庫：https://github.com/Snailclimb/docsify-demo

修改完成以後，你就會發現咱們的文檔網站多了側邊欄，你點擊側邊欄對應的內容在右邊顯示。

3.3 修改主頁內容

修改 REDME.md，內容以下：

而後咱們的文檔網站的主頁就變成了這樣：

3.4 添加一個封面

第一步中，咱們在已經開啓了封面選項：

coverpage: true

爲了能讓咱們的文檔網站有封面，咱們還須要新建一個名字爲 _coverpage.md的文件，內容以下

而後，咱們再打開網站的時候，就有了封面，以下圖所示：

四.一些有用的插件

我下面簡單介紹幾個我以爲比較實用的插件，更多插件的話在這裏：https://docsify.js.org/#/zh-cn/plugins 。

4.1 增長 Java 代碼高亮

手動引入 Java 代碼高亮的插件：

<!--Java代碼高亮-->
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>

4.2 增長全文搜索功能

引入插件：

<!--全文搜索,直接用官方提供的沒法生效-->
  <script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js">

配置一下：

<script>
    window.$docsify = {
      ......
      //全文搜索
      search: {
        maxAge: 86400000, // 過時時間，單位毫秒，默認一天
        paths: 'auto',
        placeholder: '搜索',
        noData: '找不到結果',
        // 搜索標題的最大程級, 1 - 6
        depth: 3,
      },
    }
  </script>

而後咱們的文檔網站就有全文搜索功能了：

4.3 複製代碼到剪切板

引入插件便可！

<!-- 複製代碼到剪貼板 -->
<script src="//unpkg.com/docsify-copy-code"></script>

4.4 圖片縮放和字數統計

引入下面兩個插件便可！

<!-- 圖片縮放 -->
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
<!-- 字數統計 -->
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

4.5 edit on github

作以下配置，注意修改成你本身的路徑。

<script>
    window.$docsify = {
      ......
      plugins: [
        EditOnGithubPlugin.create('https://github.com/Snailclimb/JavaGuide-Interview/blob/master/')
      ],
    }
  </script>

而後咱們的每一個頁面都出來了 "Edit on github" 選項，你點擊以後就會跳到 Github 對應的頁面編輯。