Docsify

# docsify

1.安装node

2.安装git

3.制作徽章

1.建议docsify-cli全局安装，有助于在本地初始化和预览网站。

npm i docsify-cli -g

2.如果要在./docs子目录下编写文档，可以使用init命令。

docsify init ./docs

# 写作内容 (opens new window)

完成后，您可以在子目录init中看到文件列表。./docs

index.html作为入口文件
README.md作为主页
.nojekyll防止 GitHub Pages 忽略以下划线开头的文件

您可以轻松地更新文档中的内容./docs/README.md，当然您也可以添加更多页面 (opens new window)。

# 预览您的网站 (opens new window)

使用运行本地服务器docsify serve。您可以在浏览器上预览您的网站http://localhost:3000。

docsify serve

# 多页文档

如果你需要更多页面，你可以简单地在你的 docsify 目录中创建更多的 markdown 文件。如果您创建一个名为的文件guide.md，则可以通过/#/guide.

例如目录结构如下：

.
└── docs
    ├── README.md
    ├── guide.md
    └── zh-cn
        ├── README.md
        └── guide.md

1
2
3
4
5
6
7

匹配路线

docs/README.md        => http://domain.com
docs/guide.md         => http://domain.com/#/guide
docs/zh-cn/README.md  => http://domain.com/#/zh-cn/
docs/zh-cn/guide.md   => http://domain.com/#/zh-cn/guide

1
2
3
4

# 侧边栏 (opens new window)

为了有一个侧边栏，您可以创建自己的_sidebar.md（请参阅本文档的侧边栏 (opens new window)以获取示例）：

首先，您需要设置loadSidebar为true。配置段落 (opens new window)中提供了详细信息。

<!-- index.html -->

<script>
  window.$docsify = {
    loadSidebar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

1
2
3
4
5
6
7
8

创建_sidebar.md：

<!-- docs/_sidebar.md -->

* [Home](/)
* [Guide](guide.md)

1
2
3
4

您需要创建一个.nojekyllin./docs以防止 GitHub Pages 忽略以下划线开头的文件。

Docsify 只_sidebar.md在当前文件夹中查找并使用它，否则它会退回到使用window.$docsify.loadSidebarconfig.xml 配置的文件夹。

示例文件结构：

└── docs/
    ├── _sidebar.md
    ├── index.md
    ├── getting-started.md
    └── running-services.md

1
2
3
4
5

# 目录 (opens new window)

创建_sidebar.md后，侧边栏内容将根据降价文件中的标题自动生成。

subMaxLevel自定义侧边栏还可以通过设置比较subMaxLevel 配置 (opens new window)自动生成目录。

<!-- index.html -->

<script>
  window.$docsify = {
    loadSidebar: true,
    subMaxLevel: 2
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

1
2
3
4
5
6
7
8
9

# 自定义导航栏 (opens new window)

# HTML (opens new window)

如果需要自定义导航，可以创建基于 HTML 的导航栏。

请注意，文档链接以#/.

<!-- index.html -->

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

1
2
3
4
5
6
7
8
9

# 降价 (opens new window)

loadNavbar或者，您可以通过设置为true并创建_navbar.md、比较loadNavbar 配置 (opens new window)来创建自定义的基于 markdown 的导航文件。

<!-- index.html -->

<script>
  window.$docsify = {
    loadNavbar: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- _navbar.md -->

* [En](/)
* [chinese](/zh-cn/)

1
2
3
4
5
6
7
8
9
10
11
12

您需要创建一个.nojekyllin./docs以防止 GitHub Pages 忽略以下划线开头的文件。

_navbar.md从每个级别目录加载。如果当前目录没有_navbar.md，它将回退到父目录。例如，如果当前路径是/guide/quick-start，_navbar.md则将从加载/guide/_navbar.md。

# 封面

coverpage通过设置为true来激活封面功能。请参阅封面配置 (opens new window)。

# 基本用法 (opens new window)

设置coverpage为true，并创建一个_coverpage.md：

<!-- index.html -->

<script>
  window.$docsify = {
    coverpage: true
  }
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- _coverpage.md -->

![logo](_media/icon.svg)

# docsify <small>3.5</small>

> A magical documentation site generator.

- Simple and lightweight
- No statically built html files
- Multiple themes

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#docsify)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 自定义背景 (opens new window)

背景颜色默认随机生成。您可以自定义背景颜色或背景图像：

<!-- _coverpage.md -->

# docsify <small>3.5</small>

[GitHub](https://github.com/docsifyjs/docsify/)
[Get Started](#quick-start)

<!-- background image -->

![](_media/bg.png)

<!-- background color -->

![color](#f0f0f0)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 封面作为主页 (opens new window)

通常情况下，封面和主页会同时出现。当然，您也可以通过onlyCover 选项 (opens new window)分隔封面。

# 多个封面 (opens new window)

如果您的文档站点使用一种以上的语言，则设置多个封面可能很有用。

例如，您的文档结构是这样的

.
└── docs
    ├── README.md
    ├── guide.md
    ├── _coverpage.md
    └── zh-cn
        ├── README.md
        └── guide.md
        └── _coverpage.md

1
2
3
4
5
6
7
8
9

现在，您可以设置

window.$docsify = {
  coverpage: ['/', '/zh-cn/']
};

1
2
3

或者一个特殊的文件名

window.$docsify = {
  coverpage: {
    '/': 'cover.md',
    '/zh-cn/': 'cover.md'
  }
};

1
2
3
4
5
6

# 主题 (opens new window)

有一些可用的主题，包括官方和社区制作的。复制Vue (opens new window)和buble (opens new window)网站自定义主题和@liril-net (opens new window)贡献的黑色风格主题。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css" />

1
2
3
4

压缩文件在/lib/themes/.

<!-- compressed -->

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/pure.css" />

1
2
3
4
5
6

如果您有任何想法或想要开发新主题，欢迎您提交pull request (opens new window)。

点击预览 (opens new window)

vue.css buble.css dark.css pure.css

# 其他主题 (opens new window)

docsify-themeable (opens new window)一个非常简单的 docsify 主题系统。

编辑

#Docsify

上次更新: 2024/12/19, 09:15:30

← hexo博客搭建 VuePress搭建→