當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

docsify神奇的文档网站生成工具

發(fā)布時(shí)間：2025/3/17 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 docsify神奇的文档网站生成工具小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

原文鏈接

個(gè)人博客-歡迎訪問(wèn)

docsify 是一個(gè)動(dòng)態(tài)生成文檔網(wǎng)站的工具。不同于 GitBook、Hexo 的地方是它不會(huì)生成將 .md 轉(zhuǎn)成 .html 文件，所有轉(zhuǎn)換工作都是在運(yùn)行時(shí)進(jìn)行。

這將非常實(shí)用，如果只是需要快速的搭建一個(gè)小型的文檔網(wǎng)站，或者不想因?yàn)樯傻囊欢?.html 文件“污染” commit 記錄，只需要?jiǎng)?chuàng)建一個(gè) index.html 就可以開始寫文檔而且直接部署在 GitHub Pages。

特性

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

快速開始

推薦安裝 docsify-cli 工具，可以方便創(chuàng)建及本地預(yù)覽文檔網(wǎng)站。

npm i docsify-cli -g 復(fù)制代碼

初始化項(xiàng)目

如果想在項(xiàng)目的 ./docs 目錄里寫文檔，直接通過(guò) init 初始化項(xiàng)目。

docsify init ./docs 復(fù)制代碼

開始寫文檔

初始化成功后，可以看到 ./docs 目錄下創(chuàng)建的幾個(gè)文件

index.html 入口文件
README.md 會(huì)做為主頁(yè)內(nèi)容渲染
.nojekyll 用于阻止 GitHub Pages 會(huì)忽略掉下劃線開頭的文件直接編輯 docs/README.md 就能更新網(wǎng)站內(nèi)容，當(dāng)然也可以寫多個(gè)頁(yè)面。

本地預(yù)覽網(wǎng)站

運(yùn)行一個(gè)本地服務(wù)器通過(guò) docsify serve 可以方便的預(yù)覽效果，而且提供 LiveReload 功能，可以讓實(shí)時(shí)的預(yù)覽。默認(rèn)訪問(wèn) http://localhost:3000 。

docsify serve docs 復(fù)制代碼

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

手動(dòng)初始化

如果不喜歡 npm 或者覺(jué)得安裝工具太麻煩，我們其實(shí)只需要直接創(chuàng)建一個(gè) index.html 文件。

// 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> 復(fù)制代碼

如果系統(tǒng)里安裝 Python 的話，也可以很輕易的啟動(dòng)一個(gè)靜態(tài)服務(wù)器。

cd docs && python -m SimpleHTTPServer 3000 復(fù)制代碼

Loading 提示

初始化時(shí)會(huì)顯示 Loading... 內(nèi)容，你可以自定義提示信息。

// index.html<div id="app">加載中</div> 復(fù)制代碼

如果更改了 el 的配置，需要將該元素加上 data-app 屬性。

// index.html<div data-app id="main">加載中</div><script>window.$docsify = {el: '#main'}</script>復(fù)制代碼

示例

這是一份docsify開發(fā)的文檔歡迎點(diǎn)擊查看

git地址
線上預(yù)覽

更加詳細(xì)的設(shè)置配置參考官方文檔

轉(zhuǎn)載于:https://juejin.im/post/5c8a03a75188257e9044ec19

總結(jié)

以上是生活随笔為你收集整理的docsify神奇的文档网站生成工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。