Skip to content

Commit

Permalink
feat: custom sidebar, #4 (#5)
Browse files Browse the repository at this point in the history
* feat: custom sidebar, #4

* fix dev html

* fix doc

* fix doc
  • Loading branch information
QingWei-Li authored Nov 27, 2016
1 parent fc2e5b6 commit 37e7984
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 15 deletions.
23 changes: 23 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,3 +121,26 @@ Root element.
<script src="//unpkg.com/docsify" data-el="#app"></script>
```

#### sidebar

Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the `data-sidebar`.

![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png)

```html
<script>
window.sidebar = [
{ slug: '/', title: 'Home' },
{
slug: '/pageA',
title: 'page A',
children: [
{ slug: '/pageA/childrenB', title: 'children B' }
]
},
{ slug: '/PageC', title: 'Page C' }
]
</script>
<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
```

22 changes: 22 additions & 0 deletions docs/zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,4 +119,26 @@ docsify serve docs
<script src="//unpkg.com/docsify" data-el="#app"></script>
```

#### sidebar

设置后 TOC 功能将不可用,适合导航较多的文档,`data-sidebar` 传入全局变量名。

![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png)

```html
<script>
window.sidebar = [
{ slug: '/', title: 'Home' },
{
slug: '/pageA',
title: 'page A',
children: [
{ slug: '/pageA/childrenB', title: 'children B' }
]
},
{ slug: '/PageC', title: 'Page C' }
]
</script>
<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
```

8 changes: 4 additions & 4 deletions src/bind-event.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
function scrollActiveSidebar () {
if (/mobile/i.test(navigator.userAgent)) return
function scrollActiveSidebar (isCustom) {
if (/mobile/i.test(navigator.userAgent) || isCustom) return

const anchors = document.querySelectorAll('.anchor')
const nav = {}
Expand Down Expand Up @@ -48,6 +48,6 @@ function scrollActiveSidebar () {
scrollIntoView()
}

export default function () {
scrollActiveSidebar()
export default function (isCustom) {
scrollActiveSidebar(isCustom)
}
11 changes: 7 additions & 4 deletions src/gen-toc.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const tocToTree = function (toc, maxLevel) {
const buildHeadlinesTree = function (tree, tpl = '') {
if (!tree || !tree.length) return ''

tree.forEach((node) => {
tpl += `<li><a class="section-link" href="#${node.slug}">${node.title}</a></li>`
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></ul>`
}
Expand All @@ -35,7 +35,10 @@ const buildHeadlinesTree = function (tree, tpl = '') {
return tpl
}

export default function (toc, maxLevel) {
var tree = tocToTree(toc, maxLevel)
export default function (toc, opts) {
var tree = Array.isArray(opts.sidebar)
? opts.sidebar
: tocToTree(toc, opts['max-level'])

return buildHeadlinesTree(tree, '<ul>')
}
18 changes: 13 additions & 5 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import bindEvent from './bind-event'
const DEFAULT_OPTS = {
el: '#app',
repo: '',
'max-level': 6
'max-level': 6,
sidebar: ''
}

const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
Expand All @@ -21,15 +22,17 @@ class Docsify {
Docsify.installed = true

this.opts = Object.assign({}, opts, DEFAULT_OPTS)

this.replace = true
this.dom = document.querySelector(this.opts.el)
if (!this.dom) {
this.dom = document.body
this.replace = false
}
if (this.opts.sidebar) this.opts.sidebar = window[this.opts.sidebar]

this.loc = document.location.pathname
if (/\/$/.test(this.loc)) this.loc += 'README'

this.load()

const nav = document.querySelector('nav')
Expand All @@ -43,7 +46,10 @@ class Docsify {
this.render('not found')
} else {
this.render(res.target.response)
bindEvent()
bindEvent(!!this.opts.sidebar)
if (this.opts.sidebar) {
this.activeNav(document.querySelector('aside.sidebar'), true)
}
}
})
}
Expand All @@ -52,12 +58,14 @@ class Docsify {
this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts)
}

activeNav (elm) {
activeNav (elm, activeParentNode) {
const host = document.location.origin + document.location.pathname

;[].slice.call(elm.querySelectorAll('a')).forEach(node => {
if (node.href === host) {
node.setAttribute('class', 'active')
activeParentNode
? node.parentNode.setAttribute('class', 'active')
: node.setAttribute('class', 'active')
}
})
}
Expand Down
4 changes: 2 additions & 2 deletions src/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const renderer = new marked.Renderer()
renderer.heading = function (text, level) {
const slug = text.replace(/<(?:.|\n)*?>/gm, '').toLowerCase().replace(/[\s\n\t]+/g, '-')

toc.push({ level, slug, title: text })
toc.push({ level, slug: '#' + slug, title: text })

return `<h${level} id="${slug}"><a href="#${slug}" class="anchor"></a>${text}</h${level}>`
}
Expand All @@ -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, opts['max-level'])}</aside>`
const sidebar = `<aside class="sidebar">${genToc(toc, opts)}</aside>`

return `${corner}<main>${sidebar}${section}</main>`
}

0 comments on commit 37e7984

Please sign in to comment.