docsify神奇的文檔網站生成工具

時間 2019-12-07

標籤 docsify 神奇文檔網站生成工具欄目網站開發简体版

原文原文鏈接

原文連接css

我的博客-歡迎訪問html

docsify 是一個動態生成文檔網站的工具。不一樣於 GitBook、Hexo 的地方是它不會生成將 .md 轉成 .html 文件，全部轉換工做都是在運行時進行。vue

這將很是實用，若是隻是須要快速的搭建一個小型的文檔網站，或者不想由於生成的一堆 .html 文件「污染」 commit 記錄，只須要建立一個 index.html 就能夠開始寫文檔並且直接部署在 GitHub Pages。python

特性

無需構建，寫完文檔直接發佈
容易使用而且輕量 (~19kB gzipped)
智能的全文搜索
提供多套主題
豐富的 API
支持 Emoji
兼容 IE10+
支持 SSR (example)

快速開始

推薦安裝 docsify-cli 工具，能夠方便建立及本地預覽文檔網站。git

npm i docsify-cli -g
複製代碼

初始化項目

若是想在項目的 ./docs 目錄裏寫文檔，直接經過 init 初始化項目。github

docsify init ./docs
複製代碼

開始寫文檔

初始化成功後，能夠看到 ./docs 目錄下建立的幾個文件chrome

index.html 入口文件
README.md 會作爲主頁內容渲染
.nojekyll 用於阻止 GitHub Pages 會忽略掉下劃線開頭的文件直接編輯 docs/README.md 就能更新網站內容，固然也能夠寫多個頁面。

本地預覽網站

運行一個本地服務器經過 docsify serve 能夠方便的預覽效果，並且提供 LiveReload 功能，可讓實時的預覽。默認訪問 http://localhost:3000 。npm

docsify serve docs
複製代碼

更多命令行工具用法，參考 docsify-cli 文檔。服務器

手動初始化

若是不喜歡 npm 或者以爲安裝工具太麻煩，咱們其實只須要直接建立一個 index.html 文件。app

// index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //...
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>
複製代碼

若是系統裏安裝 Python 的話，也能夠很輕易的啓動一個靜態服務器。

cd docs && python -m SimpleHTTPServer 3000
複製代碼

Loading 提示

初始化時會顯示 Loading... 內容，你能夠自定義提示信息。

// index.html

  <div id="app">加載中</div>
複製代碼

若是更改了 el 的配置，須要將該元素加上 data-app 屬性。

// index.html

  <div data-app id="main">加載中</div>

  <script>
    window.$docsify = {
      el: '#main'
    }
  </script>

複製代碼

示例

這是一份docsify開發的文檔歡迎點擊查看

更加詳細的設置配置參考官方文檔

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。