Docsify 创建文档网站
文章目录
- Docsify 创建文档网站
- 1 引言
- 2 Docsify 简介
- 3 使用 docsify 构建文档
- 3.1 构建 docsify 目录结构
- 3.2 添加文档标题名
- 3.3 添加 GitHub 图标
- 3.4 添加编辑文档按钮
- 4 定制功能
- 4.1 支持 DOT 语言作图
- 4.2 支持 LaTex 数学公式
- 4.3 支持 PDF 页面展示
- 4.4 支持回到顶部
- 5 离线模式
- 5.1 创建 serviceWorker
- 5.2 寄存器
- 6 效果展示
Docsify 创建文档网站
效果预览
1 引言
在软件开发过程中，编程人员经常需要写文档，如开发文档、接口 API 文档、软件使用手册等，也会编写 Blog 记录开发过程，技术感悟（比如我的博客：EnjoyToShare ）。对于这些文档，一般情况下编写人员有以下几种需求：编写简单、对外发布、格式友好、形式专业。而编写的工具则有好多，包括以下几类：
文档编写工具
word工具类：如 office word，wps，txt 等
平台博客类：csdn，简书，oschina 等
自建网站类：github，hexo，gitbook，markdown 等
知识工具类：confluence，语雀，看云等
当然，各种工具有各自的优缺点，简单一点的话，使用语雀、看云来写长系列文章或者书籍也比较适合，但作为一个开发人员，希望找一个能属于自己的，简单的，有点逼格的文档工具，特别是针对开源软件文档编写，放个 pdf 或者 doc 文档，不便于维护，最好能跟 github 关联，即时可看，又方便维护，如此，则非 docsify 莫属了（当然 gitbook 也行）。如下可以截图看一下基于 docsify 构建的文档。本文针对如何使用 docsify 实现文档构建进行讲解，希望能帮助到想构建自己的文档网站的同仁。
2 Docsify 简介
按 Docsify 官网的介绍，一句话:一个神奇的文档网站生成工具，使用它，可以使用简单的方式，构建一个专业的文档网站。如果使用过 GitBook 和 Hexo 的同仁，可以继续使用 markdown 编写文档，然后转为 html 进行显示。而 docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。只需要创建一个 index.html ，就可以开始写文档而且直接部署在 GitHub Pages 进行发布，方便、快捷、格式友好，样式不错。
基于 Docsify 设计文档预览链接：EnjoyToShare 项目笔记
3 使用 docsify 构建文档
本章节将对如何使用
docsify构建文档进行详细描述。
3.1 构建 docsify 目录结构
(1) 安装
npm
- git：http://git-scm.com/ 安装 git 即可
(2) 安装
nodejs
- node.js：http://nodejs.org/
(3) 安装
docsify
- 安装
docsify-cli工具，方便创建及本地预览文档网站。
npm i docsify-cli -g
(4) 初始化项目
- 进入指定文件目录，进行初始化操作
docsify init ./docs
docsify 有其规范的目录结构,初始化成功后，可以看到 ./docs 目录下最基本的结构如下：
index.html# 入口文件README.md# 会做为主页内容渲染.nojekyll# 用于阻止 GitHub Pages 会忽略掉下划线开头的文件
(5) 本地预览网站
- 运行一个本地服务器通过
docsify serve可以方便的预览效果，而且提供 LiveReload 功能，可以让实时的预览。默认访问 http://localhost:3000/#/ 和 http://127.0.0.1:3000/#/
docsify serve docs
- 预览图：(由于 README.md 文件被我增加了内容，故显示修改后的内容)
一个基本的文档网站就搭建好了，docsify 还可以自定义导航栏，自定义侧边栏以及背景图和一些开发插件等等。更多配置请参考官方文档 https://docsify.js.org
期待继续优化，，，go on
3.2 添加文档标题名
- 在页面左上角添加文档标题名(自定义)，显示如下图所示：
- 操作如下：在 index.html 文件里添加 name 字段：
<script>window.$docsify = {name: 'EnjoyToShare',}</script>
若想在点击文档标题的时候链接到想要的地址，可进行如下操作：
- 操作如下：在 index.html 文件里添加 nameLink 字段：
<script>window.$docsify = {nameLink: 'https://wugenqiang.gitee.io',}</script>
3.3 添加 GitHub 图标
- 在页面右上角添加 GitHub 图标，显示如下图所示：
- 操作如下：在 index.html 文件里添加 repo 字段：
<script>window.$docsify = {repo: 'wugenqiang/CS-Notes',}</script>
3.4 添加编辑文档按钮
- 操作如下：在 index.html 文件里添加：
<script>window.$docsify = {formatUpdated: '{YYYY}/{MM}/{DD} {HH}:{mm}',plugins: [function(hook, vm) {hook.beforeEach(function (html) {var url = 'https://github.com/wugenqiang/CS-Notes/tree/master/' + vm.route.filevar editHtml = '[
Docsify 创建文档网站相关推荐
- 如何用github制作html网站,如何使用docsify和GitHub页面创建文档网站？
如何自己创建网站?文档是帮助用户使用开源项目的一个重要部分,但它并不总是开发人员的首要任务,因为他们可能更关心如何使他们的应用程序更好地使用它.这就是为什么开发人员可以更容易地发布文档.在本教程中,我 ...
- docsify 构建文档网站之定制功能（全网最全）
作者: wugenqiang 学习笔记:https://notebook.js.org/ 微信公众号:码客 E 分享(ID:enjoytoshare) 文档后续更新地址:docsify 构建文档网站 ...
- Docute 创建文档网站（docute v3）
文章目录 Docute 3 创建文档网站 1 Docute 介绍 2 快速开始 2.1 手动创建文件 2.2 自动创建文件 3 自定义定制 3.1 配置文件 3.2 首页 3.3 Landing 页面 ...
- Github+docsify打造在线文档网站
写在前面 搭建这个在线文档的目的是方便自己对学习笔记的查看,比较喜欢 docsify 的主题风格,所以没有用 Github Pages 直接给的主题,自己根据官方文档进行了配置,目前已经成功上线. 1 ...
- 使用docsify构建专业文档网站(下)
tags: docsify doc github 文章目录 1.引言 2.使用`Github Pages`部署文档 3.使用`Gitalk`添加评论功能 3.1 gitalk介绍 3.2 引入gita ...
- 使用docsify构建专业文档网站(上)
tags: docsify doc github 文章目录 1.引言 2.docsify简介 3. 使用docsify构建文档 3.1 构建docsify目录结构 3.1.1 目录结构 3.1.2 编 ...
- 使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
Vue3+TS+Vite开发组件库并发布到npm 网站在线预览: Vue Amazing UI | Amazing UI Components LibraryAmazing UI 组件库https:/ ...
- docsify神奇的文档网站生成工具
原文链接 个人博客-欢迎访问 docsify 是一个动态生成文档网站的工具.不同于 GitBook.Hexo 的地方是它不会生成将 .md 转成 .html 文件,所有转换工作都是在运行时进行. 这将 ...
- 转载文章-【工具】10分钟快速搭建属于自己的文档网站-来自掘金
掘金 首页 探索掘金 搜索 lvhanghmm的头像 Gopal lv-4 2021年03月09日 阅读 9930 关注 [工具]10分钟快速搭建属于自己的文档网站 前言 很多同学都希望能够拥有自己的 ...
最新文章
- 数据服务让业务开发更敏捷
- leetcode C++ 28. 实现 strStr() 实现 strStr() 函数。 给定一个 haystack 字符串和一个 needle 字符串，在 haystack 字符串中找出 need
- MATLAB实现实时录音,语音采集与读写用matlab实现录音以及语谱图的绘制.pdf
- hdu 4679 树的直径
- JavaScript如何简单而准确地判断复杂数据类型
- 第13章 使用ADO.NET访问数据库
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_40、Redis工具类封装讲解和实战...
- 如何在java对象里访问Spring中已加载的property内容
- 车牌识别sdk android,Android车牌识别sdk
- 数据分析项目分析之风控建模!!
- linux查看trunk信息,linux网卡启用trunk模式操作标准.docx
- java生成pdf旋转_Java 设置PDF页面大小/旋转、纸张方向、页边距
- creator多点触摸理解
- {ResponseInfo:com.qiniu.http.Response@144f47b,status:401, reqId:uwcAAKdVRC2bnUoV, xlog:UP/401, xvia:
- 如何在国外进行自然科学研究
- python 一个例子解释全局变量和局部变量
- “竹影扫阶尘不动，月穿潭底水无痕”引出的……
- AE - Saber插件（简单使用方法）
- CodeForces #379(734A|734B|734C|734D|734E|734F)|二分查找|模拟|树的半径|位运算
- 2017cad光标大小怎么调_cad光标设置,小编教你CAD的十字光标如何设置大小
热门文章