diff --git a/CHANGELOG.md b/CHANGELOG.md index 268b9c9a1..86321d313 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 1.6.0 +### Features +- Improve sidebar performance. The active item is automatically scrolled in the visible view. +- New doc helper: `! `. e.g. `! content` will be rendered as `

content

` + ## 1.5.2 ### Bug fixes - Fixed number at the beginning of the slug diff --git a/docs/README.md b/docs/README.md index a670fec01..d36bae51d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -157,6 +157,26 @@ window.$docsify = { } ``` +### Doc Helpers +#### p.tip + +'! ' add your content will rendered as `

content

` + +```markdown +! Important **information** +``` + +It will be rendered + +```html +

Important information

+``` + +e.g. + +! Important **information** + + ## Options You can add configurations in the script tag attributes or with `window.$docsify`. @@ -351,11 +371,14 @@ Scroll to the top on changing hash. ```html + + ``` ```js window.$docsify = { - auto2top: true + auto2top: true, + // auto2top: 50 } ``` diff --git a/docs/_coverpage.md b/docs/_coverpage.md index 6b051a8d5..43c705d74 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -1,6 +1,6 @@ ![logo](_media/icon.svg) -# docsify 1.5.2 +# docsify 1.6.0 > A magical documentation site generator. diff --git a/docs/zh-cn.md b/docs/zh-cn.md index 081b4db4d..f714c93e6 100644 --- a/docs/zh-cn.md +++ b/docs/zh-cn.md @@ -163,6 +163,24 @@ window.$docsify = { } ``` +### 文档助手 +#### 内置「提示」语法 + +感叹号加空格,后面接内容,会渲染成带 tip 类名的段落。 + +```markdown +! 提示信息,**支持其他 markdown 语法** +``` + +将被渲染成 + +```html +

提示信息支持其他 markdown 语法

+``` + +效果 + +! 适合显示醒目的内容 ## 配置参数 diff --git a/lib/docsify.js b/lib/docsify.js index 580a572ff..47a0f15e9 100644 --- a/lib/docsify.js +++ b/lib/docsify.js @@ -175,10 +175,12 @@ var merge = Object.assign || function (to) { function scrollActiveSidebar () { if (isMobile()) { return } + var hoveredOverSidebar = false; var anchors = document.querySelectorAll('.anchor'); + var sidebar = document.querySelector('aside.sidebar'); var nav = {}; - var lis = document.querySelectorAll('.sidebar li'); - var active = null; + var lis = sidebar.querySelectorAll('li'); + var active = sidebar.querySelector('li.active'); for (var i = 0, len = lis.length; i < len; i += 1) { var li = lis[i]; @@ -193,27 +195,34 @@ function scrollActiveSidebar () { } function highlight () { + var top = document.body.scrollTop; + var last; + for (var i = 0, len = anchors.length; i < len; i += 1) { var node = anchors[i]; - var bcr = node.getBoundingClientRect(); - - if (bcr.top < 10 && bcr.bottom > 10) { - var li = nav[node.getAttribute('data-id')]; - - if (!li || li === active) { return } - if (active) { active.setAttribute('class', ''); } - li.setAttribute('class', 'active'); - active = li; - - return + if (node.offsetTop > top) { + if (!last) { last = node; } + break + } else { + last = node; } } + if (!last) { return } + var li = nav[last.getAttribute('data-id')]; + + if (!li || li === active) { return } + if (active) { active.classList.remove('active'); } + + li.classList.add('active'); + active = li; + !hoveredOverSidebar && active.scrollIntoView(); } window.removeEventListener('scroll', highlight); window.addEventListener('scroll', highlight); - highlight(); + sidebar.addEventListener('mouseover', function () { hoveredOverSidebar = true; }); + sidebar.addEventListener('mouseleave', function () { hoveredOverSidebar = false; }); } function scrollIntoView () { @@ -221,7 +230,9 @@ function scrollIntoView () { if (!id || !id.length) { return } var section = document.querySelector(decodeURIComponent(id[0])); - if (section) { section.scrollIntoView(); } + if (section) { setTimeout(function () { return section.scrollIntoView(); }, 0); } + + return section } /** @@ -237,13 +248,13 @@ function activeLink (dom, activeParent) { .forEach(function (node) { if (host.indexOf(node.href) === 0 && !target) { activeParent - ? node.parentNode.setAttribute('class', 'active') - : node.setAttribute('class', 'active'); + ? node.parentNode.classList.add('active') + : node.classList.add('active'); target = node; } else { activeParent - ? node.parentNode.removeAttribute('class') - : node.removeAttribute('class'); + ? node.parentNode.classList.remove('active') + : node.classList.remove('active'); } }); @@ -261,13 +272,18 @@ function bindToggle (dom) { dom.addEventListener('click', function () { return body.classList.toggle('close'); }); if (isMobile()) { - document.querySelector('aside') - .addEventListener('click', function (_) { return body.classList.toggle('close'); }); + var sidebar = document.querySelector('aside.sidebar'); + document.body.addEventListener('click', function (e) { + if (e.target !== dom && !dom.contains(e.target)) { body.classList.toggle('close'); } + if (sidebar.contains(e.target)) { setTimeout(function () { return activeLink(sidebar, true); }, 0); } + }); } } -function scroll2Top () { - document.body.scrollTop = 0; +function scroll2Top (offset) { + if ( offset === void 0 ) offset = 0; + + document.body.scrollTop = offset === true ? 0 : Number(offset); } function sticky () { @@ -2439,6 +2455,7 @@ var OPTIONS$1 = {}; var markdown = marked; var toc = []; var CACHE = {}; +var TIP_RE = /^!\s/; var renderTo = function (dom, content) { dom = typeof dom === 'object' ? dom : document.querySelector(dom); @@ -2488,6 +2505,10 @@ function init (options) { return ("" + text + "") }; + renderer.paragraph = function (text) { + var isTip = TIP_RE.test(text); + return isTip ? ("

" + (text.replace(TIP_RE, '')) + "

") : ("

" + text + "

") + }; if (typeof OPTIONS$1.markdown === 'function') { markdown.setOptions({ renderer: renderer }); @@ -2531,7 +2552,7 @@ function renderArticle (content) { var vm = new Vue({ el: 'main' }); // eslint-disable-line vm.$nextTick(function (_) { return scrollActiveSidebar(); }); } - if (OPTIONS$1.auto2top) { scroll2Top(); } + if (OPTIONS$1.auto2top) { setTimeout(function () { return scroll2Top(OPTIONS$1.auto2top); }, 0); } } /** @@ -2561,7 +2582,7 @@ function renderSidebar (content) { renderTo('aside.sidebar', html); var target = activeLink('aside.sidebar', true); - if (content) { renderSubSidebar(target); } + if (target) { renderSubSidebar(target); } toc = []; scrollActiveSidebar(); diff --git a/lib/docsify.min.js b/lib/docsify.min.js index f4f788123..819acab21 100644 --- a/lib/docsify.min.js +++ b/lib/docsify.min.js @@ -1,2 +1,2 @@ -var Docsify=function(){"use strict";function e(e,t,n){void 0===t&&(t="GET");var r=new XMLHttpRequest;return r.open(t,e),r.send(),{then:function(e,t){if(void 0===t&&(t=function(){}),n){var a=setInterval(function(e){return n({step:Math.floor(5*Math.random()+1)})},500);r.addEventListener("progress",n),r.addEventListener("loadend",function(e){n(e),clearInterval(a)})}r.addEventListener("error",t),r.addEventListener("load",function(n){var r=n.target;r.status>=400?t(r):e(r.response)})},abort:function(){return 4!==r.readyState&&r.abort()}}}function t(e,t){var n=[],r={};return e.forEach(function(e){var a=e.level||1,i=a-1;a>t||(r[i]?(r[i].children=r[i].children||[],r[i].children.push(e)):n.push(e),r[a]=e)}),n}function n(e){return e.replace(/([A-Z])/g,function(e){return"-"+e.toLowerCase()})}function r(e){return null===e||void 0===e}function a(){var e=window.location;if($===e.hash&&!r(A))return A;var t=e.hash.match(/^#\/([^#]+)/);return t=t&&2===t.length?t[1]:/^#\//.test(e.hash)?"":e.pathname,A=t,$=e.hash,t}function i(){return document.body.clientWidth<=600}function s(e){var t=/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g,n=!1,r="-";if(s.occurrences=s.occurrences||{},"string"!=typeof e)return"";n||(e=e.toLowerCase());var a=e.trim().replace(/<[^>\d]+>/g,"").replace(t,"").replace(/\s/g,r).replace(/-+/g,r).replace(/^(\d)/,"_$1"),i=s.occurrences[a];return s.occurrences.hasOwnProperty(a)?i++:i=0,s.occurrences[a]=i,i&&(a=a+"-"+i),a}function o(){function e(){for(var e=0,r=t.length;e10){var o=n[i.getAttribute("data-id")];if(!o||o===a)return;return a&&a.setAttribute("class",""),o.setAttribute("class","active"),void(a=o)}}}if(!i()){for(var t=document.querySelectorAll(".anchor"),n={},r=document.querySelectorAll(".sidebar li"),a=null,s=0,o=r.length;s=t||e.classList.contains("hidden")?document.body.classList.add("sticky"):document.body.classList.remove("sticky")}()}function g(e,t){return t={exports:{}},e(t,t.exports),t.exports}function h(e){return e?(/\/\//.test(e)||(e="https://github.com/"+e),e=e.replace(/^git\+/,""),'\n \n \n '):""}function f(e){var t=e+'';return(i()?t+"
":"
"+t)+'
\n
\n
\n
'}function m(){var e=", 100%, 85%",t="linear-gradient(to left bottom, hsl("+(Math.floor(255*Math.random())+e)+") 0%, hsl("+(Math.floor(255*Math.random())+e)+") 100%)";return'
\n
\n
\n
'}function b(){return''}function y(e,t){return void 0===t&&(t=""),e&&e.length?(e.forEach(function(e){t+='
  • '+e.title+"
  • ",e.children&&(t+='
    • '+y(e.children)+"
    ")}),t):""}function v(e){M=e;var t=new O.Renderer;t.heading=function(e,t){var n=s(e),r="";return M.router&&(r="#/"+a()),P.push({level:t,slug:r+"#"+encodeURIComponent(n),title:e}),"'+e+""},t.code=function(e,t){void 0===t&&(t="");var n=T.highlight(e,T.languages[t]||T.languages.markup).replace(/{{/g,"{{");return'
    '+n+"
    "},t.link=function(e,t,n){return M.router&&!/:/.test(e)&&(e=("#/"+e).replace(/\/\//g,"/")),''+n+""},"function"==typeof M.markdown?(N.setOptions({renderer:t}),N=M.markdown.call(this,N)):N.setOptions(q({renderer:t},M.markdown))}function k(e,t){var n=document.querySelector("nav")||document.createElement("nav");M.repo||n.classList.add("no-badge"),e[t?"outerHTML":"innerHTML"]=h(M.repo)+(M.coverpage?m():"")+f(M.sidebarToggle?b():""),document.body.insertBefore(n,document.body.children[0]),c("button.sidebar-toggle"),M.coverpage?!i()&&window.addEventListener("scroll",d):document.body.classList.add("sticky")}function x(e){if(W("article",e?N(e):"not found"),M.sidebar||M.loadSidebar||S(),e&&"undefined"!=typeof Vue&&"undefined"!=typeof Vuep){var t=new Vue({el:"main"});t.$nextTick(function(e){return o()})}M.auto2top&&p()}function w(e){I.navbar&&I.navbar===e||(I.navbar=e,e&&W("nav",N(e)),u("nav"))}function S(e){var n;n=e?N(e):M.sidebar?y(M.sidebar,"