Add max level option

2026-04-23 21:00:06 +08:00 · 2016-11-27 13:09:18 +08:00
parent e789fb2b18
commit eba21726d7
11 changed files with 201 additions and 17 deletions
--- a/404.dev.html
+++ b/404.dev.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <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/buble.css">
+  <link rel="stylesheet" href="/themes/vue.css">
 </head>
 <body>
  <nav>
--- a/app.js
+++ b/app.js
@@ -2,12 +2,10 @@ var serveStatic = require('serve-static')
 var http = require('http')
 var fs = require('fs')

-var notfound = fs.readFileSync('404.dev.html')
-
 http.createServer(function (req, res) {
  serveStatic('.')(req, res, function () {
    res.writeHead(404, { 'Content-Type': 'text/html' })
-    res.end(notfound)
+    res.end(fs.readFileSync('404.dev.html'))
  })
 }).listen(3000)

--- a/docs/404.html
+++ b/docs/404.html
@@ -14,5 +14,5 @@
  </nav>
  <div id="app"></div>
 </body>
-<script src="//unpkg.com/docsify" data-repo="qingwei-li/docsify"></script>
+<script src="//unpkg.com/docsify/lib/docsify.min.js" data-repo="qingwei-li/docsify" data-max-level="3"></script>
 </html>
--- a/docs/README.md
+++ b/docs/README.md
@@ -91,8 +91,26 @@ Code in `404.html`
 </nav>
 ```

-### GitHub Corner
-Modify your `404.html`
+### Options
+
+#### repo
+Display the [GitHub Corner](http://tholman.com/github-corners/) widget.
+
 ```html
 <script src="//unpkg.com/docsify" data-repo="your/repo"></script>
 ```
+
+#### max-level
+Toc level.
+
+```html
+<script src="//unpkg.com/docsify" data-max-level="6"></script>
+```
+
+#### el
+Root element.
+
+```html
+<script src="//unpkg.com/docsify" data-el="#app"></script>
+```
+
--- a/docs/zh-cn.md
+++ b/docs/zh-cn.md
@@ -90,11 +90,26 @@ docsify serve docs
 </nav>
 ```

-### GitHub Corner
+### 配置参数
+
+#### repo
 参考本文档的右上角的 GitHub 图标，如果要开启的话，将 `404.html` 里的 script 改成

 ```html
 <script src="//unpkg.com/docsify" data-repo="your/repo"></script>
 ```

+#### max-level
+目录最大展开层级，默认值为 6
+
+```html
+<script src="//unpkg.com/docsify" data-max-level="6"></script>
+```
+
+#### el
+替换节点元素，默认为 `#app`
+```html
+<script src="//unpkg.com/docsify" data-el="#app"></script>
+```
+

--- a/src/bind-event.js
+++ b/src/bind-event.js
@@ -20,6 +20,8 @@ function scrollActiveSidebar () {

      if (bcr.top < 10 && bcr.bottom > 10) {
        const li = nav[node.id]
+
+        if (!li) return
        if (li === active) return
        if (active) active.setAttribute('class', '')

--- a/src/gen-toc.js
+++ b/src/gen-toc.js
@@ -1,7 +1,7 @@
 /**
 * @link from https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
 */
-const tocToTree = function (toc) {
+const tocToTree = function (toc, maxLevel) {
  const headlines = []
  const last = {}

@@ -9,6 +9,7 @@ const tocToTree = function (toc) {
    const level = headline.level || 1
    const len = level - 1

+    if (level > maxLevel) return
    if (last[len]) {
      last[len].children = last[len].children || []
      last[len].children.push(headline)
@@ -34,8 +35,7 @@ const buildHeadlinesTree = function (tree, tpl = '') {
  return tpl
 }

-export default function (toc) {
-  var tree = tocToTree(toc)
-  var result = buildHeadlinesTree(tree, '<ul>')
-  return result
+export default function (toc, maxLevel) {
+  var tree = tocToTree(toc, maxLevel)
+  return buildHeadlinesTree(tree, '<ul>')
 }
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,8 @@ import bindEvent from './bind-event'

 const DEFAULT_OPTS = {
  el: '#app',
-  repo: ''
+  repo: '',
+  'max-level': 6
 }

 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
--- a/src/render.js
+++ b/src/render.js
@@ -45,7 +45,7 @@ export default function (content, opts = {}) {
  const section = `<section class="content">
    <article class="markdown-section">${marked(content)}</article>
  </section>`
-  const sidebar = `<aside class="sidebar">${genToc(toc)}</aside>`
+  const sidebar = `<aside class="sidebar">${genToc(toc, opts['max-level'])}</aside>`

  return `${corner}<main>${sidebar}${section}</main>`
 }
--- a/themes/pure.css
+++ b/themes/pure.css
@@ -0,0 +1,152 @@
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  -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;
+}
+
+/* github corner */
+.github-corner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.github-corner svg {
+  color: #fff;
+  height: 80px;
+  width: 80px;
+}
+
+.github-corner:hover .octo-arm {
+  animation:octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%,100%{ transform: rotate(0); }
+  20%,60%{ transform: rotate(-25deg); }
+  40%,80%{ transform: rotate(10deg); }
+}
+
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 15px;
+  letter-spacing: 0;
+  margin: 0;
+}
+
+/* main */
+main {
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+/* sidebar */
+.sidebar {
+  border-right: 1px solid rgba(0,0,0,.07);
+  bottom: 0;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  width: 300px;
+  z-index: 1;
+  padding-top: 40px;
+}
+
+.sidebar ul {
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar ul, .sidebar ul li {
+  list-style: none;
+}
+
+.sidebar ul li a {
+  display: block;
+  border-bottom: none;
+}
+
+.sidebar ul li ul {
+  padding-left: 20px;
+}
+
+/* main content */
+.content {
+  bottom: 0;
+  left: 300px;
+  overflow-y: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+@media screen and (max-width: 600px) {
+  .sidebar {
+    left: -300px;
+  }
+
+  .content {
+    left: 0;
+  }
+}
+
+/* markdown content found on pages */
+.markdown-section {
+  position: relative;
+  margin: 0 auto;
+  max-width: 800px;
+  padding: 20px 15px 40px 15px;
+}
+
+.markdown-section * {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  font-size: inherit;
+}
+
+.markdown-section>:first-child {
+  margin-top: 0!important;
+}
--- a/themes/vue.css
+++ b/themes/vue.css
@@ -208,10 +208,8 @@ main {
 }

 .markdown-section h2 {
-  border-bottom: 1px solid #ddd;
  font-size: 1.75em;
  margin: 45px 0 0.8em;
-  padding-bottom: 0.7em;
 }

 .markdown-section h3 {