Add custom cover background
This commit is contained in:
parent
e932ff66b9
commit
b287f57c86
12 changed files with 85 additions and 82 deletions
|
|
@ -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 -->
|
||||

|
||||
<!-- background color -->
|
||||

|
||||
```
|
||||
|
||||
|
||||
### Options
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
})();
|
||||
|
|
@ -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)
|
||||
|
||||
<!-- 背景图片 -->
|
||||

|
||||
<!-- 背景色 -->
|
||||

|
||||
```
|
||||
|
||||
|
||||
### 配置参数
|
||||
|
||||
|
|
@ -289,7 +306,7 @@ Sidebar 开关按钮
|
|||
|
||||
#### coverpage
|
||||
|
||||
生成封面,参考 [#封面](#封面).
|
||||
生成封面,参考 [#封面](/zh-cn#封面).
|
||||
|
||||
```html
|
||||
<script src="/lib/docsify.js" data-coverpage></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue