docs: add mutiple covers
This commit is contained in:
qingwei.li
cinwell.li
parent
bd7ee84241
commit
4bdcee2cb3
12 changed files with 262 additions and 93 deletions
|
|
@ -175,7 +175,16 @@ window.$docsify = {
|
|||
coverpage: true,
|
||||
|
||||
// 自定义文件名
|
||||
coverpage: 'cover.md'
|
||||
coverpage: 'cover.md',
|
||||
|
||||
// mutiple covers
|
||||
coverpage: ['/', '/zh-cn/'],
|
||||
|
||||
// mutiple covers and custom file name
|
||||
coverpage: {
|
||||
'/': 'cover.md',
|
||||
'/zh-cn/': 'cover.md'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
封面的生成同样是从 markdown 文件渲染来的。开启渲染封面功能后在文档根目录创建 `_coverpage.md` 文件。渲染效果如本文档。
|
||||
|
||||
*index.html*
|
||||
_index.html_
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<script src="//unpkg.com/docsify"></script>
|
||||
```
|
||||
|
||||
*_coverpage.md*
|
||||
_\_coverpage.md_
|
||||
|
||||
```markdown
|
||||
|
||||
|
|
@ -26,24 +26,21 @@
|
|||
|
||||
> A magical documentation site generator.
|
||||
|
||||
- Simple and lightweight (~12kb gzipped)
|
||||
- Multiple themes
|
||||
- Not build static html files
|
||||
|
||||
* Simple and lightweight (~12kb gzipped)
|
||||
* Multiple themes
|
||||
* Not build static html files
|
||||
|
||||
[GitHub](https://github.com/QingWei-Li/docsify/)
|
||||
[Get Started](#quick-start)
|
||||
```
|
||||
|
||||
|
||||
|
||||
!> 一份文档只会在根目录下加载封面，其他页面或者二级目录下都不会加载。
|
||||
|
||||
## 自定义背景
|
||||
|
||||
目前的背景是随机生成的渐变色，我们自定义背景色或者背景图。在文档末尾用添加图片的 Markdown 语法设置背景。
|
||||
|
||||
*_coverpage.md*
|
||||
_\_coverpage.md_
|
||||
|
||||
```markdown
|
||||
# docsify
|
||||
|
|
@ -52,7 +49,51 @@
|
|||
[Get Started](#quick-start)
|
||||
|
||||
<!-- 背景图片 -->
|
||||
|
||||
|
||||
|
||||
<!-- 背景色 -->
|
||||
|
||||
|
||||
```
|
||||
|
||||
## 封面作为首页
|
||||
|
||||
通常封面和首页是同时出现的，当然你也是当封面独立出来通过设置[onlyCover 选项](zh-cn/configuration.md#onlycover)。
|
||||
|
||||
## 多个封面
|
||||
|
||||
如果你的文档网站是多语言的，或许你需要设置多个封面。
|
||||
|
||||
例如你的文档目录结构如下
|
||||
|
||||
```text
|
||||
.
|
||||
└── docs
|
||||
├── README.md
|
||||
├── guide.md
|
||||
├── _coverpage.md
|
||||
└── zh-cn
|
||||
├── README.md
|
||||
└── guide.md
|
||||
└── _coverpage.md
|
||||
```
|
||||
|
||||
那么你可以这么配置
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
coverpage: ['/', '/zh-cn/']
|
||||
};
|
||||
```
|
||||
|
||||
或者具体指名文件名
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
coverpage: {
|
||||
'/': 'cover.md',
|
||||
'/zh-cn/': 'cover.md'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
我们可以直接在 HTML 里定义导航栏，要注意链接要以 `#/` 开头。
|
||||
|
||||
*index.html*
|
||||
_index.html_
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
|
@ -14,13 +14,11 @@
|
|||
</body>
|
||||
```
|
||||
|
||||
|
||||
## 配置文件
|
||||
|
||||
那我们可以通过 Markdown 文件来配置导航。首先配置 `loadNavbar`，默认加载的文件为 `_navbar.md`。具体配置规则见[配置项#load-navbar](configuration.md#load-navbar)。
|
||||
|
||||
*index.html*
|
||||
那我们可以通过 Markdown 文件来配置导航。首先配置 `loadNavbar`，默认加载的文件为 `_navbar.md`。具体配置规则见[配置项#loadNavbar](configuration.md#loadnavbar)。
|
||||
|
||||
_index.html_
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -31,11 +29,11 @@
|
|||
<script src="//unpkg.com/docsify"></script>
|
||||
```
|
||||
|
||||
*_navbar.md*
|
||||
_\_navbar.md_
|
||||
|
||||
```markdown
|
||||
- [En](/)
|
||||
- [中文](/zh-cn/)
|
||||
* [En](/)
|
||||
* [中文](/zh-cn/)
|
||||
```
|
||||
|
||||
`_navbar.md` 加载逻辑和 `sidebar` 文件一致，从每层目录下获取。例如当前路由为 `/zh-cn/custom-navbar` 那么是从 `/zh-cn/_navbar.md` 获取导航栏。
|
||||
|
|
@ -44,24 +42,23 @@
|
|||
|
||||
如果导航内容过多，可以写成嵌套的列表，会被渲染成下拉列表的形式。
|
||||
|
||||
*_navbar.md*
|
||||
|
||||
_\_navbar.md_
|
||||
|
||||
```markdown
|
||||
- 基础
|
||||
- [快速开始](zh-cn/quickstart.md)
|
||||
- [多页文档](zh-cn/more-pages.md)
|
||||
- [定制导航栏](zh-cn/custom-navbar.md)
|
||||
- [封面](zh-cn/cover.md)
|
||||
* 基础
|
||||
* [快速开始](zh-cn/quickstart.md)
|
||||
* [多页文档](zh-cn/more-pages.md)
|
||||
* [定制导航栏](zh-cn/custom-navbar.md)
|
||||
* [封面](zh-cn/cover.md)
|
||||
|
||||
- 配置
|
||||
- [配置项](zh-cn/configuration.md)
|
||||
- [主题](zh-cn/themes.md)
|
||||
- [使用插件](zh-cn/plugins.md)
|
||||
- [Markdown 配置](zh-cn/markdown.md)
|
||||
- [代码高亮](zh-cn/language-highlight.md)
|
||||
* 配置
|
||||
* [配置项](zh-cn/configuration.md)
|
||||
* [主题](zh-cn/themes.md)
|
||||
* [使用插件](zh-cn/plugins.md)
|
||||
* [Markdown 配置](zh-cn/markdown.md)
|
||||
* [代码高亮](zh-cn/language-highlight.md)
|
||||
```
|
||||
|
||||
效果图
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ docs/zh-cn/guide.md => http://domain.com/zh-cn/guide
|
|||
|
||||
默认情况下，侧边栏会根据当前文档的标题生成目录。也可以设置文档链接，通过 Markdown 文件生成，效果如当前的文档的侧边栏。
|
||||
|
||||
首先配置 `loadSidebar` 选项，具体配置规则见[配置项#load-sidebar](configuration.md#load-sidebar)。
|
||||
首先配置 `loadSidebar` 选项，具体配置规则见[配置项#loadSidebar](configuration.md#loadsidebar)。
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -40,13 +40,12 @@ docs/zh-cn/guide.md => http://domain.com/zh-cn/guide
|
|||
接着创建 `_sidebar.md` 文件，内容如下
|
||||
|
||||
```markdown
|
||||
- [首页](zh-cn/)
|
||||
- [指南](zh-cn/guide)
|
||||
* [首页](zh-cn/)
|
||||
* [指南](zh-cn/guide)
|
||||
```
|
||||
|
||||
!> 需要在文档根目录创建 `.nojekyll` 命名的空文件，阻止 GitHub Pages 忽略命名是下划线开头的文件。
|
||||
|
||||
|
||||
`_sidebar.md` 的加载逻辑是从每层目录下获取文件，如果当前目录不存在该文件则回退到上一级目录。例如当前路径为 `/zh-cn/more-pages` 则从 `/zh-cn/_sidebar.md` 获取文件，如果不存在则从 `/_sidebar.md` 获取。
|
||||
|
||||
当然你也可以配置 `alias` 避免不必要的回退过程。
|
||||
|
|
@ -78,12 +77,13 @@ docs/zh-cn/guide.md => http://domain.com/zh-cn/guide
|
|||
|
||||
## 忽略副标题
|
||||
|
||||
当设置了 `subMaxLevel` 时，默认情况下每个标题都会自动添加到目录中。如果你想忽略特定的标题，可以给它添加 `{docsify-ignore}` 。
|
||||
当设置了 `subMaxLevel` 时，默认情况下每个标题都会自动添加到目录中。如果你想忽略特定的标题，可以给它添加 `{docsify-ignore}` 。
|
||||
|
||||
```markdown
|
||||
# Getting Started
|
||||
|
||||
## Header {docsify-ignore}
|
||||
|
||||
该标题不会出现在侧边栏的目录中。
|
||||
```
|
||||
|
||||
|
|
@ -93,8 +93,8 @@ docs/zh-cn/guide.md => http://domain.com/zh-cn/guide
|
|||
# Getting Started {docsify-ignore-all}
|
||||
|
||||
## Header
|
||||
|
||||
该标题不会出现在侧边栏的目录中。
|
||||
```
|
||||
|
||||
在使用时， `{docsify-ignore}` 和 `{docsify-ignore-all}` 都不会在页面上呈现。
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue