Skip to content

Commit 50addfd

Browse files
QingWei-LiQingWei-Li
authored
* Add cover page * Update doc * Add kbd style, resolve docsifyjs#37 * headling can cliked, resolve docsifyjs#36 * Update change log, close docsifyjs#35 * Update docs
1 parent b14fcf7 commit 50addfd

File tree

14 files changed

+312
-48
lines changed

14 files changed

+312
-48
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## 1.3.0
2+
### Features
3+
4+
- Add cover page
5+
6+
### Bug fixes
7+
- sidebar highlight
8+
- headling can be cliked
9+
- add `<kbd>` style
10+
111
## 1.2.0
212
### Features
313
- custom basePath

‎docs/README.md‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
<p align="center">
2-
<img alt="docsify" src="https://cloud.githubusercontent.com/assets/7565692/21292094/5c206de4-c533-11e6-9493-29ea67b01dde.png">
3-
</p>
4-
5-
<p align="center">
6-
A magical documentation site generator.
7-
</p>
8-
9-
## Features
10-
- Simple and lightweight (~12kb gzipped)
11-
- Multiple themes
12-
- Not build static html files
13-
141
## Quick Start
152

163
### Create a project
@@ -107,6 +94,28 @@ Code in `404.html`
10794
- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
10895
- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
10996

97+
98+
### Cover Page
99+
100+
Through the markdown can generate a cover page. create a `_coverpage.md` and set `data-coverpage` in script tag.
101+
102+
```markdown
103+
![logo](_media/icon.svg)
104+
105+
# docsify <small>1.2.0</small>
106+
107+
> A magical documentation site generator.
108+
109+
- Simple and lightweight (~12kb gzipped)
110+
- Multiple themes
111+
- Not build static html files
112+
113+
114+
[GitHub](https://github.com/QingWei-Li/docsify/)
115+
[Get Started](#quick-start)
116+
```
117+
118+
110119
### Options
111120

