clean api

2024-11-30 02:58:37 +08:00 · 2017-02-05 09:50:08 +08:00 · 2017-02-05 09:50:08 +08:00 · fef969f55d
commit fef969f55d
parent 5cc9f0514c
9 changed files with 26 additions and 149 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,9 @@
 ### Features
 - Customize the theme color

+### Break change
+- Remove `data-router`, `data-sidebar`, `data-sidebar-toggle` APIs
+
 ## 1.10.5
 ### Bug fixes
 - fix initialize the Vue instance
--- a/README.md
+++ b/README.md
@ -25,7 +25,7 @@
 - Support emoji :laughing:

 ## Quick start
-Create a `index.html` and using `hash router`.
+Create a `index.html`.

 index.html

@ -39,7 +39,7 @@ index.html
 <body>
  <div id="app"></div>
 </body>
-<script src="//unpkg.com/docsify" data-router></script>
+<script src="//unpkg.com/docsify"></script>
 </html>
 ```

@ -47,6 +47,10 @@ index.html
 - UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
 - jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)

+## Browser Support
+
+Modern browsers and Internet Explorer 9+.
+
 ## Showcase
 These open-source projects are using docsify to generate their sites. Pull requests welcome : )

--- a/dev.html
+++ b/dev.html
@ -5,8 +5,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/vue.css">
 </head>
-<body class="">
+<body>
  <div id="app"></div>
 </body>
-<script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-name="docsify" data-auto2top data-sidebar-toggle data-router></script>
+<script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-name="docsify" data-auto2top></script>
 </html>
--- a/docs/README.md
+++ b/docs/README.md
@ -20,7 +20,7 @@ Create a `index.html` file
 <body>
  <div id="app"></div>
 </body>
-<script src="//unpkg.com/docsify" data-router></script>
+<script src="//unpkg.com/docsify"></script>
 </html>
 ```

@ -191,7 +191,7 @@ We can write the Vue syntax directly in the markdown file, when the Vue library
 index.html
 ```html
 <script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/docsify" data-router></script>
+<script src="//unpkg.com/docsify"></script>
 ```

 ```markdown
@ -260,50 +260,6 @@ window.$docsify = {
 }
 ```

-### sidebar-toggle
-
-Sidebar with toggle
-
-```html
-<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
-```
-
-```js
-window.$docsify = {
-  sidebarToggle: true
-}
-```
-
-### sidebar
-
-Custom sidebar. If it's set, the TOC will be disabled. 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>
-```
-
-
-```js
-window.$docsify = {
-  sidebar: 'sidebar'
-}
-```
-
 ### load-sidebar

 Load sidebar markdown file. If it is configured, load the current directory `_sidebar.md` by default. If the file doesn't exist, the sidebar will appear as a TOC.
@ -388,20 +344,6 @@ If you write a sub level list, it will generate a dropdown list.
  - [chinese](/zh-cn)
 ```

-### router
-
-Hash router.
-
-```html
-<script src="/lib/docsify.js" data-router></script>
-```
-
-```js
-window.$docsify = {
-  router: true
-}
-```
-

 ### auto2top

