当前位置：首页 > 编程日记 > 正文

使用Docsify搭建Markdown文件服务器

编程日记 2024-05-29 19:30:00

使用docsify快速生成文档网站

1. 概述
2. 安装 docsify-cli 工具
3. 初始化项目
4. 本地预览
5. 多页文档
6. 定制导航栏
- 6.1 在index.html中添加导航栏
- 6.2 添加导航栏配置文件
- 6.3 下拉导航栏
7. 封面设置
- 7.1 设置封面参数
- 7.2 自定义封面背景
- 7.3 将封面设置为首页
配置项
- el
- repo
- maxLevel
- loadNavbar
- homepage

1. 概述

docsify网站：https://docsify.js.org/#/zh-cn/

docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署在 GitHub Pages。

2. 安装 docsify-cli 工具

推荐使用如下命令全局安装 docsify-cli 工具，可以方便地创建及在本地预览生成的文档。

npm i docsify-cli -g

安装完成后使用docsify -v命令检查一下版本号

F:\PersonalProject>docsify -vdocsify-cli version:4.4.3

下面进行文档项目的创建与开发。

3. 初始化项目

使用 docsify init 命令初始化项目。命令语法如下：

docsify init <path> [--local false] [--theme vue] [--plugins false]

简写形式如下：

docsify i <path> [-l false] [-t vue] [--plugins false]

命令配置项含义请查阅 docsify-cli 文档。

如果想在项目的 ./docs 目录里写文档，可以使用如下命令：

docsify init ./docs

初始化后./docs目录文件结构如下：
./docs目录结构
文件结构介绍：

index.html 入口文件，在该文件中可以设置docsify配置项，配置项信息请查阅 docsify 配置项。
README.md 会做为主页内容渲染。
.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件。

直接编辑 docs/README.md 就能更新文档内容，当然也可以添加更多页面。

4. 本地预览

终端运行 docsify serve命令启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000。

docsify serve docs

如果需要执行端口，可在命令上增加-p选项：

docsify serve docs -p 4000

