docsify - 生成文档网站简单使用教程

TobiasUna 发布于4月前 阅读550次
0 条评论

1. docsify介绍

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件,所有转换工作都是在运行时进行。

这将非常实用,如果只是需要快速的搭建一个小型的文档网站,或者不想因为生成的一堆 .html 文件“污染” commit 记录,只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。

docsify特性

无需构建,写完文档直接发布
容易使用并且轻量 (~19kB gzipped)
智能的全文搜索
提供多套主题
丰富的 API
支持 Emoji
兼容 IE10+
支持 SSR

2. 安装docsify-cli命令行工具

docsify-cli 工具,可以方便创建及本地预览文档网站。

docsify需要本地先安装node, 如果没有安装node,可在node官网选择对应操作系统下载安装:https://nodejs.org/zh-cn/

终端输入npm i docsify-cli -g进行全局安装:

npm i docsify-cli -g

/usr/local/bin/docsify -> /usr/local/lib/node_modules/docsify-cli/bin/docsify
> fsevents@1.2.4 install /usr/local/lib/node_modules/docsify-cli/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/docsify-cli/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> docsify@4.8.6 postinstall /usr/local/lib/node_modules/docsify-cli/node_modules/docsify
> opencollective postinstall

                         Thanks for installing docsify 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.

          👉  Donate: https://opencollective.com/docsify/donate

+ docsify-cli@4.3.0
added 456 packages from 206 contributors in 32.827s

clipboard.png

安装结束后使用docsify -v查看是都安装:

docsify -v

docsify-cli version:
  4.3.0

2.1 初始化一个项目

首先需要创建一个项目目录:

mkdir docsify

计入项目目录后,使用docsify init ./来初始化一个项目:

cd docsify

docsify init ./

Initialization succeeded! Please run docsify serve ./
tree -a

.
├── .nojekyll
├── README.md
└── index.html

初始化成功后,docsify目录会生成如下几个文件:

  1. index.html入口文件
  2. README.md会做为主页内容渲染
  3. .nojekyll用于阻止 GitHub Pages 会忽略掉下划线开头的文件

直接编辑 docs/README.md 就能更新网站内容,当然也可以添加其他.md文件。

2.1 启动本地服务

终端输入docsify serve ./来启动服务:

docsify serve ./

Serving /Users/dragon/tmp/docsify now.
Listening at http://localhost:3000

然后浏览器打开http://localhost:3000就能看见效果。

clipboard.png

当修改文件保存后, docsify serve ./服务会自动实时更新。

3. 关于每个页面和URL路径说明

如果需要创建多个页面,或者需要多级路由的网站,在docsify里也能很容易的实现。例如创建一个guide.md文件,那么对应的路由就是/#/guide
如果你的目录结构如下:

-| ./
  -| README.md
  -| guide.md
  -| zh-cn/
    -| README.md
    -| guide.md

那么对应的访问页面将是:

./README.md        => http://domain.com
./guide.md         => http://domain.com/guide
./zh-cn/README.md  => http://domain.com/zh-cn/
./zh-cn/guide.md   => http://domain.com/zh-cn/guide

4. 侧边栏设置

默认情况下,侧边栏会根据当前文档的标题生成目录。

clipboard.png

文档正在编辑中。。。。

参考资料

docsify中文官网:https://docsify.js.org/#/zh-cn/

查看原文: docsify - 生成文档网站简单使用教程

  • silverleopard
  • organicrabbit
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。