jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add chiniese doc

Browse source
This commit is contained in:
qingwei.li 2016-11-26 17:24:32 +08:00
commit 1bf7b23d33
8 changed files with 242 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -13,7 +13,7 @@
- No build - No build
## Quick start ## Quick start
Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create `404.html` and `README.md` into `/docs`. Create `404.html` and `README.md` into `/docs`.
404.html 404.html

5
docs/404.html
View file

@ -2,10 +2,15 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Docsify</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="/themes/vue.css"> <link rel="stylesheet" href="/themes/vue.css">
</head> </head>
<body> <body>
<nav>
<a href="/">En</a>
<a href="/zh-cn">中文</a>
</nav>
<div id="app"></div> <div id="app"></div>
</body> </body>
<script src="/lib/docsify.min.js" data-repo="qingwei-li/docsify"></script> <script src="/lib/docsify.min.js" data-repo="qingwei-li/docsify"></script>

91
docs/README.md
View file

@ -1,17 +1,23 @@
# docsify [WIP] # docsify
[![Build Status](https://travis-ci.org/QingWei-Li/docsify.svg?branch=master)](https://travis-ci.org/QingWei-Li/docsify)
[![npm](https://img.shields.io/npm/v/docsify.svg)](https://www.npmjs.com/package/docsify)
>🃏 A magical documentation site generator. > A magical documentation site generator.
## Features ## Features
- Easy and lightweight - Easy and lightweight
- Custom themes and plugins - Custom themes
- No build
## Quick start ## Quick Start
Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create `404.html` and `README.md` into `/docs`.
404.html ### Create a project
First create a project, then create a `docs` folder
```shell
mkdir my-project && cd my-project
mkdir docs && cd docs
```
### Create entry file
Create a `404.html` file
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -20,16 +26,73 @@ Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head> </head>
<body></body> <body>
<div id="app"></div>
</body>
<script src="//unpkg.com/docsify"></script> <script src="//unpkg.com/docsify"></script>
</html> </html>
``` ```
```javascript Create `README.md` as the main page
import Vue from 'vue'
Vue.use(ElementUI) ```
# Title
## balabala
``` ```
## License ### Deploy!
MIT Push and open the **GitHub Pages** feature
![image](https://cloud.githubusercontent.com/assets/7565692/20639058/e65e6d22-b3f3-11e6-9b8b-6309c89826f2.png)
## CLI
Easy to setup and preivew a docs.
### Install
```shell
npm i docsify-cli -g
```
### Setup
Setup a boilerplate docs
```shell
docsify init docs
```
### Preview
Preview and serve your docs using
```shell
docsify serve docs
```
Read more [docsify-cli](https://github.com/QingWei-Li/docsify-cli)
## Themes
Currently available `vue.css` and `buble.css`
```html
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
```
## More
### Multiple pages
If you need other pages, directly create the markdown file, such as `guide.md` is `/guide`.
### Navbar
Code in `404.html`
```html
<nav>
<a href="/">En</a>
<a href="/zh-cn">中文</a>
</nav>
```
### GitHub Corner
Modify your `404.html`
```html
<script src="//unpkg.com/docsify" data-repo="your/repo"></script>
```

100
docs/zh-cn.md Normal file
View file

@ -0,0 +1,100 @@
# docsify
> 无需构建快速生成文档页
## 特性
- 无需构建，写完 markdown 直接发布
- 支持自定义主题
- 容易使用并且轻量
## 快速上手
### 创建项目
新建一个空项目，接着创建一个 `docs` 目录并进入到 docs 目录下
```shell
mkdir my-project && cd my-project
mkdir docs && cd docs
```
### 创建入口文件
创建一个 `404.html` 文件，内容为
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="//unpkg.com/docsify"></script>
</html>
```
新建 `README.md` 文件，作为主页面
```
# Title
## balabala
```
### 部署！
将项目 `push` 到 GitHub 仓库后到设置页面开启 **GitHub Pages** 功能，选择 `docs/` 选项
![image](https://cloud.githubusercontent.com/assets/7565692/20639058/e65e6d22-b3f3-11e6-9b8b-6309c89826f2.png)
## 命令行工具
方便快速创建文档目录，会读取项目的 `package.json` 里的选项作为 docsify 的配置，支持本地预览。
### 安装
```shell
npm i docsify-cli -g
```
### 初始化文档
默认初始化在当前目录，推荐将文档放在 `docs` 目录下
```shell
docsify init docs
```
### 启动本地服务
启动一个 server 方便预览，打开 http://localhost:3000
```shell
docsify serve docs
```
更多选项参考 [docsify-cli](https://github.com/QingWei-Li/docsify-cli)
## 主题
目前提供 vue.css 和 buble.css，直接修改 `404.html` 里的 cdn 地址即可
```html
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
```
## 更多功能
### 多页面
`README.md` 作为主页面，如果需要其他页面，直接在文档目录下创建对应的 `*.md` 文件，例如创建一个 `guide.md` 那么对应的路由就是 `/guide`。
### 导航
导航需要自己写在 `404.html` 文件里，效果参考本文档
```html
<nav>
<a href="/">En</a>
<a href="/zh-cn">中文</a>
</nav>
```
### GitHub Corner
参考本文档的右上角的 GitHub 图标，如果要开启的话，将 `404.html` 里的 script 改成
```html
<script src="//unpkg.com/docsify" data-repo="your/repo"></script>
```

8
src/bind-event.js
View file

@ -18,12 +18,12 @@ function scrollActiveSidebar () {
const node = anchors[i].parentNode const node = anchors[i].parentNode
const bcr = node.getBoundingClientRect() const bcr = node.getBoundingClientRect()
if (bcr.top < 150 && bcr.bottom > 150) { if (bcr.top < 10 && bcr.bottom > 10) {
const li = nav[ node.id ] const li = nav[node.id]
if (li === active) return if (li === active) return
if (active) active.classList.remove('active') if (active) active.setAttribute('class', '')
li.classList.add('active') li.setAttribute('class', 'active')
active = li active = li
return return

17
src/docsify.js
View file

@ -33,6 +33,9 @@ class Docsify {
this.loc = document.location.pathname this.loc = document.location.pathname
if (/\/$/.test(this.loc)) this.loc += 'README' if (/\/$/.test(this.loc)) this.loc += 'README'
this.load() this.load()
const nav = document.querySelector('nav')
if (nav) this.activeNav(nav)
} }
load () { load () {
@ -48,9 +51,21 @@ class Docsify {
} }
render (content) { render (content) {
document.title = this.loc.slice(1) + this.opts.title if (this.loc.slice(1) !== 'README') {
document.title = this.loc.slice(1) + this.opts.title
}
this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts) this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts)
} }
activeNav (elm) {
const host = document.location.origin + document.location.pathname
;[].slice.call(elm.querySelectorAll('a')).forEach(node => {
if (node.href === host) {
node.setAttribute('class', 'active')
}
})
}
} }
window.addEventListener('load', () => { window.addEventListener('load', () => {

10
src/gen-toc.js
View file

@ -14,8 +14,8 @@ const tocToTree = function (toc) {
last[len].children.push(headline) last[len].children.push(headline)
} else { } else {
headlines.push(headline) headlines.push(headline)
last[level] = headline
} }
last[level] = headline
}) })
return headlines return headlines
@ -27,13 +27,15 @@ const buildHeadlinesTree = function (tree, tpl = '') {
tree.forEach((node) => { tree.forEach((node) => {
tpl += `<li><a class="section-link" href="#${node.slug}">${node.title}</a></li>` tpl += `<li><a class="section-link" href="#${node.slug}">${node.title}</a></li>`
if (node.children) { if (node.children) {
tpl += `<li><ul class="children">${buildHeadlinesTree(node.children)}</li>` tpl += `<li><ul class="children">${buildHeadlinesTree(node.children)}</li></ul>`
} }
}) })
return tpl + '</ul>' return tpl
} }
export default function (toc) { export default function (toc) {
return buildHeadlinesTree(tocToTree(toc), '<ul>') var tree = tocToTree(toc)
var result = buildHeadlinesTree(tree, '<ul>')
return result
} }

51
themes/vue.css
View file

@ -11,20 +11,45 @@ s@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pr
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
/* navbar */
nav {
position: absolute;
right: 0;
left: 0;
z-index: 10;
margin: 25px 60px 0 0;
text-align: right;
}
nav a {
margin: 0 1em;
padding: 5px 0;
font-size: 16px;
text-decoration: none;
color: inherit;
transition: color .3s;
}
nav a:hover {
color: #42b983;
}
nav a.active {
color: #42b983;
border-bottom: 2px solid #42b983;
}
/* github corner */ /* github corner */
.github-corner { .github-corner {
display: block; position: absolute;
position: relative; top: 0;
right: 0;
z-index: 10; z-index: 10;
} }
.github-corner svg { .github-corner svg {
border: 0;
color: #fff; color: #fff;
fill: #42b983; fill: #42b983;
position: absolute;
right: 0;
top: 0;
height: 80px; height: 80px;
width: 80px; width: 80px;
} }
@ -63,11 +88,6 @@ body {
margin: 0; margin: 0;
} }
li a {
color: #42b983;
font-weight: 600;
}
/* main */ /* main */
main { main {
height: 100%; height: 100%;
@ -101,7 +121,7 @@ main {
.sidebar ul li a { .sidebar ul li a {
color: #7f8c8d; color: #7f8c8d;
display: block; display: block;
padding: 10px 15px; padding: 6px 15px;
border-bottom: none; border-bottom: none;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -115,7 +135,7 @@ main {
.sidebar ul li.active>a { .sidebar ul li.active>a {
color: #42b983; color: #42b983;
font-weight: 600; font-weight: 500;
} }
.sidebar ul li ul { .sidebar ul li ul {
@ -231,11 +251,6 @@ main {
padding-left: 1.5em; padding-left: 1.5em;
} }
.markdown-section a {
color: #42b983;
font-weight: 600;
}
.markdown-section blockquote { .markdown-section blockquote {
color: #858585; color: #858585;
border-left: 4px solid #42b983; border-left: 4px solid #42b983;