mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
0.6.0 (#12)
* Fix ineffective option, fixed #10 * Feat: dropdown list, #6 * Fix repo url * Feat: sidebar with toggle * Update doc
This commit is contained in:
cinwell.li
GitHub
parent
dd361b34b9
commit
d07ddaa85d
@ -3,14 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-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">
|
||||
<link rel="stylesheet" href="/themes/buble.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/">En</a>
|
||||
<a href="/zh-cn">中文</a>
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="/lib/docsify.js" data-repo="qingwei-li/docsify"></script>
|
||||
<script src="/lib/docsify.js" data-repo="https://qingwei-li/docsify" data-sidebar-toggle></script>
|
||||
</html>
|
||||
|
||||
@ -1,3 +1,11 @@
|
||||
## 0.6.0
|
||||
### Features
|
||||
- Navbar support dropdown list, #6
|
||||
- Sidebar with toggle
|
||||
|
||||
### Bug fixes
|
||||
- Fix ineffective option, fixed #10
|
||||
|
||||
## 0.5.0
|
||||
### Features
|
||||
- Custom sidebars and navbars by markdown file
|
||||
|
||||
@ -14,5 +14,9 @@
|
||||
</nav>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js" data-repo="qingwei-li/docsify" data-max-level="3"></script>
|
||||
<script
|
||||
src="//unpkg.com/docsify/lib/docsify.min.js"
|
||||
data-repo="qingwei-li/docsify"
|
||||
data-max-level="3"
|
||||
data-sidebar-toggle></script>
|
||||
</html>
|
||||
|
||||
@ -121,6 +121,14 @@ Root element.
|
||||
<script src="//unpkg.com/docsify" data-el="#app"></script>
|
||||
```
|
||||
|
||||
#### sidebar-toggle
|
||||
|
||||
Sidebar with toggle
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
|
||||
```
|
||||
|
||||
#### sidebar
|
||||
|
||||
Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the `data-sidebar`.
|
||||
@ -196,6 +204,15 @@ The contents of the file can be:
|
||||
- [chinese](/zh-cn)
|
||||
```
|
||||
|
||||
If you write a sub level list, it will generate a dropdown list.
|
||||
|
||||
```markdown
|
||||
- [download](/download)
|
||||
- language
|
||||
- [en](/)
|
||||
- [chinese](/zh-cn)
|
||||
```
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why use `404.html` instead of `index.html`
|
||||
|
||||
@ -119,6 +119,14 @@ docsify serve docs
|
||||
<script src="//unpkg.com/docsify" data-el="#app"></script>
|
||||
```
|
||||
|
||||
#### sidebar-toggle
|
||||
|
||||
Sidebar 开关按钮
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/docsify" data-sidebar-toggle></script>
|
||||
```
|
||||
|
||||
#### sidebar
|
||||
|
||||
设置后 TOC 功能将不可用，适合导航较多的文档，`data-sidebar` 传入全局变量名。
|
||||
@ -193,6 +201,15 @@ docsify serve docs
|
||||
- [中文](/zh-cn)
|
||||
```
|
||||
|
||||
当然也支持二级列表，将生成一个下拉列表
|
||||
```markdown
|
||||
- [download](/download)
|
||||
- language
|
||||
- [en](/)
|
||||
- [中文](/zh-cn)
|
||||
```
|
||||
|
||||
|
||||
## FAQ
|
||||
|
||||
### 为什么是 `404.html` 而不用 `index.html`
|
||||
|
||||
11
src/event.js
11
src/event.js
@ -70,3 +70,14 @@ export function activeLink (dom, activeParent) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* sidebar toggle
|
||||
*/
|
||||
export function bindToggle (dom) {
|
||||
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
||||
if (!dom) return
|
||||
const main = document.querySelector('main')
|
||||
|
||||
dom.addEventListener('click', () => main.classList.toggle('close'))
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ const OPTIONS = {
|
||||
repo: '',
|
||||
maxLevel: 6,
|
||||
sidebar: '',
|
||||
sidebarToggle: false,
|
||||
loadSidebar: null,
|
||||
loadNavbar: null
|
||||
}
|
||||
@ -15,7 +16,7 @@ const script = document.currentScript || [].slice.call(document.getElementsByTag
|
||||
if (script) {
|
||||
for (const prop in OPTIONS) {
|
||||
const val = script.getAttribute('data-' + camel2kebab(prop))
|
||||
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true
|
||||
OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
|
||||
}
|
||||
if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
|
||||
if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
|
||||
@ -34,7 +35,8 @@ const Docsify = function () {
|
||||
|
||||
// Render markdown file
|
||||
load(`${loc}.md`)
|
||||
.then(render.renderArticle, _ => render.renderArticle())
|
||||
.then(content => render.renderArticle(content, OPTIONS),
|
||||
_ => render.renderArticle(null, OPTIONS))
|
||||
|
||||
// Render sidebar
|
||||
if (OPTIONS.loadSidebar) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import marked from 'marked'
|
||||
import Prism from 'prismjs'
|
||||
import * as tpl from './tpl'
|
||||
import { activeLink, scrollActiveSidebar } from './event'
|
||||
import { activeLink, scrollActiveSidebar, bindToggle } from './event'
|
||||
import { genTree } from './util'
|
||||
|
||||
const renderTo = function (dom, content) {
|
||||
@ -38,17 +38,20 @@ marked.setOptions({ renderer })
|
||||
export function renderApp (dom, replace, opts) {
|
||||
const nav = document.querySelector('nav') || document.createElement('nav')
|
||||
|
||||
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(opts.repo) + tpl.main()
|
||||
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(opts.sidebarToggle) + tpl.corner(opts.repo) + tpl.main()
|
||||
document.body.insertBefore(nav, document.body.children[0])
|
||||
|
||||
// bind toggle
|
||||
bindToggle('button.sidebar-toggle')
|
||||
}
|
||||
|
||||
/**
|
||||
* article
|
||||
*/
|
||||
export function renderArticle (content = 'not found') {
|
||||
export function renderArticle (content = 'not found', OPTIONS) {
|
||||
renderTo('article', marked(content))
|
||||
if (!renderSidebar.rendered) renderSidebar(null)
|
||||
if (!renderNavbar.rendered) renderNavbar(null)
|
||||
if (!renderSidebar.rendered) renderSidebar(null, OPTIONS)
|
||||
if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
export function corner (data) {
|
||||
if (!data) return ''
|
||||
if (!/\/\//.test(data)) data = 'https://github.com/' + data
|
||||
data = data.replace(/^git\+/, '')
|
||||
|
||||
return `
|
||||
<a href="${data}" class="github-corner" aria-label="View source on Github">
|
||||
@ -31,6 +32,13 @@ export function main () {
|
||||
</main>`
|
||||
}
|
||||
|
||||
export function toggle (bool) {
|
||||
if (!bool) return ''
|
||||
return `<button class="sidebar-toggle">
|
||||
<span></span><span></span><span></span>
|
||||
</button>`
|
||||
}
|
||||
|
||||
/**
|
||||
* Render tree
|
||||
* @param {Array} tree
|
||||
|
||||
101
themes/buble.css
101
themes/buble.css
@ -21,6 +21,51 @@ nav {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav ul, nav li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
nav li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
border: 1px solid #0074D9;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
transition: opacity .3s ease, max-height .5s ease;
|
||||
}
|
||||
|
||||
nav li:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
nav li ul li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li ul a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav li ul a.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
@ -108,6 +153,8 @@ main {
|
||||
width: 16em;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
left: 0;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
@ -138,6 +185,32 @@ main {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 10;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
background-color: #0074D9;
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
@ -148,15 +221,43 @@ main {
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: -16em;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: -16em;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
min-width: 100vw;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 16em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
101
themes/pure.css
101
themes/pure.css
@ -19,6 +19,51 @@ nav {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
nav ul, nav li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
nav li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
border: 1px solid #000;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
transition: opacity .3s ease, max-height .5s ease;
|
||||
}
|
||||
|
||||
nav li:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
nav li ul li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li ul a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav li ul a.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
@ -91,6 +136,8 @@ main {
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
left: 0;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
@ -111,6 +158,32 @@ main {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 10;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
background-color: #000;
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
@ -121,15 +194,43 @@ main {
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: -300px;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
min-width: 100vw;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
108
themes/vue.css
108
themes/vue.css
@ -26,6 +26,46 @@ nav ul, nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
nav li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
border: 1px solid #42b983;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
transition: opacity .3s ease, max-height .5s ease;
|
||||
}
|
||||
|
||||
nav li:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
nav li ul li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li ul a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav li ul a.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 1em;
|
||||
padding: 5px 0;
|
||||
@ -112,6 +152,8 @@ main {
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
padding-top: 40px;
|
||||
left: 0;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
@ -124,7 +166,7 @@ main {
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin: 12px 15px;
|
||||
margin: 6px 15px;
|
||||
}
|
||||
|
||||
.sidebar ul li a {
|
||||
@ -146,6 +188,32 @@ main {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: opacity .3s;
|
||||
width: 30px;
|
||||
z-index: 10;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.sidebar-toggle span {
|
||||
background-color: #42b983;
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-bottom: 4px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
bottom: 0;
|
||||
@ -156,15 +224,43 @@ main {
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
padding-top: 20px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: -300px;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
min-width: 100vw;
|
||||
transition: left 250ms ease-out;
|
||||
}
|
||||
|
||||
main.close .sidebar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.close .content {
|
||||
left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -402,6 +498,7 @@ main {
|
||||
font-size: 0.8em;
|
||||
line-height: inherit;
|
||||
margin: 0 2px;
|
||||
overflow-x: auto;
|
||||
padding: 3px 5px;
|
||||
white-space: inherit;
|
||||
}
|
||||
@ -416,15 +513,6 @@ code .token {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
}
|
||||
|
||||
pre code {
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0.8em 0.8em 0.4em;
|
||||
line-height: 1.1em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
pre::after {
|
||||
color: #ccc;
|
||||
content: attr(data-lang);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user