diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22bf6333..f5f28c4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
-## 1.4.0
+## 1.4.0 Happly new year ๐
### Features
-- Display TOC in the custom sidebar.
+- Display TOC in the custom sidebar, `data-sub-max-level`.
- Custom background in coverpage.
### Bug fixes
diff --git a/docs/README.md b/docs/README.md
index c01ba936..8a2b6747 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -114,6 +114,23 @@ Generate a cover page through with markdown. Create a `_coverpage.md` and set `d
[Get Started](#quick-start)
```
+#### Custom background
+Currently the background of cover page is generated randomly. We can customize the background, just using the syntax to add image.
+
+```markdown
+# docsify 1.2.0
+
+> xxx
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+
+
+
+
+
+```
+
### Options
diff --git a/docs/_media/snow.js b/docs/_media/snow.js
deleted file mode 100644
index 158980dc..00000000
--- a/docs/_media/snow.js
+++ /dev/null
@@ -1,57 +0,0 @@
-// Fork https://github.com/HermannBjorgvin/SnowJs/blob/master/snow.js
-(function(){
- if (new Date().getDate() > 25) return
- var canvas = document.createElement("canvas");
- var ctx = canvas.getContext("2d");
- var flakeArray = [];
-
- canvas.style.pointerEvents = "none";
- canvas.style.position = "absolute";
- canvas.style.top = 0;
- canvas.style.left = 0;
- canvas.style.width = "100vw";
- canvas.style.height = "100vh";
- document.body.appendChild(canvas);
-
- function canvasResize(){
- canvas.height = canvas.offsetHeight;
- canvas.width = canvas.offsetWidth;
- }
- canvasResize();
-
- window.onresize = function() {
- canvasResize();
- };
-
- var MyMath = Math;
-
- setInterval(function() {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.beginPath();
-
- var random = MyMath.random();
- var distance = .05 + .95 * random;
-
- flake = {};
- flake.x = 1.5 * canvas.width * MyMath.random() - .5 * canvas.width;
- flake.y = -9;
- flake.velX = 2 * distance * (MyMath.random() / 2 + .5);
- flake.velY = (4 + 2 * MyMath.random()) * distance;
- flake.radius = MyMath.pow(5 * random, 2) / 5;
- flake.update = function() {
- var t = this;
- t.x += t.velX;
- t.y += t.velY;
- ctx.beginPath();
- ctx.arc(t.x, t.y, t.radius, 0, 2 * MyMath.PI, !1);
- ctx.fillStyle = "#FFF";
- ctx.fill()
- };
-
- flakeArray.push(flake);
-
- for (b = 0; b < flakeArray.length; b++) {
- flakeArray[b].y > canvas.height ? flakeArray.splice(b, 1) : flakeArray[b].update()
- }
- }, 16);
-})();
\ No newline at end of file
diff --git a/docs/zh-cn.md b/docs/zh-cn.md
index 0b8f9f9e..9f8dd6b8 100644
--- a/docs/zh-cn.md
+++ b/docs/zh-cn.md
@@ -121,6 +121,23 @@ docsify serve docs
```
+#### ่ชๅฎไนๅฐ้ข่ๆฏ
+้ป่ฎค็่ๆฏๆฏ้ๆบ็ๆ็๏ผไฝ ๅฏไปฅ่ชๅฎไน่ๆฏ่ฒๆ่
่ๆฏๅพ็ใๅช้่ฆๅจๆๆกฃๆซๅฐพ็จๆทปๅ ๅพ็็ Markdown ่ฏญๆณ
+
+```markdown
+# docsify 1.2.0
+
+> xxx
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+
+
+
+
+
+```
+
### ้
็ฝฎๅๆฐ
@@ -289,7 +306,7 @@ Sidebar ๅผๅ
ณๆ้ฎ
#### coverpage
-็ๆๅฐ้ข๏ผๅ่ [#ๅฐ้ข](#ๅฐ้ข).
+็ๆๅฐ้ข๏ผๅ่ [#ๅฐ้ข](/zh-cn#ๅฐ้ข).
```html
diff --git a/src/render.js b/src/render.js
index a0ab2a64..75bed941 100644
--- a/src/render.js
+++ b/src/render.js
@@ -131,19 +131,31 @@ export function renderSubSidebar (target) {
export function renderCover (content) {
renderCover.dom = renderCover.dom || document.querySelector('section.cover')
if (!content) {
- renderCover.dom.classList.add('hidden')
- } else {
- renderCover.dom.classList.remove('hidden')
- if (!renderCover.rendered) {
- const html = marked(content)
- const div = document.createElement('div')
- div.innerHTML = html
- const a = div.querySelector('p:last-child')
- console.log(a)
- renderTo('.cover-main', marked(content))
- }
- renderCover.rendered = true
+ renderCover.dom.classList.remove('show')
+ return
}
+ renderCover.dom.classList.add('show')
+ if (renderCover.rendered) return
+
+ // render cover
+ let html = marked(content)
+ const match = html.trim().match('
$')
+
+ // render background
+ if (match) {
+ const coverEl = document.querySelector('section.cover')
+
+ if (match[2] === 'color') {
+ coverEl.style.background = match[1]
+ } else {
+ coverEl.classList.add('has-mask')
+ coverEl.style.backgroundImage = `url(${match[1]})`
+ }
+ html = html.replace(match[0], '')
+ }
+
+ renderTo('.cover-main', html)
+ renderCover.rendered = true
sticky()
}
diff --git a/src/themes/basic/_coverpage.css b/src/themes/basic/_coverpage.css
index 958839bf..e8df5fe1 100644
--- a/src/themes/basic/_coverpage.css
+++ b/src/themes/basic/_coverpage.css
@@ -1,16 +1,27 @@
section.cover {
- height: 100vh;
- display: flex;
align-items: center;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: 100vh;
+ display: none;
- &.hidden {
- display: none;
+ &.show {
+ display: flex;
+ }
+
+ &.has-mask .mask {
+ position: absolute;
+ size: 100%;
+ background-color: $color-bg;
+ opacity: .8;
}
.cover-main {
flex: 1;
text-align: center;
margin: 0 16px;
+ z-index: 1;
}
a {
diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
index 47230791..4e240cc0 100644
--- a/src/themes/basic/_layout.css
+++ b/src/themes/basic/_layout.css
@@ -95,7 +95,7 @@ nav {
display: inline-block;
ul {
- background-color: rgba(#fff, .6);
+ background-color: rgba($color-bg, .6);
border: 1px solid $color-primary;
opacity: 0;
overflow: hidden;
@@ -150,7 +150,7 @@ nav {
}
svg {
- color: #fff;
+ color: $color-bg;
height: 80px;
width: 80px;
fill: $color-primary;
diff --git a/src/themes/buble.css b/src/themes/buble.css
index 9b9c916a..d4b99c59 100644
--- a/src/themes/buble.css
+++ b/src/themes/buble.css
@@ -1,6 +1,7 @@
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
$color-primary: #0074D9;
+$color-bg: #fff;
$sidebar-width: 16em;
@import "basic/layout";
@@ -12,7 +13,7 @@ body {
/* sidebar */
.sidebar {
color: #364149;
- background-color: #fff;
+ background-color: $color-bg;
a {
color: #666;
diff --git a/src/themes/pure.css b/src/themes/pure.css
index bbbaf261..a9f73bf7 100644
--- a/src/themes/pure.css
+++ b/src/themes/pure.css
@@ -1,3 +1,4 @@
$color-primary: #000;
+$color-bg: #fff;
$sidebar-width: 300px;
@import "basic/layout";
diff --git a/src/themes/vue.css b/src/themes/vue.css
index 026d311f..5eaaaee2 100644
--- a/src/themes/vue.css
+++ b/src/themes/vue.css
@@ -1,20 +1,21 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
$color-primary: #42b983;
+$color-bg: #fff;
$sidebar-width: 300px;
@import "basic/layout";
@import "basic/coverpage";
body {
- background-color: #fff;
+ background-color: $color-bg;
color: #34495e;
}
/* sidebar */
.sidebar {
color: #364149;
- background-color: #fff;
+ background-color: $color-bg;
li {
margin: 6px 15px;
diff --git a/src/tpl.js b/src/tpl.js
index 0dc1b541..644a8efb 100644
--- a/src/tpl.js
+++ b/src/tpl.js
@@ -41,6 +41,7 @@ export function cover () {
return ``
}
diff --git a/src/util.js b/src/util.js
index 94521dde..54715183 100644
--- a/src/util.js
+++ b/src/util.js
@@ -105,4 +105,3 @@ export function getRoute () {
export function isMobile () {
return document.body.clientWidth <= 600
}
-