docsify安装,docsify搭建,docsify使用教程
docsify安装,docsify搭建,docsify使用教程
首先安装docsify-cli脚手架,用于初始化docsify文档项目
npm i docsify-cli -g
然后初始化
docsify init ./docs
初始化后
目录结构如下所示
- index.html 入口文件
- README.md 会做为主页内容渲染
- .nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件 (.后缀结尾的是隐藏文件)
启动
在我们使用init命令初始化一个文档后,我们需要通过下面命令运行一个本地服务器
docsify serve
项目启动后,默认访问 http://localhost:3000 ,如下图所示,我们能够看到一个帮助文档的骨架了
同时docsify还提供了LiveReload功能,也就是可以在我们修改文档后,能够实时预览
编辑
修改Loading
初始化时会显示 Loading… 内容,你可以自定义提示信息,我们只需要修改index.html中的
定制侧边栏
默认情况下,侧边栏会根据当前文档的标题生成目录,也可以通过设置文档链接,通过Markdown文件生成,效果如当前的文件的侧边栏,首先我们在index.html里面进行设置
window.$docsify = {loadSidebar: true, // 设置侧边栏}
然后新增一个markdown文件_sidebar.md
,
设置封面
docsify默认是没有封面的,默认有个首页./README.md
。
通过设置coverpage
参数,可以开启渲染封面的功能。
首先需要在index.html
文件中的window.$docsify
添加coverpage: true
选项:
window.$docsify = {coverpage: true}
接着在项目根目录创建_coverpage.md
文件
自定义封面背景
目前的背景是随机生成的渐变色,每次刷新都会显示不同的颜色。
docsify封面支持自定义背景色或者背景图,在_coverpage.md
文档末尾添加:
<!-- 背景图片 -->
![](_media/bg.png)<!-- 背景色 -->
![color](#2f4253)
注意:
- 自定义背景配置一定要在
_coverpage.md
文档末尾。 - 背景图片和背景色只能有一个生效.
- 背景色一定要是
#2f4253
这种格式的。
封面作为首页
配置了封面后,封面和首页是同时出现的,封面在上面,首页在下面。通过设置onlyCover
参数,可以让docsify网站首页只显示封面,原来的首页通过http://localhost:3000/#/README
访问。在index.html
文件中的window.$docsify
添加onlyCover: true,
选项:
window.$docsify = {coverpage: true,onlyCover: true,}
通过此配置可以把./README.md
文件独立出来,当成项目真正的README介绍文件
搜索插件
全文搜索插件会根据当前页面上的超链接获取文档内容,在 localStorage 内建立文档索引。默认过期时间为一天,当然我们可以自己指定需要缓存的文件列表或者配置过期时间。
<script>window.$docsify = {// 完整配置参数search: {maxAge: 86400000, // 过期时间,单位毫秒,默认一天paths: [], // or 'auto',匹配文件路径placeholder: 'Type to search', // 搜索提示框文字, 支持本地化,例子在下面// placeholder: {// '/zh-cn/': '搜索',// '/': 'Type to search'// },noData: 'No Results!', // 找不到结果文字提示,支持本地化,例子在下面// noData: {// '/zh-cn/': '找不到结果',// '/': 'No Results'// },depth: 2, // 搜索标题的最大程级, 1 - 6}}</script><!-- 引入搜索模块 --><script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
安装后,我们就能够使用搜索功能了
docsify安装,docsify搭建,docsify使用教程相关推荐
- Docsify个人网站搭建详细教程
目录 一.什么是 docsify 二.安装 docsify 三.多页文档设置 四.定制化配置 4.1.侧边栏 4.2.导航栏 4.3.封面 4.4.主题 五.部署 5.1.部署到Gitee 5.2.部 ...
- docsify+github/gitee搭建个人在线文档
docsify,一款神奇的文档网站生成器.docsify 可以快速帮你生成文档网站.不同于 GitBook.Hexo 的地方是,它不会生成静态的 .html 文件,所有转换工作都是在运行时.如果你 ...
- docsify 安装配置文档
docsify 安装配置文档 安装运行环境npm 用sudo执行以下命令即可完成安装 node安装命令 $ sudo curl -sL -o /etc/yum.repos.d/khara-nodejs ...
- python3.6安装opencv-python3.6、opencv安装环境搭建过程(图文教程)
我需要使用tesseract-OCR的模块,vs的配置有点麻烦,所以采用py的环境,搭建. 1.在python.org网站下载python3.6版本 我下载的3.6.8的python的安装 选存放的路 ...
- linux网站目录在哪_果核建站教程【二】环境安装与搭建第一个网站
有问题加群,一起讨论,一起学习 群号:664592923 昨天大家都能理解,那么今天我们就要进入实战教程咯. 这节教程讲在本地搭建环境和安装程序. 1本地环境的搭建 之前有教程讲如何在Windows开 ...
- python3.6安装步骤-python3.6、opencv安装环境搭建过程(图文教程)
我需要使用tesseract-OCR的模块,vs的配置有点麻烦,所以采用py的环境,搭建. 1.在python.org网站下载python3.6版本 我下载的3.6.8的python的安装 选存放的路 ...
- 腾讯云安装和搭建宝塔面板详细教程
下面稍微介绍一下如何使用阿里云服务器安装宝塔面板. 概述 如果还有不了解宝塔面板怎么使用的小伙伴,可以看下我总结的系列教程,保证从新手变老鸟: [宝塔面板精选教程汇总] 宝塔面板教程(1)基于云服务器 ...
- 本地k8s集群搭建保姆级教程(4)-安装k8s集群Dashboard
安装k8s集群管理UI 1 Dashboard安装 1.1 参考文档 Dashboard 是基于网页的 Kubernetes 用户界面. 你可以使用 Dashboard 将容器应用部署到 Kubern ...
- Hadoop安装搭建伪分布式教程(全面)吐血整理
Hadoop安装搭建伪分布式教程(全面)吐血整理 1.安装下载虚拟机VMware 2.下载Ubuntu18.04镜像文件,并在VMware中添加虚拟机. 3.Hadoop伪分布式搭建 3.1 创建ha ...
最新文章
- springboot数据源不正确_SpringBoot整合多数据源的巨坑!!!
- Altair Compose 2020直装中文版
- 干货 ▏为什么你的产品或界面总被吐槽?
- virtualvenv+django+uWSGI+nginx 部署 踩坑记录
- leetcode 907. Sum of Subarray Minimums | 907. 子数组的最小值之和(单调栈)
- 使用Chrome的inspect element注意事项
- 我的世界1.11服务器咋发信息,我的世界进服务器怎么注册怎么发信息
- 概率占据图(POM)算法理解
- 深入理解张正友相机标定法:数学理论详细推导
- org.apache.catalina.loader.StandardClassLoader@1af33d6
- HDU-2036 改革春风吹满地 (多边形面积求解)
- 整理一下N年前写的java web考勤管理系统
- 计算机软件水平考试中级题目,计算机软考中级考试试题及答案
- 基于javaweb的宠物管理系统
- Amazon和Instagram网站视频下载
- java定时每周执行一次_Spring 定时任务如何实现每周一某个时间执行?
- Send函数和Recv函数解析
- 仓库调用 RAP接口管理平台
- 文本相似度计算——Simhash算法(python实现)
- 基于Geomesa服务查询轨迹数据无法根据空间和时间范围进行查询的问题解决办法