当前位置:首页 > 技术分析 > 正文内容

一个优秀的程序员专属文档生成工具(开源)——docsify

ruisui882周前 (04-11)技术分析5

介绍

docsify是一个神奇的文档网站生成器。docsify不同于很多静态博客那样的方式生成html的静态网页文件,而是在运行时进行转换。只需要创建一个index.html文件,就可以编写文档并部署到Github Pages。




支持的特性

  • 无需构建,写完文档直接发布
  • 容易使用并且轻量 (压缩后 ~21kB)
  • 智能的全文搜索
  • 提供多套主题
  • 丰富的 API
  • 支持 Emoji
  • 兼容 IE11
  • 支持服务端渲染 SSR

开始安装使用

这里在官方的文档中推荐安装一个全局的docsify-cli脚手架工具,这样就能很方便地每次使用它了,我们可以使用npm来进行安装

npm i docsify-cli -g

笔者比较习惯使用yarn,如果你也一样,可以和我一样使用以下命令安装

yarn global add docsify-cli

然后我们就可以使用了,如下:

我们先使用命令行工具到你项目的文件夹中,比如我这里是使用mydoc:

然后执行以下命令

docsify init ./docs

PS:如果你使用yarn,然后执行命令失败,那么你需要将你的yarn的bin目录添加到你的环境变量中,windows下直接就在Path下面加上即可,可以使用 yarn global bin命令查看你的yarn的bin文件夹目录


初始化成功后,可以看到 ./docs 目录下创建的几个文件

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

直接编辑 docs/README.md 就能更新文档内容,当然也可以添加更多页面。

接下来是预览效果:

cd docs
docsify serve

浏览器打开页面localhost:3000 即可查看效果,如下:



当然,如果你不想使用提供的脚手架工具,你也可以使用官方文档中提到的手动创建,如下:




  
  
  
  


  
<script> window.$docsify = { //... } </script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

将readme也加上当前目录下即可,然后需要启动一个静态服务器,这里笔者推荐使用liveServer,很好用的一个本地调试http静态服务器,下面你就可以自定义你的文档了

多页面文档

多页文档在docsify中也很容易实现,以下来自于文档中的介绍,大家可以自行尝试:

假设你的目录结构如下:

.
└── docs
    ├── README.md
    ├── guide.md
    └── zh-cn
        ├── README.md
        └── guide.md

那么对应的访问页面将是

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

这一块文档中有非常详细的介绍,快速开始——多页文档、定制侧边栏、嵌套的侧边栏、用侧边栏中选定的条目名称作为页面标题、显示目录、忽略副标题等等

自定义导航栏

同时你还可以自定义导航栏:


  

那我们可以通过 Markdown 文件来配置导航。首先配置 loadNavbar,默认加载的文件为 _navbar.md。具体配置规则见配置项#loadNavbar。



<script>
  window.$docsify = {
    loadNavbar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>


* [En](/)
* [中文](/zh-cn/)
  • 嵌套

如果导航内容过多,可以写成嵌套的列表,会被渲染成下拉列表的形式。


* 入门
  * [快速开始](zh-cn/quickstart.md)
  * [多页文档](zh-cn/more-pages.md)
  * [定制导航栏](zh-cn/custom-navbar.md)
  * [封面](zh-cn/cover.md)
* 配置
  * [配置项](zh-cn/configuration.md)
  * [主题](zh-cn/themes.md)
  * [使用插件](zh-cn/plugins.md)
  * [Markdown 配置](zh-cn/markdown.md)
  * [代码高亮](zh-cn/language-highlight.md)


定制化

如果上面都还不满足,那么它还可以定制化:

  • 配置项:提供几十种配置项(使用时可以查看文档)
  • 主题支持





如果还不满足,那么docs还有人为之开发了主题系统

https://github.com/jhildenbiddle/docsify-themeable

  • 插件列表

全文搜索 - Search、谷歌统计 - Google Analytics、emoji、外链脚本 - External Script、图片缩放 - Zoom image、在 Github 上编辑、代码即时预览和 jsfiddle 集成、复制到剪贴板

、Disqus、Gitalk、Pagination、字数统计、Code Fund、Tabs自定义插件

  • 自定义插件

docsify 提供了一套插件机制,其中提供的钩子(hook)支持处理异步逻辑,可以很方便地扩展功能。

  • Markdown 配置

内置的 Markdown 解析器是 marked,可以修改它的配置。同时可以直接配置 renderer。

  • 代码高亮

docsify内置的代码高亮工具是 Prism。Prism 默认支持的语言如下:

  1. Markup - markup, html, xml, svg, mathml, ssml, atom, rss
  2. CSS - css
  3. C-like - clike
  4. JavaScript - javascript, js

更多功能和用法

Docs确实很强大,以下用法和功能,在官方文档中也详细地介绍了,包括之前说的部署到Github Pages

  • 部署
  • 文档助手
  • 兼容 Vue
  • CDN
  • 离线模式(PWA)
  • 服务端渲染 (SSR)
  • 文件嵌入

文档地址:

https://docsify.js.org/#/zh-cn/embed-files

本身也是开源项目:

https://github.com/docsifyjs/docsify


推荐对照文档进行详细的使用

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3450.html

标签: js文档
分享给朋友:

“一个优秀的程序员专属文档生成工具(开源)——docsify” 的相关文章

7种超轻量级的Linux发行版,能够帮助你找到适合自己的操作系统

Linux是一种非常受欢迎的开源操作系统,而且有许多版本可以选择。有时候,你需要一种超轻量级的Linux发行版,它可以在资源有限的设备上运行,并且能够快速启动。本文将介绍7种超轻量级的Linux发行版,希望能够帮助你找到适合自己的操作系统。1. Tiny Core LinuxTiny Core Li...

基于archlinux的发行版有哪些?

Arch Linux 是一个 Linux 发行版,采用滚动更新的模型,这意味着 Arch Linux 不会定期发布新版本,而是持续接收更新和升级,保持系统与最新软件版本的同步。Arch Linux 以其极简主义、简单性和用户定制为中心的特点而闻名,专注于让用户对其系统配置具有完全控制权。然而,它也以...

迁移GIT仓库并带有历史提交记录

迁移git仓库开发在很多时候,会遇到一个问题。GIT仓库的管理,特别是仓库的迁移。我需要保留已有的历史记录,而不是重新开发,重头再来。我们可以这样做:使用--mirror模式会把本地的分支都克隆。// 先用--bare克隆裸仓库 git clone git@gitee.com:xxx/testApp...

美国民众负债累累 但今年假期消费者支出仍将创下新高

智通财经APP获悉,在迎接假期之际,许多美国人已经背负了创纪录的信用卡债务。然而,今年假期消费者支出仍将创下新高。根据美国零售联合会(NRF)上周发布的报告,预计今年11月1日至12月31日期间的消费总额将达到创纪录的9795亿至9890亿美元之间。NRF首席经济学家Jack Kleinhenz表示...

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

虚幻引擎5.5发布

IT之家 11 月 13 日消息,虚幻引擎 5.5 现已发布。据介绍,新版本虚幻引擎在动画创作、虚拟制作和移动游戏开发方面取得进步;渲染、摄像机内视觉特效和开发人员迭代等领域的部分功能已可用于生产。IT之家整理部分功能亮点如下:动画Sequencer增强虚幻引擎的非线性动画编辑器 Sequencer...