Add chiniese doc

2025-12-08 19:55:52 +00:00 · 2016-11-26 17:24:32 +08:00 · 2016-11-26 17:24:32 +08:00 · 1bf7b23d33
commit 1bf7b23d33
parent 681a51a52d
8 changed files with 242 additions and 42 deletions
--- a/README.md
+++ b/README.md
@ -13,7 +13,7 @@
 - No build

 ## 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

--- a/docs/404.html
+++ b/docs/404.html
@ -2,10 +2,15 @@
 <html lang="en">
 <head>
  <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">
  <link rel="stylesheet" href="/themes/vue.css">
 </head>
 <body>
+  <nav>
+    <a href="/">En</a>
+    <a href="/zh-cn">中文</a>
+  </nav>
  <div id="app"></div>
 </body>
 <script src="/lib/docsify.min.js" data-repo="qingwei-li/docsify"></script>
--- a/docs/README.md
+++ b/docs/README.md
@ -1,17 +1,23 @@
-# docsify [WIP]
-[![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)
+# docsify

->🃏 A magical documentation site generator.
+> A magical documentation site generator.

 ## Features
 - Easy and lightweight
- Custom themes and plugins
+- Custom themes
+- No build

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

-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
 <!DOCTYPE html>
@ -20,16 +26,73 @@ Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
 </head>
-<body></body>
+<body>
+  <div id="app"></div>
+</body>
 <script src="//unpkg.com/docsify"></script>
 </html>
 ```

-```javascript
-import Vue from 'vue'
+Create `README.md` as the main page

-Vue.use(ElementUI)
+```
+# Title
+
+## balabala
 ```

-## License
-MIT
+### Deploy!
+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>
+```
--- a/docs/zh-cn.md
+++ b/docs/zh-cn.md
@ -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>
+```
+
+
--- a/src/bind-event.js
+++ b/src/bind-event.js
@ -18,12 +18,12 @@ function scrollActiveSidebar () {
      const node = anchors[i].parentNode
      const bcr = node.getBoundingClientRect()

-      if (bcr.top < 150 && bcr.bottom > 150) {
-        const li = nav[ node.id ]
+      if (bcr.top < 10 && bcr.bottom > 10) {
+        const li = nav[node.id]
        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

        return
--- a/src/docsify.js
+++ b/src/docsify.js
@ -33,6 +33,9 @@ class Docsify {
    this.loc = document.location.pathname
    if (/\/$/.test(this.loc)) this.loc += 'README'
    this.load()
+
+    const nav = document.querySelector('nav')
+    if (nav) this.activeNav(nav)
  }

  load () {
@ -48,9 +51,21 @@ class Docsify {
  }

  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)
  }
+
+  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', () => {
--- a/src/gen-toc.js
+++ b/src/gen-toc.js
@ -14,8 +14,8 @@ const tocToTree = function (toc) {
      last[len].children.push(headline)
    } else {
      headlines.push(headline)
-      last[level] = headline
    }
+    last[level] = headline
  })

  return headlines
@ -27,13 +27,15 @@ const buildHeadlinesTree = function (tree, tpl = '') {
  tree.forEach((node) => {
    tpl += `<li><a class="section-link" href="#${node.slug}">${node.title}</a></li>`
    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) {
-  return buildHeadlinesTree(tocToTree(toc), '<ul>')
+  var tree = tocToTree(toc)
+  var result = buildHeadlinesTree(tree, '<ul>')
+  return result
 }
--- a/themes/vue.css
+++ b/themes/vue.css
@ -11,20 +11,45 @@ s@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pr
  -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 {
-  display: block;
-  position: relative;
+  position: absolute;
+  top: 0;
+  right: 0;
  z-index: 10;
 }

 .github-corner svg {
-  border: 0;
  color: #fff;
  fill: #42b983;
-  position: absolute;
-  right: 0;
-  top: 0;
  height: 80px;
  width: 80px;
 }
@ -63,11 +88,6 @@ body {
  margin: 0;
 }

-li a {
-  color: #42b983;
-  font-weight: 600;
-}
-
 /* main */
 main {
  height: 100%;
@ -101,7 +121,7 @@ main {
 .sidebar ul li a {
  color: #7f8c8d;
  display: block;
-  padding: 10px 15px;
+  padding: 6px 15px;
  border-bottom: none;
  text-overflow: ellipsis;
  overflow: hidden;
@ -115,7 +135,7 @@ main {

 .sidebar ul li.active>a {
  color: #42b983;
-  font-weight: 600;
+  font-weight: 500;
 }

 .sidebar ul li ul {
@ -231,11 +251,6 @@ main {
  padding-left: 1.5em;
 }

-.markdown-section a {
-  color: #42b983;
-  font-weight: 600;
-}
-
 .markdown-section blockquote {
  color: #858585;
  border-left: 4px solid #42b983;