Add custom cover background

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

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 <small>1.2.0</small>
+
+> xxx
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+
+<!-- background image -->
+![](_media/bg.png)
+<!-- background color -->
+![color](#f0f0f0)
+```
+
 
 ### Options
 

docs/_media/snow.js

@@ -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);
-})();

docs/zh-cn.md

@@ -121,6 +121,23 @@ docsify serve docs
 ```
 
 
+#### 自定义封面背景
+默认的背景是随机生成的，你可以自定义背景色或者背景图片。只需要在文档末尾用添加图片的 Markdown 语法
+
+```markdown
+# docsify <small>1.2.0</small>
+
+> xxx
+
+[GitHub](https://github.com/QingWei-Li/docsify/)
+[Get Started](#quick-start)
+
+<!-- 背景图片 -->
+![](_media/bg.png)
+<!-- 背景色 -->
+![color](#f0f0f0)
+```
+
 
 ### 配置参数
 
@@ -289,7 +306,7 @@ Sidebar 开关按钮
 
 #### coverpage
 
-生成封面，参考 [#封面](#封面).
+生成封面，参考 [#封面](/zh-cn#封面).
 
 ```html
 <script src="/lib/docsify.js" data-coverpage></script>

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('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)"></p>$')
+
+  // 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()
 }

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 {

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;

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;

src/themes/pure.css

@@ -1,3 +1,4 @@
 $color-primary: #000;
+$color-bg: #fff;
 $sidebar-width: 300px;
 @import "basic/layout";

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;

src/tpl.js

@@ -41,6 +41,7 @@ export function cover () {
 
   return `<section class="cover" style="background: ${bgc}">
     <div class="cover-main"></div>
+    <div class="mask"></div>
   </section>`
 }
 

src/util.js

@@ -105,4 +105,3 @@ export function getRoute () {
 export function isMobile () {
   return document.body.clientWidth <= 600
 }
-