docsify - 無需構建快速生成文檔網站

xiaokai 發布于2019-08-02 15:56 / 3668人閱讀

摘要：你可以指定導航欄文件名的內容可以是這樣中文當然也支持二級列表，將生成一個下拉列表中文為什么是而不用想要實現的是用最簡單的方式動態渲染內容。

docsify

無需構建快速生成文檔頁

網站：https://github.com/qingwei-li...
文檔：https://docsify.js.org/zh-cn

特性

無需構建，寫完 markdown 直接發布

支持自定義主題

容易使用并且輕量

快速上手 創建項目

新建一個空項目，接著創建一個 docs 目錄并進入到 docs 目錄下

mkdir my-project && cd my-project
mkdir docs && cd docs

創建入口文件

創建一個 404.html 文件，內容為

新建 README.md 文件，作為主頁面

# Title

## balabala

部署！

將項目 push 到 GitHub 倉庫后到設置頁面開啟 GitHub Pages 功能，選擇 docs/ 選項

命令行工具

方便快速創建文檔目錄，會讀取項目的 package.json 里的選項作為 docsify 的配置，支持本地預覽。

安裝

npm i docsify-cli -g

初始化文檔

默認初始化在當前目錄，推薦將文檔放在 docs 目錄下

docsify init docs

啟動本地服務

啟動一個 server 方便預覽，打開 http://localhost:3000

docsify serve docs

更多選項參考 docsify-cli

主題

目前提供 vue.css 和 buble.css，直接修改 404.html 里的 cdn 地址即可

壓縮版

更多功能 多頁面

README.md 作為主頁面，如果需要其他頁面，直接在文檔目錄下創建對應的 *.md 文件，例如創建一個 guide.md 那么對應的路由就是 /guide。

導航

導航需要自己寫在 404.html 文件里，效果參考本文檔


  En
  中文

配置參數 repo

參考本文檔的右上角的 GitHub 圖標，如果要開啟的話，將 404.html 里的 script 改成

max-level

目錄最大展開層級，默認值為 6

替換節點元素，默認為 #app

sidebar-toggle

Sidebar 開關按鈕

sidebar

設置后 TOC 功能將不可用，適合導航較多的文檔，data-sidebar 傳入全局變量名。

load-sidebar

讀取側邊欄配置文件，如果配置，默認加載當前目錄下的 _sidebar.md。如果文件不存在，會顯示 TOC 作為側邊欄內容。如果你有二級目錄，也應該放置一份配置文件。

你可以指定側邊欄文件名

_sidebar.md 的內容可以是這樣的

- [Home](/)
- [Installation](/installation)
- Essentials
  - [Getting Started](/getting-started)
  - [Dynamic Route Matching](/dynamic-matching)
  - [Nested Routes](/nested-routes)
  - [Programmatic Navigation](/navigation)
  - [Named Routes](/named-routes)
  - [Named Views](/named-views)
  - [Redirect and Alias](/redirect-and-alias)
  - [HTML5 History Mode](/history-mode)

load-navbar

讀取導航配置文件，如果配置，默認加載當前目錄下的 _navbar.md。如果文件不存在，會顯示 html 里定義的導航欄。

你可以指定導航欄文件名

_navbar.md 的內容可以是這樣

- [en](/)
- [中文](/zh-cn)

當然也支持二級列表，將生成一個下拉列表

- [download](/download)
- language
  - [en](/)
  - [中文](/zh-cn)

FAQ 為什么是 404.html 而不用 index.html

docsify 想要實現的是用最簡單的方式 動態渲染內容。

例如我有兩個文檔分別為 README.md 和 guide.md，如果我用 index.html 作為文件名，README.md 可以被正確的渲染因為我們已經規定它為首頁文件，但是如果我們訪問 my-domain.com/guide 想要得到的結果是 guide.md 的內容，它將無法工作，因為目錄下并不存在一個 guide.html 的文件。

但是 GitHub Pages 服務器找不到資源，就會回退并渲染 404.html 文件。?

網站：https://github.com/qingwei-li...
文檔：https://docsify.js.org/zh-cn

GPU云服務器云服務器文檔生成 python生成文檔 python文檔生成生成API文檔

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54387.html

docsify - 無需構建快速生成文檔網站

摘要：你可以指定導航欄文件名的內容可以是這樣中文當然也支持二級列表，將生成一個下拉列表中文為什么是而不用想要實現的是用最簡單的方式動態渲染內容。 showImg(https://segmentfault.com/img/bVGh1i?w=2562&h=1972); docsify 無需構建快速生成文檔頁網站：https://github.com/qingwei-li...文檔：https:...

longmon 2019-08-22 10:44 評論0 收藏0
docsify - 生成文檔網站簡單使用教程

摘要：介紹是一個動態生成文檔網站的工具。不同于的地方是它不會生成將轉成文件，所有轉換工作都是在運行時進行。使用來開發工具，可以方便創建及本地預覽文檔網站。 1. docsify介紹 docsify 是一個動態生成文檔網站的工具。不同于 GitBook、Hexo 的地方是它不會生成將 .md 轉成 .html 文件，所有轉換工作都是在運行時進行。這將非常實用，如果只是需要快速的搭建一個小型的...

CompileYouth 2019-08-23 14:24 評論0 收藏0
技術甜品店 - 收藏集 - 掘金

摘要：前端切圖神器前端掘金安裝前端的基礎工作就是把設計師的設計稿還原成前端頁面，所以切圖是作為一個前端的基本技能。騰訊 Web 工程師的前端書單 - 閱讀 - 掘金作者：link 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹。 JavaScript 入門《JavaScript權威指南（第六版）》 ★...

Gilbertat 2019-08-20 16:40 評論0 收藏0
Gitalk評論插件使用教程

摘要：說明是一個基于和開發的評論插件。默認值類型布爾值，選填，類似評論框的全屏遮罩效果。默認值類型布爾值，選填，如果當前頁面沒有相應的且登錄的用戶屬于，則會自動創建。參考類型布爾值，選填，啟用快捷鍵提交評論。 1. 說明 Gitalk 是一個基于 GitHub Issue 和 Preact 開發的評論插件。 Gitalk 的特性： 1、使用 GitHub 登錄2、支持多語言 [en, zh-...

孫吉亮 2019-08-23 15:04 評論0 收藏0