教你如何使用docsify快速部署优美的在线文档

发布时间:2020-12-26 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了教你如何使用docsify快速部署优美的在线文档编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果演示

推荐一个非常牛的文档网站生成器:docsify

我通过这个工具,成功将码云上的个人学习笔记发布到GiteePages上,有兴趣的小伙伴可以戳一戳:https://tqbx.gitee.io/javablog/

话不多说,直接上图,文档效果如下:

主页README.md

文章详情页

咋样,默认风格绿色小清新,给我的体验非常nice。除此之外,它还提供许多非常强大的可定制的内容,最主要的是,你只需要敲几行命令就可以快速启动了!

如果你也想拥有一个这样的文档网站,可以查看官方网站:https://docsify.js.org/#/zh-cn/quickstart,讲解十分详细,当然,本文也会做一定的记录。ok,让我们开始吧。

快速开始

为了演示,我们事先新建一个目录docsify用来存放待会要下载的内容。

进入docsify目录,打开命令行全局安装 docsify-cli 工具,可以方便地创建及在本地预览生成的文档。

$ npm i docsify-cli -g # 前提要安装好npm环境

初始化项目,我们直接在当前目录下初始化。

$ docsify init

初始化成功后,我们可以看到docsify目录下多出三个文件:

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

运行如下命令启动本地服务器,实时预览文档效果。

$ docsify serve # 默认启动当前目录,docsify serve docs表示启动当前目录下的docs目录

ok,接着访问:localhost:3000/,成功出现以下内容。

个性化定制

当然了,运行成功之后,你难免会想方设法去做一些适合自己的定制,比如代码高亮,链接,搜索,字数统计等等功能,你可以按照官网的文档,逐一添加自己喜欢的插件,在刚刚生成的index.html中定制。

我稍微做一下演示,抛砖引玉。

比如,假设我想让我的网站名显示,并且右上角标注github图标

  <script>
    window.$docsify = {
      name: '天乔巴夏',repo: 'https://github.com/TQBX'
    }
  </script>

如果你想要统计字数并显示,你可以添加如下插件:

<script src="//unpkg.com/docsify-count/dist/countable.js"></script>

并进行如下设置:

window.$docsify = {
  count:{
    countable:true,fontsize:'0.9em',color:'rgb(90,90,90)',language:'chinese'
  }
}

更多插件:https://docsify.js.org/#/zh-cn/plugins

如果你想更换主题,你可以更改css引入:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dolphin.css">

部署

部署的方式很多,这里使用Gitee的GiteePages,没啥的,就是国内访问的速度更快一点。

我们创建仓库并上传文件,点击服务,选择GiteePages

强制使用HTTPS,选择部署目录,默认为整个仓库。

接着访问生成的url即可: https://tqbx.gitee.io/test-docsify

注意,每次上传更新代码,服务不会自动更新,需要手动更新。

总结

以上是编程之家为你收集整理的教你如何使用docsify快速部署优美的在线文档全部内容,希望文章能够帮你解决教你如何使用docsify快速部署优美的在线文档所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!