mirror of
https://github.com/wahyd4/docsify.git
synced 2026-08-09 13:26:34 +10:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d175ba6913 | ||
|
|
2574778605 | ||
|
|
44a255103c | ||
|
|
440635aeeb | ||
|
|
a8cc8e46cd | ||
|
|
626227be4d | ||
|
|
c4f02027a8 | ||
|
|
8f3eb17dbf |
@@ -1,3 +1,12 @@
|
||||
## 1.0.2
|
||||
### Bug fixes
|
||||
- Fix binding events bug, fixed #24
|
||||
- Fix regular expression, fixed #23
|
||||
|
||||
## 1.0.1
|
||||
### Bug fixes
|
||||
- `img` style
|
||||
|
||||
## 1.0.0
|
||||
## Features
|
||||
- Support hash router
|
||||
|
||||
+2
-2
@@ -9,8 +9,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/">En</a>
|
||||
<a href="/zh-cn">中文</a>
|
||||
<a href="#/">En</a>
|
||||
<a href="#/zh-cn">中文</a>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
@@ -221,13 +221,3 @@ Sidebar 开关按钮
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-router></script>
|
||||
```
|
||||
|
||||
## FAQ
|
||||
|
||||
### 为什么是 `404.html` 而不用 `index.html`
|
||||
|
||||
docsify 想要实现的是用最简单的方式 **动态渲染内容**。
|
||||
|
||||
例如我有两个文档分别为 `README.md` 和 `guide.md`,如果我用 `index.html` 作为文件名,`README.md` 可以被正确的渲染因为我们已经规定它为首页文件,但是如果我们访问 `my-domain.com/guide` 想要得到的结果是 `guide.md` 的内容,它将无法工作,因为目录下并不存在一个 `guide.html` 的文件。
|
||||
|
||||
但是 GitHub Pages 服务器找不到资源, 就会回退并渲染 `404.html` 文件。😄
|
||||
|
||||
+124
-102
@@ -99,6 +99,98 @@ function getRoute () {
|
||||
return route
|
||||
}
|
||||
|
||||
/**
|
||||
* Active sidebar when scroll
|
||||
* @link https://buble.surge.sh/
|
||||
*/
|
||||
function scrollActiveSidebar () {
|
||||
if (/mobile/i.test(navigator.userAgent)) { return }
|
||||
|
||||
var anchors = document.querySelectorAll('.anchor');
|
||||
var nav = {};
|
||||
var lis = document.querySelectorAll('.sidebar li');
|
||||
var active = null;
|
||||
|
||||
for (var i = 0, len = lis.length; i < len; i += 1) {
|
||||
var li = lis[i];
|
||||
var href = li.querySelector('a').getAttribute('href');
|
||||
|
||||
if (href !== '/') { href = href.match(/#([^#]+)$/g)[0].slice(1); }
|
||||
|
||||
nav[href] = li;
|
||||
}
|
||||
|
||||
function highlight () {
|
||||
for (var i = 0, len = anchors.length; i < len; i += 1) {
|
||||
var node = anchors[i].parentNode;
|
||||
var bcr = node.getBoundingClientRect();
|
||||
|
||||
if (bcr.top < 10 && bcr.bottom > 10) {
|
||||
var li = nav[node.id];
|
||||
|
||||
if (!li || li === active) { return }
|
||||
if (active) { active.setAttribute('class', ''); }
|
||||
|
||||
li.setAttribute('class', 'active');
|
||||
active = li;
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var dom = document.querySelector('main .content');
|
||||
dom.removeEventListener('scroll', highlight);
|
||||
dom.addEventListener('scroll', highlight);
|
||||
highlight();
|
||||
}
|
||||
|
||||
function scrollIntoView () {
|
||||
var id = window.location.hash.match(/#[^#\/]+$/g);
|
||||
if (!id || !id.length) { return }
|
||||
var section = document.querySelector(id[0]);
|
||||
|
||||
if (section) { section.scrollIntoView(); }
|
||||
}
|
||||
|
||||
/**
|
||||
* Acitve link
|
||||
*/
|
||||
function activeLink (dom, activeParent) {
|
||||
var host = window.location.href;
|
||||
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom);
|
||||
if (!dom) { return
|
||||
|
||||
; }[].slice.call(dom.querySelectorAll('a')).forEach(function (node) {
|
||||
if (node.href === host) {
|
||||
activeParent
|
||||
? node.parentNode.setAttribute('class', 'active')
|
||||
: node.setAttribute('class', 'active');
|
||||
} else {
|
||||
activeParent
|
||||
? node.parentNode.removeAttribute('class')
|
||||
: node.removeAttribute('class');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* sidebar toggle
|
||||
*/
|
||||
function bindToggle (dom) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom);
|
||||
if (!dom) { return }
|
||||
var body = document.body;
|
||||
|
||||
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');
|
||||
});
|
||||
}
|
||||
|
||||
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||
|
||||
|
||||
@@ -2240,100 +2332,8 @@ function tree (toc, tpl) {
|
||||
return tpl
|
||||
}
|
||||
|
||||
/**
|
||||
* Active sidebar when scroll
|
||||
* @link https://buble.surge.sh/
|
||||
*/
|
||||
function scrollActiveSidebar () {
|
||||
if (/mobile/i.test(navigator.userAgent)) { return }
|
||||
|
||||
var anchors = document.querySelectorAll('.anchor');
|
||||
var nav = {};
|
||||
var lis = document.querySelectorAll('.sidebar li');
|
||||
var active = null;
|
||||
|
||||
for (var i = 0, len = lis.length; i < len; i += 1) {
|
||||
var li = lis[i];
|
||||
var href = li.querySelector('a').getAttribute('href');
|
||||
|
||||
if (href !== '/') { href = href.match(/#([^#]+)$/g)[0].slice(1); }
|
||||
|
||||
nav[href] = li;
|
||||
}
|
||||
|
||||
function highlight () {
|
||||
for (var i = 0, len = anchors.length; i < len; i += 1) {
|
||||
var node = anchors[i].parentNode;
|
||||
var bcr = node.getBoundingClientRect();
|
||||
|
||||
if (bcr.top < 10 && bcr.bottom > 10) {
|
||||
var li = nav[node.id];
|
||||
|
||||
if (!li || li === active) { return }
|
||||
if (active) { active.setAttribute('class', ''); }
|
||||
|
||||
li.setAttribute('class', 'active');
|
||||
active = li;
|
||||
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('main .content').addEventListener('scroll', highlight);
|
||||
highlight();
|
||||
|
||||
function scrollIntoView () {
|
||||
var id = window.location.hash.match(/#[^#\/]+$/g);
|
||||
if (!id || !id.length) { return }
|
||||
var section = document.querySelector(id[0]);
|
||||
|
||||
if (section) { section.scrollIntoView(); }
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', scrollIntoView);
|
||||
scrollIntoView();
|
||||
}
|
||||
|
||||
/**
|
||||
* Acitve link
|
||||
*/
|
||||
function activeLink (dom, activeParent) {
|
||||
var host = window.location.href;
|
||||
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom);
|
||||
if (!dom) { return
|
||||
|
||||
; }[].slice.call(dom.querySelectorAll('a')).forEach(function (node) {
|
||||
if (node.href === host) {
|
||||
activeParent
|
||||
? node.parentNode.setAttribute('class', 'active')
|
||||
: node.setAttribute('class', 'active');
|
||||
} else {
|
||||
activeParent
|
||||
? node.parentNode.removeAttribute('class')
|
||||
: node.removeAttribute('class');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* sidebar toggle
|
||||
*/
|
||||
function bindToggle (dom) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom);
|
||||
if (!dom) { return }
|
||||
var body = document.body;
|
||||
|
||||
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');
|
||||
});
|
||||
}
|
||||
|
||||
var OPTIONS$1 = {};
|
||||
var CACHE = {};
|
||||
|
||||
var renderTo = function (dom, content) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom);
|
||||
@@ -2405,6 +2405,8 @@ function renderArticle (content) {
|
||||
* navbar
|
||||
*/
|
||||
function renderNavbar (content) {
|
||||
if (CACHE['navbar'] === content) { return }
|
||||
CACHE['navbar'] = content;
|
||||
renderNavbar.rendered = true;
|
||||
|
||||
if (content) { renderTo('nav', marked(content)); }
|
||||
@@ -2415,6 +2417,8 @@ function renderNavbar (content) {
|
||||
* sidebar
|
||||
*/
|
||||
function renderSidebar (content) {
|
||||
if (CACHE['sidebar'] === content) { return }
|
||||
CACHE['sidebar'] = content;
|
||||
renderSidebar.rendered = true;
|
||||
|
||||
var isToc = false;
|
||||
@@ -2429,7 +2433,7 @@ function renderSidebar (content) {
|
||||
}
|
||||
|
||||
renderTo('aside.sidebar', content);
|
||||
isToc ? scrollActiveSidebar() : activeLink('aside.sidebar', true);
|
||||
if (isToc) { scrollActiveSidebar(); }
|
||||
toc = [];
|
||||
}
|
||||
|
||||
@@ -2465,25 +2469,37 @@ config(OPTIONS);
|
||||
|
||||
var cacheRoute = null;
|
||||
|
||||
var mainRender = function () {
|
||||
var mainRender = function (cb) {
|
||||
var route = getRoute();
|
||||
if (cacheRoute === route) { return }
|
||||
|
||||
if (cacheRoute === route) { return cb() }
|
||||
var wait;
|
||||
var basePath = cacheRoute = route;
|
||||
|
||||
if (!/\//.test(basePath)) {
|
||||
basePath = '';
|
||||
} else if (basePath && !/\/$/.test(basePath)) {
|
||||
basePath = basePath.match(/(\S+\/)[^\/]+$/)[1];
|
||||
basePath = basePath.match(/(\S*\/)[^\/]+$/)[1];
|
||||
}
|
||||
|
||||
// Render markdown file
|
||||
load((!route || /\/$/.test(route)) ? (route + "README.md") : (route + ".md"))
|
||||
.then(renderArticle, function (_) { return renderArticle(null); });
|
||||
.then(function (result) {
|
||||
renderArticle(result);
|
||||
if (OPTIONS.loadSidebar) {
|
||||
if (wait === false) { cb(); }
|
||||
wait = false;
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
}, function (_) { return renderArticle(null); });
|
||||
|
||||
// Render sidebar
|
||||
if (OPTIONS.loadSidebar) {
|
||||
load(basePath + OPTIONS.loadSidebar).then(renderSidebar);
|
||||
load(basePath + OPTIONS.loadSidebar).then(function (result) {
|
||||
renderSidebar(result);
|
||||
if (wait === false) { cb(); }
|
||||
wait = false;
|
||||
});
|
||||
}
|
||||
|
||||
// Render navbar
|
||||
@@ -2495,13 +2511,19 @@ var mainRender = function () {
|
||||
var Docsify = function () {
|
||||
var dom = document.querySelector(OPTIONS.el) || document.body;
|
||||
var replace = dom !== document.body;
|
||||
var main = function () {
|
||||
mainRender(function (_) {
|
||||
activeLink('aside.sidebar', true);
|
||||
scrollIntoView();
|
||||
});
|
||||
};
|
||||
|
||||
// Render app
|
||||
renderApp(dom, replace);
|
||||
mainRender();
|
||||
main();
|
||||
if (OPTIONS.router) {
|
||||
if (!/^#\//.test(window.location.hash)) { window.location.hash = '#/'; }
|
||||
window.addEventListener('hashchange', mainRender);
|
||||
window.addEventListener('hashchange', main);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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.0.0",
|
||||
"version": "1.0.2",
|
||||
"description": "A magical documentation generator.",
|
||||
"main": "lib/docsify.js",
|
||||
"files": [
|
||||
|
||||
+9
-10
@@ -39,19 +39,18 @@ export function scrollActiveSidebar () {
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('main .content').addEventListener('scroll', highlight)
|
||||
const dom = document.querySelector('main .content')
|
||||
dom.removeEventListener('scroll', highlight)
|
||||
dom.addEventListener('scroll', highlight)
|
||||
highlight()
|
||||
}
|
||||
|
||||
function scrollIntoView () {
|
||||
const id = window.location.hash.match(/#[^#\/]+$/g)
|
||||
if (!id || !id.length) return
|
||||
const section = document.querySelector(id[0])
|
||||
export function scrollIntoView () {
|
||||
const id = window.location.hash.match(/#[^#\/]+$/g)
|
||||
if (!id || !id.length) return
|
||||
const section = document.querySelector(id[0])
|
||||
|
||||
if (section) section.scrollIntoView()
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', scrollIntoView)
|
||||
scrollIntoView()
|
||||
if (section) section.scrollIntoView()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
+27
-8
@@ -1,4 +1,5 @@
|
||||
import { load, camel2kebab, isNil, getRoute } from './util'
|
||||
import { activeLink, scrollIntoView } from './event'
|
||||
import * as render from './render'
|
||||
|
||||
const OPTIONS = {
|
||||
@@ -29,25 +30,37 @@ render.config(OPTIONS)
|
||||
|
||||
let cacheRoute = null
|
||||
|
||||
const mainRender = function () {
|
||||
const mainRender = function (cb) {
|
||||
const route = getRoute()
|
||||
if (cacheRoute === route) return
|
||||
|
||||
if (cacheRoute === route) return cb()
|
||||
let wait
|
||||
let basePath = cacheRoute = route
|
||||
|
||||
if (!/\//.test(basePath)) {
|
||||
basePath = ''
|
||||
} else if (basePath && !/\/$/.test(basePath)) {
|
||||
basePath = basePath.match(/(\S+\/)[^\/]+$/)[1]
|
||||
basePath = basePath.match(/(\S*\/)[^\/]+$/)[1]
|
||||
}
|
||||
|
||||
// Render markdown file
|
||||
load((!route || /\/$/.test(route)) ? `${route}README.md` : `${route}.md`)
|
||||
.then(render.renderArticle, _ => render.renderArticle(null))
|
||||
.then(result => {
|
||||
render.renderArticle(result)
|
||||
if (OPTIONS.loadSidebar) {
|
||||
if (wait === false) cb()
|
||||
wait = false
|
||||
} else {
|
||||
cb()
|
||||
}
|
||||
}, _ => render.renderArticle(null))
|
||||
|
||||
// Render sidebar
|
||||
if (OPTIONS.loadSidebar) {
|
||||
load(basePath + OPTIONS.loadSidebar).then(render.renderSidebar)
|
||||
load(basePath + OPTIONS.loadSidebar).then(result => {
|
||||
render.renderSidebar(result)
|
||||
if (wait === false) cb()
|
||||
wait = false
|
||||
})
|
||||
}
|
||||
|
||||
// Render navbar
|
||||
@@ -59,13 +72,19 @@ const mainRender = function () {
|
||||
const Docsify = function () {
|
||||
const dom = document.querySelector(OPTIONS.el) || document.body
|
||||
const replace = dom !== document.body
|
||||
const main = function () {
|
||||
mainRender(_ => {
|
||||
activeLink('aside.sidebar', true)
|
||||
scrollIntoView()
|
||||
})
|
||||
}
|
||||
|
||||
// Render app
|
||||
render.renderApp(dom, replace)
|
||||
mainRender()
|
||||
main()
|
||||
if (OPTIONS.router) {
|
||||
if (!/^#\//.test(window.location.hash)) window.location.hash = '#/'
|
||||
window.addEventListener('hashchange', mainRender)
|
||||
window.addEventListener('hashchange', main)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+6
-1
@@ -5,6 +5,7 @@ import { activeLink, scrollActiveSidebar, bindToggle } from './event'
|
||||
import { genTree, getRoute } from './util'
|
||||
|
||||
let OPTIONS = {}
|
||||
const CACHE = {}
|
||||
|
||||
const renderTo = function (dom, content) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
||||
@@ -74,6 +75,8 @@ export function renderArticle (content) {
|
||||
* navbar
|
||||
*/
|
||||
export function renderNavbar (content) {
|
||||
if (CACHE['navbar'] === content) return
|
||||
CACHE['navbar'] = content
|
||||
renderNavbar.rendered = true
|
||||
|
||||
if (content) renderTo('nav', marked(content))
|
||||
@@ -84,6 +87,8 @@ export function renderNavbar (content) {
|
||||
* sidebar
|
||||
*/
|
||||
export function renderSidebar (content) {
|
||||
if (CACHE['sidebar'] === content) return
|
||||
CACHE['sidebar'] = content
|
||||
renderSidebar.rendered = true
|
||||
|
||||
let isToc = false
|
||||
@@ -98,7 +103,7 @@ export function renderSidebar (content) {
|
||||
}
|
||||
|
||||
renderTo('aside.sidebar', content)
|
||||
isToc ? scrollActiveSidebar() : activeLink('aside.sidebar', true)
|
||||
if (isToc) scrollActiveSidebar()
|
||||
toc = []
|
||||
}
|
||||
|
||||
|
||||
@@ -24,8 +24,6 @@ body {
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
|
||||
+1
-1
@@ -36,7 +36,7 @@ body {
|
||||
|
||||
ul li.active>a {
|
||||
color: $color-primary;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user