简介

Docsify 是一种轻量级的文档网站生成器，可以使用 Markdown 文件快速创建美观的文档网站。它不需要任何构建过程，只需将 Markdown 文件放在一个目录中，并使用 Docsify 启动器运行。

使用 Docsify 可以非常方便地生成静态网站，无需编写 HTML、CSS 或 JavaScript 代码。 Docsify 的主要特点包括：

纯 JavaScript：整个应用程序都由 JavaScript 实现，没有后端服务器或编译过程。
Markdown 支持：可以使用 Markdown 语法来编写文档，而无需了解 HTML。
一流的主题：Docsify 提供多种主题，可以自定义主题颜色和样式。
侧边栏自动生成：Docsify 可以自动生成侧边栏，以帮助用户浏览文档。
全文搜索：Docsify 支持全文搜索，可以快速找到关键字。
多语言支持：Docsify 支持多语言，可以轻松地创建多语言文档网站。

总之，Docsify 是一个非常方便且易于使用的文档网站生成器，适用于各种类型的文档，例如软件文档、API文档、帮助文档等。

一、安装 Docsify

1.1 全局安装

npm i docsify-cli -g

1.2 初始化

docsify init ./brandondocument

1.3 运行服务

docsify serve brandondocument

1.4 部署

Github

二、配置及插件

多页文档

根目录创建 _sidebar.md 后，在文档文件夹下的 index.html 的 window.$docsify 中，增加如下语句以开启侧边栏。

<script>
  window.$docsify = {
    // 开启侧边栏
    loadSidebar: true
    }
  }
</script>

_sidebar.md 中内容为：

- 安装步骤
	- [docsify](install/docsify.md)
	- [docker](install/docker.md)
	- [dockerui](install/dockerui.md)
	- [memos](install/memos.md)

文档目录

<script>
  window.$docsify = {
    // 全文搜索
	subMaxLevel: 6
    }
  }
</script>

LaTeX公式

<script src="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
<script src="//cdn.jsdelivr.net/npm/marked@4"></script>

<!-- CDN files for docsify-katex -->
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
<!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script> -->

代码高亮

<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>

cdn.jsdelivr.net/npm/prismjs…

复制到剪贴板

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>

全文搜索

<script>
  window.$docsify = {
    // 全文搜索
    search: {
      paths: 'auto',
      placeholder: 'Type to search',
      noData: 'No Results!',
      depth: 6
    }
  }
</script>

<!-- 全文搜索 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

字数统计

<script>
    window.$docsify = {
      // 字数统计
      count:{
        countable:true,
        fontsize:'0.9em',
        color:'rgb(90,90,90)',
        language:'chinese'
      }
    }
</script>

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

封面

<script>
  window.$docsify = {
    // 开启封面 
    coverpage: true
  }
</script>

<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>

_coverpage.md

![logo](_media/favicon.svg)

# Brandon Document

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


> Never Back Down

[CSDN](https://blog.csdn.net/Brandon_)
[Resume](https://www.brandon777.com)

Github挂件

<script>
  window.$docsify = {
    name: '',
    // 开启右上角 Github 章鱼猫挂件，指定跳转链接
    repo: 'https://github.com/iyukiyama/docsify-leetcode/',
  }
</script>

文档名

<script>
  window.$docsify = {
    // 设置文档名称
    name: 'yukiyama leetcode',
  }
</script>

侧边栏折叠

<!-- 侧边栏折叠 -->
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>

侧边栏样式

<!-- 文件夹样式 -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
<!-- 箭头样式 -->
<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" /> -->

右侧目录栏

<script>
  window.$docsify = {
  	toc: {
    	scope: '.markdown-section',
    	headings: 'h1, h2, h3, h4, h5, h6',
    	title: '目录',
  	},
  }
</script>
<!-- 目录栏 -->
<link rel="stylesheet" href="https://unpkg.com/docsify-toc@1.0.0/dist/toc.css">
<script src="https://unpkg.com/docsify-toc@1.0.0/dist/toc.js"></script>

【Docsify】docsify 安装与配置

简介