@ -423,7 +365,7 @@ window.$docsify = {

 ### homepage

-`README.md` will be rendered as a homepage for your website in the docs folder, but sometimes we want to specify another file as a homepage, or even use the `README.md` in your repo. We can use (need `data-router`):
+`README.md` will be rendered as a homepage for your website in the docs folder, but sometimes we want to specify another file as a homepage, or even use the `README.md` in your repo.

 ```html
 <script src="/lib/docsify.js" data-homepage="https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md"></script>
--- a/docs/index.html
+++ b/docs/index.html
@ -18,10 +18,8 @@
 <script
  src="//unpkg.com/docsify/lib/docsify.min.js"
  data-max-level="4"
-  data-sidebar-toggle
  data-coverpage
-  data-name="docsify"
-  data-router></script>
+  data-name="docsify"></script>
 <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
 <script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
 </html>
--- a/docs/zh-cn.md
+++ b/docs/zh-cn.md
@ -25,7 +25,7 @@ mkdir docs && cd docs
 <body>
  <div id="app"></div>
 </body>
-<script src="//unpkg.com/docsify" data-router></script>
+<script src="//unpkg.com/docsify"></script>
 </html>
 ```

@ -201,7 +201,7 @@ window.$docsify = {
 index.html
 ```html
 <script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/docsify" data-router></script>
+<script src="//unpkg.com/docsify"></script>
 ```

 ```markdown
@ -271,51 +271,6 @@ window.$docsify = {
 }
 ```

-### sidebar-toggle
-
-Sidebar 开关按钮
-
-```html
-<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
-```
-
-
-```js
-window.$docsify = {
-  sidebarToggle: true
-}
-```
-
-### 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>
-```
-
-
-```js
-window.$docsify = {
-  sidebar: 'sidebar'
-}
-```
-
 ### load-sidebar

 读取侧边栏配置文件，如果配置，默认加载当前目录下的 `_sidebar.md`。如果文件不存在，会显示 TOC 作为侧边栏内容。如果你有二级目录，也应该放置一份配置文件。
@ -400,20 +355,6 @@ window.$docsify = {
 ```


-### router
-
-开启 hash router 功能，同时多页面切换不会重新加载资源。资源路径会被替换成 `/#/` 的形式。
-
-```html
-<script src="/lib/docsify.js" data-router></script>
-```
-
-```js
-window.$docsify = {
-  router: true
-}
-```
-
 ### auto2top

 切换路由时自动跳转到页面顶部
@ -431,7 +372,7 @@ window.$docsify = {

 ### homepage

-默认情况下网站会将根目录下 `README.md` 作为首页渲染，但是有些时候我们想指定其他文件，甚至想直接将 repo 下的 README 作为首页。你可以这样做（需要设置 `data-router`）：
+默认情况下网站会将根目录下 `README.md` 作为首页渲染，但是有些时候我们想指定其他文件，甚至想直接将 repo 下的 README 作为首页。


 ```html
--- a/src/index.js
+++ b/src/index.js
@ -7,11 +7,8 @@ const OPTIONS = merge({
  repo: '',
  maxLevel: 6,
  subMaxLevel: 0,
-  sidebar: '',
-  sidebarToggle: false,
  loadSidebar: null,
  loadNavbar: null,
-  router: false,
  homepage: 'README.md',
  coverpage: '',
  basePath: '',
@ -33,7 +30,6 @@ if (script) {
  if (OPTIONS.coverpage === true) OPTIONS.coverpage = '_coverpage.md'
  if (OPTIONS.repo === true) OPTIONS.repo = ''
  if (OPTIONS.name === true) OPTIONS.name = ''
-  if (OPTIONS.sidebar) OPTIONS.sidebar = window[OPTIONS.sidebar]
 }

 // utils
@ -109,10 +105,8 @@ const Docsify = function () {
  // Render app
  render.renderApp(dom, replace)
  main()
-  if (OPTIONS.router) {
-    if (!/^#\//.test(window.location.hash)) window.location.hash = '#/'
-    window.addEventListener('hashchange', main)
-  }
+  if (!/^#\//.test(window.location.hash)) window.location.hash = '#/'
+  window.addEventListener('hashchange', main)
 }

 export default Docsify()
--- a/src/render.js
+++ b/src/render.js
@ -30,10 +30,7 @@ export function init () {
    const slug = slugify(text)
    let route = ''

-    if (__docsify__.router) {
-      route = `#/${getRoute()}`
-    }
-
+    route = `#/${getRoute()}`
    toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })

    return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
@ -45,7 +42,7 @@ export function init () {
    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl.replace(/:/g, '__colon__')}</code></pre>`
  }
  renderer.link = function (href, title, text) {
-    if (__docsify__.router && !/:/.test(href)) {
+    if (!/:/.test(href)) {
      href = `#/${href}`.replace(/\/\//g, '/')
    }

@ -82,7 +79,7 @@ export function renderApp (dom, replace) {

  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(__docsify__.repo) +
    (__docsify__.coverpage ? tpl.cover() : '') +
-    tpl.main(__docsify__.sidebarToggle ? tpl.toggle() : '')
+    tpl.main()
  document.body.insertBefore(nav, document.body.children[0])

  // theme color
@ -106,7 +103,7 @@ export function renderApp (dom, replace) {
 */
 export function renderArticle (content) {
  renderTo('article', content ? markdown(content) : 'not found')
-  if (!__docsify__.sidebar && !__docsify__.loadSidebar) renderSidebar()
+  if (!__docsify__.loadSidebar) renderSidebar()

  if (content && typeof Vue !== 'undefined') {
    CACHE.vm && CACHE.vm.$destroy()
@ -147,8 +144,6 @@ export function renderSidebar (content) {
    html = markdown(content)
    // find url tag
    html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
-  } else if (__docsify__.sidebar) {
-    html = tpl.tree(__docsify__.sidebar, '<ul>')
  } else {
    html = tpl.tree(genTree(toc, __docsify__.maxLevel), '<ul>')
  }
--- a/src/tpl.js
+++ b/src/tpl.js
@ -22,8 +22,8 @@ export function corner (data) {
 /**
 * Render main content
 */
-export function main (tpl) {
-  const aside = `${tpl}<aside class="sidebar"></aside>`
+export function main () {
+  const aside = `${toggle()}<aside class="sidebar"></aside>`

  return (isMobile() ? `${aside}<main>` : `<main>${aside}`) +
    `<section class="content">