!](https://img-blog.csdnimg.cn/0010e7961ce34fd79fe8c2d6fd0b596a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5riF5pmoLemYs-WFiXp4,size_20,color_FFFFFF,t_70,g_se,x_16)

更多命令行工具用法，参考 docsify-cli 文档。

5. 多页文档

docsify支持设置多页文档，多页文档之间的跳转设置和Markdown文档与文档之间的跳转方式一致。

格式：[显示的文本内容](跳转地址)

6. 定制导航栏

docsify默认是没有导航栏的，可以通过修改index.html和添加导航栏配置两种方式来显示导航栏。

注意： 文档的链接都要以 #/ 开头。

6.1 在index.html中添加导航栏

如果导航项较少的话，可以使用这种方式。

<!-- index.html --><body><nav><a href="#/">EN</a><a href="#/zh-cn/">中文</a></nav><div id="app"></div>
</body>

6.2 添加导航栏配置文件

在index.html中配置loadNavbar属性值，如果其值为true，则默认加载的文件为 _navbar.md；也可以将其值指定为具体的配置文件名。

<!-- index.html --><script>window.$docsify = {loadNavbar: true,  // 默认加载配置文件 _navbar.mdloadNavbar: 'nav.md', 	// 自定义加载的配置文件 nav.md}
</script>

<!-- _navbar.md -->* [En](/)
* [中文](/zh-cn/)

在这里插入图片描述

6.3 下拉导航栏

当导航项过多时，或者希望将导航栏显示为下拉列表的形式可以在导航配置文件中使用如下写法。

<!-- _navbar.md -->* 入门* [快速开始](zh-cn/quickstart.md)* [多页文档](zh-cn/more-pages.md)* [定制导航栏](zh-cn/custom-navbar.md)* [封面](zh-cn/cover.md)

在这里插入图片描述

具体配置规则见 配置项#loadNavbar

7. 封面设置

7.1 设置封面参数

通过设置 coverpage 参数，可以开启渲染封面的功能。

封面的生成同样是从 markdown 文件渲染来的。开启渲染封面功能后在文档根目录创建 _coverpage.md 文件。

<!-- index.html --><script>window.$docsify = {coverpage: true}
</script>

注意：

目前封面的背景是随机生成的渐变色，想修改封面背景继续往下看。
通常封面和首页是同时出现的，如果希望只在访问主页时加载封面可以通过设置onlyCover 选项来实现。

7.2 自定义封面背景

可以在文档末尾用添加图片的 Markdown 语法设置自定义背景（背景色/背景图）。

<!-- _coverpage.md --># docsify <small>3.5</small>[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#quick-start)<!-- 背景图片 -->![](_media/bg.png)<!-- 背景色 -->![color](#f0f0f0)

7.3 将封面设置为首页

只在访问主页时加载封面。解决封面和首页同时出现的问题。

window.$docsify = {onlyCover: false,
};

配置项

可以在window.$docsify中设置配置项信息。

el

类型：string
默认值：#app

docsify 初始化的挂载元素，可以是一个 CSS 选择器，默认为 #app 如果不存在就直接绑定在 body 上。

window.$docsify = {el: '#app',
};

repo

类型：String
默认值: null

配置仓库地址或者 username/repo 的字符串，会在页面右上角渲染一个 GitHub Corner 挂件。

window.$docsify = {repo: 'docsifyjs/docsify',// orrepo: 'https://github.com/docsifyjs/docsify/',
};

maxLevel

类型：Number
默认值: 6

默认情况下会抓取文档中所有标题渲染成目录，可配置最大支持渲染的标题层级。

window.$docsify = {maxLevel: 4,
};

loadNavbar

类型：Boolean|String
默认值: false

加载自定义导航栏，参考定制导航栏了解用法。设置为 true 后会加载 _navbar.md 文件，也可以自定义加载的文件名。

window.$docsify = {// 加载 _navbar.mdloadNavbar: true,// 加载 nav.mdloadNavbar: 'nav.md',
};

homepage

类型：String
默认值: README.md

设置首页文件加载路径。适合不想将 README.md 作为入口文件渲染，或者是文档存放在其他位置的情况使用。

window.$docsify = {// 入口文件改为 /home.mdhomepage: 'home.md',// 文档和仓库根目录下的 README.md 内容一致homepage:'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
};

更多配置项请自行查阅官方文档。

—— END ——

https://www.dkcj.cn/info/8409.html

DirectX903D 颜色

颜色颜色表示颜色用RGB三元组表示。为红色（red）绿色（Green）蓝色（Blue）。 RGB数据可用两种不同的结构来保存。 1 D3DCOLOR结构与DWORD类型完全相同。共有32位。各位被分成四个8位项（sectio…

编程日记2024/05/29 19:20:00

JAVA SHA1 加密对应 c# SHA1 加密

java: 1 public static String SHA1(String decript) {2 try {3 MessageDigest digest MessageDigest.getInstance("SHA-1");4 digest.update(decript.getBytes("UTF-8"));5 byte[] messageDigest dige…

编程日记2024/05/29 19:10:00

VLAN设置错误，导致部分用户无法上网

一、事由： 单位的思科3560交换机安装到位，加班到夜里12点，测试了一下，怎么有些用户PING不到了呢？难道集体关机了吗？太累了，准备明天处理。二、问题： 第二天早上&#xff0…

编程日记2024/05/29 19:00:00

JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)

第一： 限制只能是整数 [js] view plaincopy <input type "text" name "number" id number οnkeyup "if(! /^d$/.test(this.value)){alert(只能整数);this.value;}" /> 如果不是整数就直接alert 第二： 限制是两位…

编程日记2024/05/29 18:50:00

npm包开发测试与发布

NPM 包开发测试与发布NPM 包开发测试与发布引言1. 开发步骤1.1. 项目创建1.2. 工具类功能实现1.3. ts文件编译2. npm包本地测试2.1. 将npm包文件引入项目2.2. npm包功能测试3. 发布4. 注意事项我的NPM包NPM 包开发测试与发布引言在项目开发过程中，有时会遇到在多…

编程日记2024/05/29 18:40:00

Jquery php 点击td变成input，修改后失去焦点发送数据

html部分 <Td><?php echo $row[bigclassid]?></Td> <td height"25" width"241" class"bigclassname"><?php echo $row[bigclassname]?></a></td> Js部分 <script> /**//* * 说明&#xff1…

编程日记2024/05/29 18:30:00

美元加息怎么“剪羊毛”

我国为什么把美元储备看的如此重要? 我国需要一定的美元储备，不敢把美元随便花出去!1998年亚洲金融危机，东南亚国家为什么抵抗不过对冲基金，就是因为他们手里的美元储备太少，如果你手里美元多，就可以放出美元&#xf…

编程日记2024/05/29 18:20:00

浅谈企业IT应用的访问方式之：乱想

近来手上的几大块事情，算是大头朝下了。后面可能更多是跟公司的最终用户打交道，一套完整的应用服务体系，不光只是服务器平台的搭建。更重要的是如何让用户觉得确实给他们带来了帮助。在非洲的一段经历让我们严重认识到一点，其…

编程日记2024/05/29 18:10:00

java中的基本用法

java中的基本用法关键字：专门用途的字符串所有java关键字都是小写英文标识符 java常量 java变量 ■ 作用域：起作用的区域■ 使用前必须先声明，在赋值。使用变量名访问这块区域java程序执行过程 java变量的分类 ■ 局部变量■ 成员变量■…

编程日记2024/05/29 18:00:00

JavaScript中双叹号(!!)和单叹号(!)

转自：JavaScript中双叹号(!!)作用经常看到这样的例子： var a； var b!!a; a默认是undefined。!a是true，!!a则是false，所以b的值是false，而不再是undefined，也非其它值，主要是为后续判…

编程日记2024/05/29 17:50:00

git 初次push

1、本地仓库与远程仓库第一次同步时，一直同步不上最后 git status ,发现有两个文件没提交提交后再push即可 2、如果不行，再看一下其他情况转载于:https://www.cnblogs.com/sanhao/p/10681919.html

编程日记2024/05/29 17:40:00

简单是可靠的先决条件

2010年4月编程语言排名，C语言重回第1宝座，不禁令人感叹C语言的生命力。记得有人在几年前发表了一篇C语言已经死了，5个需要忘却它的理由，其后有人发表驳“C语言已经死了”，又有人发表也驳"驳C语言已经死了" …

编程日记2024/05/29 17:30:00

帮朋友招聘赴北京微软ASP.NET开发工程师

职位要求：1. 3年以上ASP.NET开发经验。2. 有过大型门户网站开发经验。3. 精通ASP.NET WEB开发、Ajax技术，有良好的代码编写习惯。4. 能够熟练运用MVC框架。有意向的朋友可以将简历发到我邮箱：fanmenglifemicrosoftservices.com.cn转载于:http…

编程日记2024/05/29 17:20:00

xx.xib: error: Illegal Configuration: Safe Area Layout Guide before iOS 9.0报错问题解决

之前是用xcode8.3.3创建的工程最近升级到Xcode9.0 遇见了这个问题在Xcode 9.0以上新建xib文件会报错 xx.xib: error: Illegal Configuration: Safe Area Layout Guide before iOS 9.0 是因为在iOS 11上安全距离的变化引起的解决办法如下图：（以UITableV…

编程日记2024/05/29 17:10:00

LuoguP2617 Dynamic Rankings (动态主席树学习理解)

题目地址题目链接题解动态主席树的板子题。动态主席树其实和静态的有很大差别，虽然同样是n个根，但是节点并不能共用，每个根节点表示bit上的一段区间。所以其实是个树套树的东西来着，外层是bit，内层是主席树。然后…

编程日记2024/05/29 17:00:00

Flash气泡回弹效果

好久没有碰过Flash了，今天温习一下AS3.0，做了一个回弹效果，气泡回弹本想着怎么可以定义气泡的不同颜色，这样可以做出更绚丽的效果，或者更进步一，气泡和气泡直接回弹，想了老半天没有想出来&#…

编程日记2024/05/29 16:50:00

数据库连接前的准备数据库连接的jar包数据库连接的java代码： package com.it.util;import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException;public class Dbutil {private String jdbcName"com.mysql.jdbc.Driver"…

编程日记2024/05/29 16:40:00

windows建立PPPoE服务器

windows建立PPPoE服务器1.下载RASPPPOE（0.99版）2.安装RASPPPOE协议本地连接-->属性-->常规-->安装-->协议-->添加-->从磁盘安装-->浏览-->“找到自己RASPPOE所在的目录下的那个winpppoe.inf”-->打开-->继续……………即可…

编程日记2024/05/29 16:30:00

使用 Azure CLI 管理 Azure 虚拟网络和 Linux 虚拟机

Azure 虚拟机使用 Azure 网络进行内部和外部网络通信。本教程将指导读者部署两个虚拟机，并为这些 VM 配置 Azure 网络。本教程中的示例假设 VM 将要托管包含数据库后端的 Web 应用程序，但本教程并不介绍如何部署应用程序。本教程介绍如何执行下列操作…

编程日记2024/05/29 16:20:00

面向对象的内存分析

注意：成员属性是有默认的初始值。数据类型默认的初始值int 0float 0.0fdouble 0.0char String null引用数据类型 …

编程日记2024/05/29 16:10:00

ModuleNotFoundError: No module named ‘qcloud_cos‘

是腾讯云提供的一个Python SDK，用于与腾讯云对象存储（COS）服务进行交互。使用pip安装qcloud_cos报以下错误。这个错误表示Python无法找到名为。

编程日记2024/05/29 16:00:03

java常见的四个运行时期的异常

空指针异常数组越界异常类型转换异常无效参数异常

编程日记2024/05/29 16:00:00

ASP.NET 4.0: 请求验证模式变化导致ValidateRequest=false失效

ASP.NET请求验证功能可以给我提供应用程序的安全保证，避免站点受到XSS的攻击。但是在一些情况下，我们需要禁用这个功能，比如我们需要使用HtmlEditor来让用户输入一些HTML文本，这时候ASP.NET 2.0允许我们可以通过在web.config设置v…

编程日记2024/05/29 15:50:00

[CTO札记]从技术走向商业的3级转变

思想原创：老刀。

编程日记2024/05/29 15:40:00

[Ubuntu] 安装/卸载声卡驱动

卸载sudo apt-get --purge remove linux-sound-base alsa-base alsa-utils安装sudo apt-get install linux-sound-base alsa-base alsa-utils 可以这样来处理声卡驱动突然出现异常的情况。转载于:https://www.cnblogs.com/davidhhuan/archive/2010/04/21/1716941.html

编程日记2024/05/29 15:30:00

java异常类 Object类

1.Object类 Object类是所有类的父类,是最顶层的父类.当一个类没有直接继承其它父类时,这个类的直接父类就是Object类.class Person {...}等价于class Person extends Object {...} Object 里的equals方法: boolean equals(Object obj):判断当前对象与obj对象的地址是否一样,…

编程日记2024/05/29 15:20:00

『TensorFlow』卷积层、池化层详解

一、前向计算和反向传播数学过程讲解这里讲解的是平均池化层，最大池化层见本文第三小节二、测试代码数据和上面完全一致，自行打印验证即可。 1、前向传播 import tensorflow as tf import numpy as np# 输入张量为33的二维矩阵 M np.array([[[1], [-…

编程日记2024/05/29 15:10:00

个人计算机用户隐私保护全接触（2）

在第一部分中，我们已经详细讨论了有关如何加固系统和应用数据加密来保护用户隐私的方式，现在，就跟雪源梅香一起了解其它保护用户隐私的方法。1、清除计算机当中的用户操作痕迹我们应当在使用完计算机后，对操作所产的痕迹进行全面清…

编程日记2024/05/29 15:00:00

java日期相关的类正则表达式

常用的API Date、Math、DateFormat、Calendar、正则表达式 Data类 public class DateDeom {public static void main(String[] args) {//创建日期类的对象Date datenew Date();// 返回自 1970 年 1 月 1 日 00:00:00 GMT 以来此 Date 对象表示的毫秒数。long timedate.getTim…

编程日记2024/05/29 14:50:00

M_Map画南海水深地形图

数据来自Etopo1全球地形和水深数据。其分为两个版本，Ice Surface和Bedrock，两个版本基本一致。不同之处在于在处理南极洲和Greenland地形时，前者给出的是加上冰盖层之后的高程，后者给出的是岩床的高程。在每个子版本下又有多种数…

编程日记2024/05/29 14:40:00