mirror of
https://github.com/wahyd4/docsify.git
synced 2026-08-09 13:26:34 +10:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b952a3a08c | ||
|
|
2bb8641303 | ||
|
|
66d7919fa9 | ||
|
|
580767bf78 | ||
|
|
d6b996f4c1 | ||
|
|
b4e0d54d7b | ||
|
|
b15b286c5c | ||
|
|
5ab86271c2 | ||
|
|
9638eee50d |
@@ -1,3 +1,18 @@
|
||||
## 1.4.3
|
||||
|
||||
### Bug fixes
|
||||
- Fix toggle button style.
|
||||
- Support `mailto`, `tel`, etc. href type
|
||||
|
||||
|
||||
## 1.4.2
|
||||
### Bug fixes
|
||||
- Fix scroll to top.
|
||||
|
||||
## 1.4.1
|
||||
### Bug fixes
|
||||
- Fix generate slug.
|
||||
|
||||
## 1.4.0 Happly new year 🎉
|
||||
### Features
|
||||
- Display TOC in the custom sidebar, `data-sub-max-level`.
|
||||
|
||||
@@ -8,7 +8,5 @@
|
||||
<body class="">
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src=//unpkg.com/vue></script>
|
||||
<script src=//unpkg.com/vuep></script>
|
||||
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify" data-auto2top data-sidebar-toggle data-router></script>
|
||||
</html>
|
||||
|
||||
+37
-15
@@ -114,6 +114,35 @@ function isMobile () {
|
||||
return document.body.clientWidth <= 600
|
||||
}
|
||||
|
||||
function slugify (string) {
|
||||
var re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g;
|
||||
var maintainCase = false;
|
||||
var replacement = '-';
|
||||
slugify.occurrences = slugify.occurrences || {};
|
||||
|
||||
if (typeof string !== 'string') { return '' }
|
||||
if (!maintainCase) { string = string.toLowerCase(); }
|
||||
|
||||
var slug = string.trim()
|
||||
.replace(re, '')
|
||||
.replace(/\s/g, replacement);
|
||||
var occurrences = slugify.occurrences[slug];
|
||||
|
||||
if (slugify.occurrences.hasOwnProperty(slug)) {
|
||||
occurrences++;
|
||||
} else {
|
||||
occurrences = 0;
|
||||
}
|
||||
|
||||
slugify.occurrences[slug] = occurrences;
|
||||
|
||||
if (occurrences) {
|
||||
slug = slug + '-' + occurrences;
|
||||
}
|
||||
|
||||
return slug
|
||||
}
|
||||
|
||||
/**
|
||||
* Active sidebar when scroll
|
||||
* @link https://buble.surge.sh/
|
||||
@@ -206,19 +235,14 @@ function bindToggle (dom) {
|
||||
|
||||
dom.addEventListener('click', function () { return body.classList.toggle('close'); });
|
||||
|
||||
if (!/mobile/i.test(navigator.userAgent)) { return }
|
||||
document.querySelector('aside').addEventListener('click', function (event) {
|
||||
body.classList.toggle('close');
|
||||
});
|
||||
if (isMobile()) {
|
||||
document.querySelector('aside')
|
||||
.addEventListener('click', function (_) { return body.classList.toggle('close'); });
|
||||
}
|
||||
}
|
||||
|
||||
var cacheContentDOM;
|
||||
function scroll2Top () {
|
||||
if (!cacheContentDOM) {
|
||||
var dom = isMobile() ? 'body' : 'section.content';
|
||||
cacheContentDOM = document.querySelector(dom);
|
||||
}
|
||||
cacheContentDOM.scrollTop = 0;
|
||||
document.body.scrollTop = 0;
|
||||
}
|
||||
|
||||
function sticky () {
|
||||
@@ -2359,7 +2383,7 @@ function cover () {
|
||||
}
|
||||
|
||||
function toggle () {
|
||||
return "<button class=\"sidebar-toggle\">\n <span></span><span></span><span></span>\n </button>"
|
||||
return "<button class=\"sidebar-toggle\">\n <div class=\"sidebar-toggle-button\">\n <span></span><span></span><span></span>\n </div>\n </button>"
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2400,9 +2424,7 @@ var renderer = new marked.Renderer();
|
||||
* @link https://github.com/chjj/marked#overriding-renderer-methods
|
||||
*/
|
||||
renderer.heading = function (text, level) {
|
||||
var slug = text.toLowerCase()
|
||||
.replace(/<(?:.|\n)*?>/gm, '')
|
||||
.replace(/[^\w|\u4e00-\u9fa5]+/g, '-');
|
||||
var slug = slugify(text);
|
||||
var route = '';
|
||||
|
||||
if (OPTIONS$1.router) {
|
||||
@@ -2423,7 +2445,7 @@ renderer.code = function (code, lang) {
|
||||
return ("<pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
|
||||
};
|
||||
renderer.link = function (href, title, text) {
|
||||
if (OPTIONS$1.router && !/^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(href)) {
|
||||
if (OPTIONS$1.router && !/:/.test(href)) {
|
||||
href = ("#/" + href).replace(/\/\//g, '/');
|
||||
}
|
||||
|
||||
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "docsify",
|
||||
"version": "1.4.0",
|
||||
"version": "1.4.2",
|
||||
"description": "A magical documentation generator.",
|
||||
"main": "lib/docsify.js",
|
||||
"files": [
|
||||
|
||||
+5
-10
@@ -94,19 +94,14 @@ export function bindToggle (dom) {
|
||||
|
||||
dom.addEventListener('click', () => body.classList.toggle('close'))
|
||||
|
||||
if (!/mobile/i.test(navigator.userAgent)) return
|
||||
document.querySelector('aside').addEventListener('click', event => {
|
||||
body.classList.toggle('close')
|
||||
})
|
||||
if (isMobile()) {
|
||||
document.querySelector('aside')
|
||||
.addEventListener('click', _ => body.classList.toggle('close'))
|
||||
}
|
||||
}
|
||||
|
||||
let cacheContentDOM
|
||||
export function scroll2Top () {
|
||||
if (!cacheContentDOM) {
|
||||
const dom = isMobile() ? 'body' : 'section.content'
|
||||
cacheContentDOM = document.querySelector(dom)
|
||||
}
|
||||
cacheContentDOM.scrollTop = 0
|
||||
document.body.scrollTop = 0
|
||||
}
|
||||
|
||||
export function sticky () {
|
||||
|
||||
+3
-5
@@ -2,7 +2,7 @@ import marked from 'marked'
|
||||
import Prism from 'prismjs'
|
||||
import * as tpl from './tpl'
|
||||
import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top, sticky } from './event'
|
||||
import { genTree, getRoute, isMobile } from './util'
|
||||
import { genTree, getRoute, isMobile, slugify } from './util'
|
||||
|
||||
let OPTIONS = {}
|
||||
const CACHE = {}
|
||||
@@ -21,9 +21,7 @@ const renderer = new marked.Renderer()
|
||||
* @link https://github.com/chjj/marked#overriding-renderer-methods
|
||||
*/
|
||||
renderer.heading = function (text, level) {
|
||||
const slug = text.toLowerCase()
|
||||
.replace(/<(?:.|\n)*?>/gm, '')
|
||||
.replace(/[^\w|\u4e00-\u9fa5]+/g, '-')
|
||||
const slug = slugify(text)
|
||||
let route = ''
|
||||
|
||||
if (OPTIONS.router) {
|
||||
@@ -42,7 +40,7 @@ renderer.code = function (code, lang = '') {
|
||||
return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
|
||||
}
|
||||
renderer.link = function (href, title, text) {
|
||||
if (OPTIONS.router && !/^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(href)) {
|
||||
if (OPTIONS.router && !/:/.test(href)) {
|
||||
href = `#/${href}`.replace(/\/\//g, '/')
|
||||
}
|
||||
|
||||
|
||||
@@ -177,7 +177,7 @@ main {
|
||||
.sidebar {
|
||||
border-right: 1px solid rgba(0, 0, 0, .07);
|
||||
overflow-y: auto;
|
||||
padding-top: 40px;
|
||||
padding: 40px 0;
|
||||
position: absolute 0 * 0 0;
|
||||
transition: transform 250ms ease-out;
|
||||
width: $sidebar-width;
|
||||
@@ -206,17 +206,18 @@ main {
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
position: absolute * * 0 0;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 30;
|
||||
outline: none;
|
||||
width: calc($sidebar-width - 16px);
|
||||
padding: 10px;
|
||||
background-color: rgba($color-bg, .8);
|
||||
|
||||
&:hover {
|
||||
.sidebar-toggle-button:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@@ -290,6 +291,10 @@ body.close {
|
||||
transform: translateX(-$sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
}
|
||||
@@ -323,11 +328,19 @@ body.close {
|
||||
transition: transform 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body.close {
|
||||
.sidebar {
|
||||
transform: translateX($sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: calc($sidebar-width - 16px);
|
||||
}
|
||||
|
||||
.content {
|
||||
transform: translateX($sidebar-width);
|
||||
}
|
||||
|
||||
+4
-2
@@ -47,8 +47,10 @@ export function cover () {
|
||||
|
||||
export function toggle () {
|
||||
return `<button class="sidebar-toggle">
|
||||
<span></span><span></span><span></span>
|
||||
</button>`
|
||||
<div class="sidebar-toggle-button">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</button>`
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+29
@@ -105,3 +105,32 @@ export function getRoute () {
|
||||
export function isMobile () {
|
||||
return document.body.clientWidth <= 600
|
||||
}
|
||||
|
||||
export function slugify (string) {
|
||||
const re = /[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,.\/:;<=>?@\[\]^`{|}~]/g
|
||||
const maintainCase = false
|
||||
const replacement = '-'
|
||||
slugify.occurrences = slugify.occurrences || {}
|
||||
|
||||
if (typeof string !== 'string') return ''
|
||||
if (!maintainCase) string = string.toLowerCase()
|
||||
|
||||
let slug = string.trim()
|
||||
.replace(re, '')
|
||||
.replace(/\s/g, replacement)
|
||||
let occurrences = slugify.occurrences[slug]
|
||||
|
||||
if (slugify.occurrences.hasOwnProperty(slug)) {
|
||||
occurrences++
|
||||
} else {
|
||||
occurrences = 0
|
||||
}
|
||||
|
||||
slugify.occurrences[slug] = occurrences
|
||||
|
||||
if (occurrences) {
|
||||
slug = slug + '-' + occurrences
|
||||
}
|
||||
|
||||
return slug
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user