112121
#### repo
@@ -261,3 +270,14 @@ If your HTML entry file and the markdown files are in different directories, we
261270
<!-- Even if the docs is on another site 😄 -->
262271
<script src="/lib/docsify.js" data-base-path="https://docsify.js.org/"></script>
263272
```
273+
274+
275+
#### coverpage
276+
277+
Generate cover page.
278+
279+
```html
280+
<script src="/lib/docsify.js" data-coverpage></script>
281+
<!-- or -->
282+
<script src="/lib/docsify.js" data-coverpage="other.md"></script>
283+
```

‎docs/_coverpage.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
![logo](_media/icon.svg)
2+
3+
# docsify <small>1.2.0</small>
4+
5+
> A magical documentation site generator.
6+
7+
- Simple and lightweight (~12kb gzipped)
8+
- Multiple themes
9+
- Not build static html files
10+
11+
12+
[GitHub](https://github.com/QingWei-Li/docsify/)
13+
[Get Started](#quick-start)

‎docs/_media/icon.svg‎

Lines changed: 30 additions & 0 deletions
Loading

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
</body>
1818
<script
1919
src="//cdn.jsdelivr.net/docsify/latest/lib/docsify.min.js"
20-
data-repo="qingwei-li/docsify"
21-
data-max-level="3"
20+
data-max-level="4"
2221
data-sidebar-toggle
22+
data-coverpage
2323
data-router></script>
2424
</html>

‎docs/zh-cn.md‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
<p align="center">
2-
<img alt="docsify" src="https://cloud.githubusercontent.com/assets/7565692/21292094/5c206de4-c533-11e6-9493-29ea67b01dde.png">
3-
</p>
4-
5-
<p align="center">
6-
无需构建快速生成文档页
7-
</p>
81

92
## 特性
103
- 无需构建，写完 markdown 直接发布
@@ -106,6 +99,28 @@ docsify serve docs
10699
- UNPKG [https://unpkg.com/docsify/](https://unpkg.com/docsify/)
107100
- jsDelivr [http://www.jsdelivr.com/projects/docsify](http://www.jsdelivr.com/projects/docsify)
108101

102+
### 封面
103+
104+
只需要写几行简单的 markdown 就可以拥有一页精致的封面，通过添加 `data-coverpage` 属性，并创建 `_coverpage.md`，按照下面的格式书写即可。
105+
106+
```markdown
107+
![logo](_media/icon.svg)
108+
109+
# docsify <small>1.2.0</small>
110+
111+
> A magical documentation site generator.
112+
113+
- Simple and lightweight (~12kb gzipped)
114+
- Multiple themes
115+
- Not build static html files
116+
117+
118+
[GitHub](https://github.com/QingWei-Li/docsify/)
119+
[Get Started](#quick-start)
120+
```
121+
122+
123+
109124
### 配置参数
110125

111126
#### repo
@@ -258,3 +273,14 @@ Sidebar 开关按钮
258273
<!-- 甚至文档是在其他站点下 😄 -->
259274
<script src="/lib/docsify.js" data-base-path="https://docsify.js.org/"></script>
260275
```
276+
277+
#### coverpage
278+
279+
生成封面，参考 [#封面](#封面).
280+
281+
```html
282+
<script src="/lib/docsify.js" data-coverpage></script>
283+
<!-- or -->
284+
<script src="/lib/docsify.js" data-coverpage="other.md"></script>
285+
286+
```

‎src/event.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ export function scrollActiveSidebar () {
2323

2424
function highlight () {
2525
for (let i = 0, len = anchors.length; i < len; i += 1) {
26-
const node = anchors[i].parentNode
26+
const node = anchors[i]
2727
const bcr = node.getBoundingClientRect()
2828

2929
if (bcr.top < 10 && bcr.bottom > 10) {
30-
const li = nav[node.id]
30+
const li = nav[node.getAttribute('data-id')]
3131

3232
if (!li || li === active) return
3333
if (active) active.setAttribute('class', '')
@@ -40,9 +40,8 @@ export function scrollActiveSidebar () {
4040
}
4141
}
4242

43-
const dom = document.querySelector('main .content')
44-
dom.removeEventListener('scroll', highlight)
45-
dom.addEventListener('scroll', highlight)
43+
window.removeEventListener('scroll', highlight)
44+
window.addEventListener('scroll', highlight)
4645
highlight()
4746
}
4847

@@ -100,3 +99,16 @@ export function scroll2Top () {
10099
}
101100
cacheContentDOM.scrollTop = 0
102101
}
102+
103+
export function sticky () {
104+
const dom = document.querySelector('section.cover')
105+
const coverHeight = dom.getBoundingClientRect().height
106+
107+
return (function () {
108+
if (window.pageYOffset >= coverHeight || dom.classList.contains('hidden')) {
109+
document.body.classList.add('sticky')
110+
} else {
111+
document.body.classList.remove('sticky')
112+
}
113+
})()
114+
}

‎src/index.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { load, camel2kebab, isNil, getRoute } from './util'
2-
import { activeLink, scrollIntoView } from './event'
2+
import { activeLink, scrollIntoView, sticky } from './event'
33
import * as render from './render'
44

55
const OPTIONS = {
@@ -12,6 +12,7 @@ const OPTIONS = {
1212
loadNavbar: null,
1313
router: false,
1414
homepage: 'README.md',
15+
coverpage: '',
1516
basePath: '',
1617
auto2top: false
1718
}
@@ -25,6 +26,7 @@ if (script) {
2526
}
2627
if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
2728
if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
29+
if (OPTIONS.coverpage === true) OPTIONS.coverpage = '_coverpage.md'
2830
if (OPTIONS.sidebar) OPTIONS.sidebar = window[OPTIONS.sidebar]
2931
}
3032

@@ -56,6 +58,15 @@ const mainRender = function (cb) {
5658
page = `${route}.md`
5759
}
5860

61+
// Render Cover page
62+
if (OPTIONS.coverpage) {
63+
if (page === OPTIONS.homepage) {
64+
load(OPTIONS.coverpage).then(render.renderCover)
65+
} else {
66+
render.renderCover()
67+
}
68+
}
69+
5970
cacheXhr && cacheXhr.abort && cacheXhr.abort()
6071
// Render markdown file
6172
cacheXhr = load(page, 'GET', render.renderLoading)
@@ -91,6 +102,7 @@ const Docsify = function () {
91102
mainRender(_ => {
92103
activeLink('aside.sidebar', true)
93104
scrollIntoView()
105+
OPTIONS.coverpage && sticky()
94106
})
95107
}
96108

‎src/render.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import marked from 'marked'
22
import Prism from 'prismjs'
33
import * as tpl from './tpl'
4-
import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top } from './event'
5-
import { genTree, getRoute } from './util'
4+
import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top, sticky } from './event'
5+
import { genTree, getRoute, isMobile } from './util'
66

77
let OPTIONS = {}
88
const CACHE = {}
@@ -32,7 +32,7 @@ renderer.heading = function (text, level) {
3232

3333
toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
3434

35-
return `<h${level} id="${slug}"><a href="${route}#${slug}" class="anchor"></a>${text}</h${level}>`
35+
return `<a href="${route}#${slug}" data-id="${slug}" class="anchor"><h${level} id="${slug}">${text}</h${level}></a>`
3636
}
3737
// highlight code
3838
renderer.code = function (code, lang = '') {
@@ -55,11 +55,21 @@ marked.setOptions({ renderer })
5555
export function renderApp (dom, replace) {
5656
const nav = document.querySelector('nav') || document.createElement('nav')
5757

58-
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(OPTIONS.sidebarToggle) + tpl.corner(OPTIONS.repo) + tpl.main()
58+
if (!OPTIONS.repo) nav.classList.add('no-badge')
59+
60+
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(OPTIONS.repo) +
61+
(OPTIONS.coverpage ? tpl.cover() : '') +
62+
tpl.main(OPTIONS.sidebarToggle ? tpl.toggle() : '')
5963
document.body.insertBefore(nav, document.body.children[0])
6064

6165
// bind toggle
6266
bindToggle('button.sidebar-toggle')
67+
// bind sticky effect
68+
if (OPTIONS.coverpage) {
69+
!isMobile() && window.addEventListener('scroll', sticky)
70+
} else {
71+
document.body.classList.add('sticky')
72+
}
6373
}
6474

6575
/**
@@ -110,6 +120,20 @@ export function renderSidebar (content) {
110120
toc = []
111121
}
112122

123+
/**
124+
* Cover Page
125+
*/
126+
export function renderCover (content) {
127+
renderCover.dom = renderCover.dom || document.querySelector('section.cover')
128+
if (!content) {
129+
renderCover.dom.classList.add('hidden')
130+
} else {
131+
renderCover.dom.classList.remove('hidden')
132+
!renderCover.rendered && renderTo('.cover-main', marked(content))
133+
renderCover.rendered = true
134+
}
135+
}
136+
113137
/**
114138
* render loading bar
115139
* @return {[type]} [description]

0 commit comments

Comments
 (0)