diff --git a/.eslintrc b/.eslintrc index d5691ad3f..a88323e16 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,6 +1,7 @@ { "extends": ["vue"], "globals": { - "XMLHttpRequest": true + "XMLHttpRequest": true, + "__docsify__": true } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 713d6f629..12e258ccc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 2.0.0 +### 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 diff --git a/README.md b/README.md index 0e1938cb6..b5d7e09a8 100644 --- 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
- + ``` @@ -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 : ) diff --git a/build/build-css.js b/build/build-css.js index 0890c2939..15af1d8e2 100644 --- a/build/build-css.js +++ b/build/build-css.js @@ -3,7 +3,15 @@ var cssnano = require('cssnano').process var resolve = require('path').resolve var postcss = require('postcss') -var processor = postcss([require('postcss-salad')]) +var processor = postcss([require('postcss-salad')({ + features: { + precss: { + properties: { + preserve: true + } + } + } +})]) var saveMin = function (file, content) { fs.writeFileSync(resolve(__dirname, '../lib/themes/', file), content) diff --git a/dev.html b/dev.html index d66b16d68..8b2b27c8c 100644 --- a/dev.html +++ b/dev.html @@ -5,8 +5,8 @@ - +
- + diff --git a/docs/README.md b/docs/README.md index e28164f66..aa14a37ae 100644 --- a/docs/README.md +++ b/docs/README.md @@ -20,7 +20,7 @@ Create a `index.html` file
- + ``` @@ -191,7 +191,7 @@ We can write the Vue syntax directly in the markdown file, when the Vue library index.html ```html - + ``` ```markdown @@ -260,50 +260,6 @@ window.$docsify = { } ``` -### sidebar-toggle - -Sidebar with toggle - -```html - -``` - -```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 - - -``` - - -```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 - -``` - -```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 @@ -503,4 +445,17 @@ window.$docsify = { } ``` +### theme-color + +Customize the theme color. + + +```html + +``` +```js +window.$docsify = { + themeColor: '#3F51B5' +} +``` diff --git a/docs/_coverpage.md b/docs/_coverpage.md index 39180a4fe..79f91b8f2 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -1,6 +1,6 @@ ![logo](_media/icon.svg) -# docsify 1.10.5 +# docsify 2.0 > A magical documentation site generator. diff --git a/docs/index.html b/docs/index.html index fa7ac30e7..16adf8279 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,10 +18,8 @@ + data-name="docsify"> diff --git a/docs/zh-cn.md b/docs/zh-cn.md index da83dff47..53fb7c031 100644 --- a/docs/zh-cn.md +++ b/docs/zh-cn.md @@ -25,7 +25,7 @@ mkdir docs && cd docs
- + ``` @@ -201,7 +201,7 @@ window.$docsify = { index.html ```html - + ``` ```markdown @@ -271,51 +271,6 @@ window.$docsify = { } ``` -### sidebar-toggle - -Sidebar 开关按钮 - -```html - -``` - - -```js -window.$docsify = { - sidebarToggle: true -} -``` - -### sidebar - -设置后 TOC 功能将不可用,适合导航较多的文档,`data-sidebar` 传入全局变量名。 - -![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png) - -```html - - -``` - - -```js -window.$docsify = { - sidebar: 'sidebar' -} -``` - ### load-sidebar 读取侧边栏配置文件,如果配置,默认加载当前目录下的 `_sidebar.md`。如果文件不存在,会显示 TOC 作为侧边栏内容。如果你有二级目录,也应该放置一份配置文件。 @@ -400,20 +355,6 @@ window.$docsify = { ``` -### router - -开启 hash router 功能,同时多页面切换不会重新加载资源。资源路径会被替换成 `/#/` 的形式。 - -```html - -``` - -```js -window.$docsify = { - router: true -} -``` - ### auto2top 切换路由时自动跳转到页面顶部 @@ -431,7 +372,7 @@ window.$docsify = { ### homepage -默认情况下网站会将根目录下 `README.md` 作为首页渲染,但是有些时候我们想指定其他文件,甚至想直接将 repo 下的 README 作为首页。你可以这样做(需要设置 `data-router`): +默认情况下网站会将根目录下 `README.md` 作为首页渲染,但是有些时候我们想指定其他文件,甚至想直接将 repo 下的 README 作为首页。 ```html @@ -511,3 +452,17 @@ window.$docsify = { } ``` +### themeColor + +自定义主题色。 + + +```html + +``` + +```js +window.$docsify = { + themeColor: '#3F51B5' +} +``` diff --git a/lib/docsify.js b/lib/docsify.js index f0bfe7e0e..8c6948d4d 100644 --- a/lib/docsify.js +++ b/lib/docsify.js @@ -2447,8 +2447,8 @@ function corner (data) { /** * Render main content */ -function main (tpl) { - var aside = tpl + ""; +function main () { + var aside = (toggle()) + ""; return (isMobile() ? (aside + "
") : ("
" + aside)) + "
\n
\n
\n
" @@ -2493,7 +2493,34 @@ function helper (className, content) { return ("

" + (content.slice(5).trim()) + "

") } -var OPTIONS$1 = {}; +function theme (color) { + return ("") +} + +function replaceVar (block) { + block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, __docsify__.themeColor); +} + +function cssVars () { + // variable support + if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) { return } + + var styleBlocks = document.querySelectorAll('style:not(.inserted),link');[].forEach.call(styleBlocks, function (block) { + if (block.nodeName === 'STYLE') { + replaceVar(block); + } else if (block.nodeName === 'LINK') { + load(block.getAttribute('href')) + .then(function (res) { + var style = document.createElement('style'); + + style.innerHTML = res; + document.head.appendChild(style); + replaceVar(style); + }); + } + }); +} + var markdown = marked; var toc = []; var CACHE = {}; @@ -2508,11 +2535,8 @@ var renderTo = function (dom, content) { /** * init render - * @param {Object} options */ -function init (options) { - OPTIONS$1 = options; - +function init () { var renderer = new marked.Renderer(); /** * render anchor tag @@ -2522,10 +2546,7 @@ function init (options) { var slug = slugify(text); var route = ''; - if (OPTIONS$1.router) { - route = "#/" + (getRoute()); - } - + route = "#/" + (getRoute()); toc.push({ level: level, slug: (route + "#" + (encodeURIComponent(slug))), title: text }); return ("" + text + "") @@ -2539,7 +2560,7 @@ function init (options) { return ("
" + (hl.replace(/:/g, '__colon__')) + "
") }; renderer.link = function (href, title, text) { - if (OPTIONS$1.router && !/:/.test(href)) { + if (!/:/.test(href)) { href = ("#/" + href).replace(/\/\//g, '/'); } @@ -2554,11 +2575,11 @@ function init (options) { return ("

" + text + "

") }; - if (typeof OPTIONS$1.markdown === 'function') { + if (typeof __docsify__.markdown === 'function') { markdown.setOptions({ renderer: renderer }); - markdown = OPTIONS$1.markdown.call(this, markdown); + markdown = __docsify__.markdown.call(this, markdown); } else { - markdown.setOptions(merge({ renderer: renderer }, OPTIONS$1.markdown)); + markdown.setOptions(merge({ renderer: renderer }, __docsify__.markdown)); } var md = markdown; @@ -2572,17 +2593,23 @@ function init (options) { function renderApp (dom, replace) { var nav = document.querySelector('nav') || document.createElement('nav'); - if (!OPTIONS$1.repo) { nav.classList.add('no-badge'); } + if (!__docsify__.repo) { nav.classList.add('no-badge'); } - dom[replace ? 'outerHTML' : 'innerHTML'] = corner(OPTIONS$1.repo) + - (OPTIONS$1.coverpage ? cover() : '') + - main(OPTIONS$1.sidebarToggle ? toggle() : ''); + dom[replace ? 'outerHTML' : 'innerHTML'] = corner(__docsify__.repo) + + (__docsify__.coverpage ? cover() : '') + + main(); document.body.insertBefore(nav, document.body.children[0]); + // theme color + if (__docsify__.themeColor) { + document.head.innerHTML += theme(__docsify__.themeColor); + cssVars(); + } + // bind toggle bindToggle('button.sidebar-toggle'); // bind sticky effect - if (OPTIONS$1.coverpage) { + if (__docsify__.coverpage) { !isMobile() && window.addEventListener('scroll', sticky); } else { document.body.classList.add('sticky'); @@ -2594,7 +2621,7 @@ function renderApp (dom, replace) { */ function renderArticle (content) { renderTo('article', content ? markdown(content) : 'not found'); - if (!OPTIONS$1.sidebar && !OPTIONS$1.loadSidebar) { renderSidebar(); } + if (!__docsify__.loadSidebar) { renderSidebar(); } if (content && typeof Vue !== 'undefined') { CACHE.vm && CACHE.vm.$destroy(); @@ -2611,7 +2638,7 @@ function renderArticle (content) { : new Vue({ el: 'main' }); // eslint-disable-line CACHE.vm && CACHE.vm.$nextTick(function (_) { return scrollActiveSidebar(); }); } - if (OPTIONS$1.auto2top) { setTimeout(function () { return scroll2Top(OPTIONS$1.auto2top); }, 0); } + if (__docsify__.auto2top) { setTimeout(function () { return scroll2Top(__docsify__.auto2top); }, 0); } } /** @@ -2635,13 +2662,11 @@ function renderSidebar (content) { html = markdown(content); // find url tag html = html.match(/]*>([\s\S]+)<\/ul>/g)[0]; - } else if (OPTIONS$1.sidebar) { - html = tree(OPTIONS$1.sidebar, '