Add custom cover background

This commit is contained in:
qingwei.li 2016-12-31 13:40:29 +08:00
commit b287f57c86
12 changed files with 85 additions and 82 deletions

View file

@ -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

View file

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

View file

@ -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>