介绍docsify是一个神奇的文档网站生成器的目录

介绍

docsify 是一个了不起的文档网站生成器。docsify 不同于许多静态博客生成 html 静态 web 文件的方式,而是在运行时转换它们。只需创建一个 index.html 文件来编写文档并部署到 Github Pages。

支持的功能开始安装和使用

这里推荐在官方文档中安装一个全局的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 文件夹目录

初始化成功后b本地调试工具,可以看到./docs目录下创建了几个文件

直接编辑 docs/README.md 会更新文档,当然还会添加更多页面。

接下来是预览效果:

cd docs
docsify serve

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

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




  
  
  
  


  

只需将自述文件添加到当前目录,然后您需要启动一个静态服务器。这里推荐使用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。




* [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也有为其开发的主题系统

全文搜索 – 搜索,谷歌统计 – 谷歌分析,表情符号,外部脚本 – 外部脚本,图像缩放 – 缩放图像,在 Github 上编辑,代码即时预览和 jsfiddle 集成,复制到剪贴板

, Disqus, Gitalk, 分页, 字数, 代码基金, 选项卡自定义插件

docsify提供插件机制b本地调试工具,提供hook支持处理异步逻辑,可以方便的扩展功能。

内置的 Markdown 解析器被标记,可以修改其配置。同时可以直接配置渲染器。

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

Markup – markup, html, xml, svg, mathml, ssml, atom, rssCSS – cssC-like – clikeJavaScript – javascript, js 更多功能和用法

Docs确实很强大。下面的用法和功能在官方文档中也有详细描述,包括前面提到的部署到 Github Pages。

文件地址:

#/zh-cn/嵌入文件

它本身也是一个开源项目:

建议参考文档详细使用

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论