51a访问统计添加一张图这里我看着太单调，这里就加了一个代码雨动态效果，这样看着就比较好看，有需要的可以添加。

展示

51a访问统计

js代码

这里为了方便管理，直接添加到【blogroot】/themes/butterfly/layout/includes/page/about.pug文件底部，也可以创建自定义js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
script(defer).
  (function() {
  	const script = document.currentScript,
  		fontSize = script.getAttribute("size") || 16,
  		fontName = script.getAttribute("font") || "monospace";
  	const canvas = document.getElementById("canvas");
  		context = canvas.getContext("2d");
  	//- document.body.appendChild(canvas);
  	canvas.style.cssText = "position: absolute;top: 0; left: 0;height: 100%; background-color: #111; z-index: 1;";
  	let W = window.innerWidth,
  		H = window.innerHeight;
  	canvas.width = W;
  	canvas.height = H;
  	let colunms = Math.floor(W / fontSize),
  		drops = [],
  		str = "QWERTYUIOPASDFGHJKLZXCVBNM!@#$%^&*()1234567890qwertyuiopasdfghjklzxcvbnm";
  	for (let i = 0; i < colunms; i++) {
  		drops.push(Math.ceil(canvas.height / fontSize) + 1);
  	}
  	setInterval(function() {
  		context.fillStyle = "rgba(0,0,0,0.05)";
  		context.fillRect(0, 0, W, H);
  		context.font = `700 ${fontSize}px ${fontName}`;
  		context.fillStyle = "#00cc33";
  		for (let i = 0; i < colunms; i++) {
  			const index = Math.floor(Math.random() * str.length),
  				x = i * fontSize,
  				y = drops[i] * fontSize;
  			context.fillText(str[index], x, y);
  			if (y >= canvas.height && Math.random() > 0.99) {
  				drops[i] = 0;
  			}
  			drops[i]++;
  		}
  	}, 120);
  
  	window.addEventListener("resize", function() {
  		W = window.innerWidth;
  		H = window.innerHeight;
  		canvas.width = W;
  		canvas.height = H;
  		colunms = Math.floor(W / fontSize);
  		drops = [];
  		for (let i = 0; i < colunms; i++) {
  			drops.push(Math.ceil(canvas.height / fontSize) + 1);
  		}
  	});
  })();

修改51a源码

删除51a背景显示，about.yml下文件下的cover也记得删除(根据自己的情况注意缩进)。

1
2
3
4
5
6
7
8
      .author-content
        if theme.LA.enable
-         - let cover = item.statistic.cover
-         .about-statistic.author-content-item(style=`background: url(${cover}) top / cover no-repeat;`)
            .card-content
+           canvas#canvas
              .author-content-item-tips 数据
              span.author-content-item-title 访问统计

css修改

根据自己的情况自行修改，这里适配我的文件

1
2
3
4
canvas {
  box-sizing: border-box;
  width: 100%;
}

如果有问题可以留言，这里会根据你的情况进行答复。