Skip to content

Commit

Permalink
docs(zh-cn): finish chinese documents
Browse files Browse the repository at this point in the history
  • Loading branch information
QingWei-Li committed Feb 12, 2017
1 parent f89d43e commit 772972c
Show file tree
Hide file tree
Showing 16 changed files with 316 additions and 35 deletions.
4 changes: 2 additions & 2 deletions dev.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<script>
window.$docsify = {
alias: {
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG',
'/zh-cn/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
'/zh-cn/changelog': '/changelog',
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
},
search: {
maxAge: 0
Expand Down
6 changes: 3 additions & 3 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@
</body>
<script>
window.$docsify = {
name: 'Docsify',
name: 'docsify',
maxLevel: 4,
subMaxLevel: 2,
auto2top: true,
coverpage: true,
loadSidebar: true,
alias: {
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG',
'/zh-cn/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
'/zh-cn/changelog': '/changelog',
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
}
}
</script>
Expand Down
9 changes: 5 additions & 4 deletions docs/zh-cn/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,22 @@

docsify 是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 `.md` 转成 `.html` 文件,所有转换工作都是在运行时进行。

这将非常实用,如果你只是需要快速的写一个小型的文档,或者不想因为生成的一堆 `.html` 文件“污染” commit 记录,只需要创建一个 `index.html` 就可以开始写文档而且直接部署
这将非常实用,如果只是需要快速的写一个小型的文档,或者不想因为生成的一堆 `.html` 文件“污染” commit 记录,只需要创建一个 `index.html` 就可以开始写文档而且直接[部署在 GitHub Pages](zh-cn/deploy)

可以查看[快速开始](zh-cn/quickstart)一章了解详情。

## 特性
- 无需构建,写完 markdown 直接发布
- 无需构建,写完文档直接发布
- 容易使用并且轻量 (~13Kb gzipped)
- 智能的全文检索
- 提供多套主题
- 丰富的 API
- 兼容 IE9+

## 例子

可以查看 [Showcase](https://github.com/QingWei-Li/docsify/#showcase) 来了解使用 docsify 的文档项目。

## 支持
## 捐赠

有任何使用上的问题或者 Bug 欢迎提 [Issues](https://github.com/QingWei-Li/docsify/issues/),祝你使用愉快!
如果你觉得 docsify 对你有帮助,或者想对我的工作一点资瓷,欢迎给我[捐赠](https://github.com/QingWei-Li/donate)
2 changes: 1 addition & 1 deletion docs/zh-cn/_sidebar.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
- 基础
- [快速开始](zh-cn/quickstart)
- [多页文档](zh-cn/more-pages)
- [嵌套导航栏](zh-cn/custom-navbar)
- [定制导航栏](zh-cn/custom-navbar)
- [封面](zh-cn/cover)

- 配置
Expand Down
6 changes: 3 additions & 3 deletions docs/zh-cn/cdn.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@

## 获取指定版本

如果你担心频繁地版本更新又可能引入未知 Bug,你也可以使用具体的版本。规则是 `//unpkg.com/docsify/VERSION/`
如果担心频繁地版本更新又可能引入未知 Bug,我们也可以使用具体的版本。规则是 `//unpkg.com/docsify@VERSION/`

```html
<!-- 引入 css -->
<link rel="stylesheet" href="//unpkg.com/docsify/2.0.0/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify@2.0.0/themes/vue.css">

<!-- 引入 script -->
<script src="//unpkg.com/docsify/2.0.0/lib/docsify.js"></script>
<script src="//unpkg.com/docsify@2.0.0/lib/docsify.js"></script>
```

!> 指定 *VERSION*`latest` 可以强制每次都请求最新版本。
Expand Down
212 changes: 210 additions & 2 deletions docs/zh-cn/configuration.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,244 @@
# 配置项

> TODO
docsify 有两种配置参数的方式。一种是配置 `window.$docsify` 对象,另一种是给 `script` 标签添加 `data-*` 属性。

```html
<!-- 方法 1 -->
<script>
window.$docsify = {
repo: 'QingWei-Li/docsify',
maxLevel: 3,
coverpage: true
}
</script>

<!-- 方法 2 -->
<script
src="//unpkg.com/docsify"
data-repo="QingWei-Li/docsify"
data-max-level="3"
data-coverpage>
</script>
```

两种方式可以共存,推荐第一种做法——直接配置 `window.$docsify` 对象——这会让你的配置更加清晰,同时也可以方便的将配置单独写到另一个文件里。

!> 通过 `window.$docsify` 配置属性,需要将属性改成驼峰命名法。通过 `data-*` 属性配置,保持短横线的命名规则。


## el

- 类型:`String`
- 默认值:`#app`

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

```js
window.$docsify = {
el: '#app'
}
```

## repo

- 类型:`String`
- 默认值: `null`

配置仓库地址或者 `username/repo` 的字符串,会在页面右上角渲染一个 [GitHub Corner](http://tholman.com/github-corners/) 挂件。

```js
window.$docsify = {
repo: 'QingWei-Li/docsify',
// or
repo: 'https://github.com/QingWei-Li/docsify/'
}
```


## max-level

- 类型:`Number`
- 默认值: `6`

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


```js
window.$docsify = {
maxLevel: 4
}
```

## load-navbar

- 类型:`Boolean|String`
- 默认值: `false`

加载自定义导航栏,参考[定制导航栏](zh-cn/custom-navbar) 了解用法。设置为 `true` 后会加载 `_navbar.md` 文件,也可以自定义加载的文件名。

```js
window.$docsify = {
// 加载 _navbar.md
loadNavbar: true,

// 加载 nav.md
loadNavbar: 'nav.md'
}
```

## load-sidebar

- 类型:`Boolean|String`
- 默认值: `false`

加载自定义侧边栏,参考[多页文档](zh-cn/more-pages)。设置为 `true` 后会加载 `_sidebar.md` 文件,也可以自定义加载的文件名。

```js
window.$docsify = {
// 加载 _sidebar.md
loadSidebar: true,

// 加载 summary.md
loadSidebar: 'summary.md'
}
```

## sub-max-level

- 类型:`Number`
- 默认值: `0`

自定义侧边栏后默认不会再生成目录,你也可以通过设置生成目录的最大层级开启这个功能,


```js
window.$docsify = {
subMaxLevel: 3
}
```

## load-navbar

## auto2top

- 类型:`Boolean`
- 默认值: `false`

切换页面后是否自动跳转到页面顶部。

```js
window.$docsify = {
auto2top: true
}
```


## homepage

- 类型:`String`
- 默认值: `README.md`

设置首页文件加载路径。适合不想将 `README.md` 作为入口文件渲染,或者是文档在仓库根目录的情况使用。

```js
window.$docsify = {
// 入口文件改为 /home.md
homepage: 'home.md',

// 文档和仓库根目录下的 README.md 内容一致
homepage: 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md'
}
```

## base-path

- 类型:`String`

文档加载的根路径,可以是二级路径或者是其他域名的路径。

```js
window.$docsify = {
basePath: '/path/',

// 直接渲染其他域名的文档
basePath: 'https://docsify.js.org/',

// 甚至直接渲染其他仓库下的内容
basePath: 'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/'
}
```


## coverpage

- 类型:`Boolean|String`
- 默认值: `false`

启用[封面页](/zh-cn/cover)。开启后是加载 `_coverpage.md` 文件,也可以自定义文件名。

```js
window.$docsify = {
coverpage: true,

// 自定义文件名
coverpage: 'cover.md'
}
```

## name

- 类型:`String`


文档标题,会显示在侧边栏顶部。

```js
window.$docsify = {
name: 'docsify'
}
```

## name-link

- 类型:`String`
- 默认值:`window.location.pathname`

点击文档标题后跳转的链接地址。

```js
window.$docsify = {
nameLink: '/'
}
```

## markdown

- 类型: `Function`

参考 [Markdown 配置](/zh-cn/markdown)

## theme-color

- 类型:`String`

替换默认的主题配置。利用 CSS3 支持变量的特性,对于老的浏览器有 polyfill 处理。

```js
window.$docsify = {
themeColor: '#3F51B5'
}
```

## alias

定义路由别名,可以更自由的定义路由规则。


```js
window.$docsify = {
alias: {
'/zh-cn/changelog': '/changelog',
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
}
}
```

54 changes: 53 additions & 1 deletion docs/zh-cn/cover.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,55 @@
# 封面

> TODO
一个有封面的文档网站会给用户留下好的印象,通过设置 `coverpage` 参数,可以开启渲染封面的功能。具体用法见见[配置项#coverpage](zh-cn/configuration#coverpage)

## 基本用法

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

```html
<script>
window.$docsify = {
coverpage: true
}
</script>
<script src="//unpkg.com/docsify"></script>
```

*_coverpage.md*

```markdown
![logo](_media/icon.svg)

# docsify

> A magical documentation site generator.

- Simple and lightweight (~12kb gzipped)
- Multiple themes
- Not build static html files


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

渲染效果如本文档。

!> 一份文档只会在根目录下加载封面,其他页面或者二级目录下都不会加载。

## 自定义背景

目前的背景是随机生成的渐变色,我们自定义背景色或者背景图。在文档末尾用添加图片的 Markdown 语法设置背景。

```markdown
# docsify

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

<!-- 背景图片 -->
![](_media/bg.png)
<!-- 背景色 -->
![color](#f0f0f0)
```

Loading

0 comments on commit 772972c

Please sign in to comment.