當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/17 编程问答 16 豆豆

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

原文鏈接

個人博客-歡迎訪問

docsify 是一個動態生成文檔網站的工具。不同于 GitBook、Hexo 的地方是它不會生成將 .md 轉成 .html 文件，所有轉換工作都是在運行時進行。

這將非常實用，如果只是需要快速的搭建一個小型的文檔網站，或者不想因為生成的一堆 .html 文件“污染” commit 記錄，只需要創建一個 index.html 就可以開始寫文檔而且直接部署在 GitHub Pages。

特性

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

快速開始

推薦安裝 docsify-cli 工具，可以方便創建及本地預覽文檔網站。

npm i docsify-cli -g 復制代碼

初始化項目

如果想在項目的 ./docs 目錄里寫文檔，直接通過 init 初始化項目。

docsify init ./docs 復制代碼

開始寫文檔

初始化成功后，可以看到 ./docs 目錄下創建的幾個文件

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

本地預覽網站

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

docsify serve docs 復制代碼

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

手動初始化

如果不喜歡 npm 或者覺得安裝工具太麻煩，我們其實只需要直接創建一個 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> 復制代碼

如果系統里安裝 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開發的文檔歡迎點擊查看

git地址
線上預覽

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

轉載于:https://juejin.im/post/5c8a03a75188257e9044ec19

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。