docsify编写自己的文档库

最新推荐文章于 2024-05-07 22:24:01 发布

liaomin416100569

最新推荐文章于 2024-05-07 22:24:01 发布

阅读量1.6k

点赞数 4

分类专栏： linux 其他

本文链接：https://blog.csdn.net/liaomin416100569/article/details/88783782

版权

linux 同时被 2 个专栏收录

57 篇文章 1 订阅

订阅专栏

其他

32 篇文章 0 订阅

订阅专栏

文章目录

docsify简介
docsify环境安装
- 环境安装
- 测试左侧导航栏
docsify多文档
docsify离线
docsify搜索插件

docsify简介

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。
这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记录，只需要创建一个 index.html 就可以开始写文档而且直接部署在 GitHub Pages。
官方网站：https://docsify.js.org
中文文档：https://docsify.js.org/#/zh-cn/

特性

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

docsify环境安装

安装nodejs参考：https://blog.csdn.net/liaomin416100569/article/details/81746168

环境安装

安装 docsify-cli

cnpm install docsify-cli -g

随意在任意盘新建一个目录（假设我在d盘下有个docsify）

pushd d:/docsify && docsify init .

当前目录生成三个文件
在这里插入图片描述
初始化成功后，可以看到 . 目录下创建的几个文件

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

本地启动服务器预览

docsify serve docs

浏览器访问： http://localhost:3000
在这里插入图片描述

测试左侧导航栏

默认直接显示README.md所有的内容标题显示在左侧比如修改README.md

# 一级标题
> An awesome project.
## 二级标题
这是二级标题

### 三级标题


# 一级标题2

显示效果
在这里插入图片描述

docsify多文档

docsify默认是加载标题作为左侧目录树，如果希望一个md文档一个目录
修改index.html

window.$docsify = {
      name: '',
      repo: '',
	  loadSidebar: true,  //加载左侧导航栏 使用同一级目录下的_sidebar.md指定目录结构
	  subMaxLevel: 2 //每一个md文章中显示的标题级别
    }

同一级目录下新建_sidebar.md
比如：

* 首页
	* [测试a](a/)
	* [测试b](b/hello.md)

新建一个a目录下面添加一个README.md(不指定文件名默认的文件名)
内容：

# 这是a文章
# 一级标题
> An awesome project.
## 二级标题
这是二级标题

### 三级标题
# 一级标题2

新建一个b目录下面添加hello.md
重新预览（subMaxLevel设置为2，只显示了测试a下的2级标题，注意第一个#不显示左侧导航栏中）
在这里插入图片描述

docsify离线

进入docsify目录使用git，下载最新docsify源码

git clone https://github.com/docsifyjs/docsify.git^X

修改index.html应用的网络（//unpkg.com/docsify）的css和js文件为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
	  loadSidebar: true,
	  subMaxLevel: 2
    }
  </script>
  <script src="docsify/lib/docsify.min.js"></script>
</body>
</html>

断网测试一切正常

docsify搜索插件

具体可以参考https://docsify.js.org/#/zh-cn/plugins
index.html中添加插件引用

<script src="docsify/lib/plugins/search.js"></script>

添加属性

window.$docsify = {
	search: 'auto' // 默认值 当然不加也行 毕竟默认了。js引用必须有
    }

打开页面（可以搜索内容）
在这里插入图片描述

liaomin416100569

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
docsify编写自己的文档库

文章目录docsify简介docsify环境安装环境安装测试左侧导航栏docsify多文档docsify简介docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行。这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆 .html 文件“污染” commit 记...
复制链接

扫一扫