diff --git a/README.md b/README.md index cbc58723..19815e66 100644 --- 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 diff --git a/docs/404.html b/docs/404.html index b7f8cead..5834379a 100644 --- a/docs/404.html +++ b/docs/404.html @@ -2,10 +2,15 @@ + Docsify +
diff --git a/docs/README.md b/docs/README.md index daa4b67f..67f83063 100644 --- 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 @@ -20,16 +26,73 @@ Such as [./docs](https://github.com/QingWei-Li/docsify/tree/master/docs), Create - + +
+ ``` -```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 + + +``` + +## 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 + +``` + +### GitHub Corner +Modify your `404.html` +```html + +``` diff --git a/docs/zh-cn.md b/docs/zh-cn.md new file mode 100644 index 00000000..143296e9 --- /dev/null +++ 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 + + + + + + + +
+ + + +``` + +新建 `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 + + +``` + +## 更多功能 + +### 多页面 +`README.md` 作为主页面，如果需要其他页面，直接在文档目录下创建对应的 `*.md` 文件，例如创建一个 `guide.md` 那么对应的路由就是 `/guide`。 + +### 导航 +导航需要自己写在 `404.html` 文件里，效果参考本文档 + +```html + +``` + +### GitHub Corner +参考本文档的右上角的 GitHub 图标，如果要开启的话，将 `404.html` 里的 script 改成 + +```html + +``` + + diff --git a/src/bind-event.js b/src/bind-event.js index 4dd52191..60ac35cd 100644 --- 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 diff --git a/src/docsify.js b/src/docsify.js index 123cb83a..6e8f60fc 100644 --- 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', () => { diff --git a/src/gen-toc.js b/src/gen-toc.js index d8bfdc17..01a8ed37 100644 --- 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 += `
  • ${node.title}
    • ` if (node.children) { - tpl += `
  • ' + return tpl } export default function (toc) { - return buildHeadlinesTree(tocToTree(toc), '