关于博客最近的改动和变化(2024-10-23)

这篇博客主要记录了博客最近的一些改动和变化。包括最近的网站统计，以及一些额外添加的功能。查看commit记录也ok，不过个人博客推的挺随意的，commit确实有点抽象。而且有很多只是多一行空行或少一行的也给我传上去了🤓。

关于网站统计#

之前一直使用的是51la提供的网站统计服务。但是由于51la经常被ddos，导致网站统计信息老是显示不出来，而且我也经常上不去他们官网。所以换成了busuanzi(由于上不去51la，导致之前的数据也拿不到了)。

busuanzi#

busuanzi 提供了免费且易于使用的网站统计服务。使用到 API https://busuanzi.9420.ltd/js 。

之后可能需要查找一下id，删去了原来的busuanzi_value_site_pv和busuanzi_value_site_uv等的value。

主要修改文件#

data/resources.yaml
layouts/partials/sidebar/siteinfo.html
layouts/partials/post/header_meta/views.html
layouts/partials/post/header_meta/visitors.html
assets/js/utils.js

关于额外功能#

Asoul 小人#

这边可以参考github博客仓库README.md。我fork了stevenjoezhang/live2d-widget的仓库，并增加了models。

如何将嘉然live2D添加到博客网站当看板娘
- 添加了嘉然Diana的live2d模型，在layouts/post/footer.html中。
嘉然Diana moc3模型来源于https://www.bilibili.com/video/BV1FZ4y1F7HH
向晚Ava moc3模型来源于https://www.bilibili.com/video/BV1uB4y1w7H
models:
- https://github.com/xiaoski/live2d_models_collection
- https://www.jsdelivr.com/package/gh/journey-ad/blog-img?tab=files&path=live2d

导入B站视频#

参考博客来源 Zoe’s Dumpster 记录MemE主题美化过程。我直接在layouts/shortcodes/bilibili.html中添加了\{\{< bilibili BVxxxxx>}}的shortcode。在博客中通过\{\{< bilibili BVxxxxx>}}(不需要加’\‘,这里是为了防止插入视频)就可以插入B站视频了。

1
{{ $videoID := index .Params 0 }}
2
{{ $pageNum := index .Params 1 | default 1}}
3

4
{{ if (findRE "^[bB][vV][0-9a-zA-Z]+$" $videoID) }}
5
<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?bvid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
6
{{ else }}
7
<div><iframe id="biliplayer" src="//player.bilibili.com/player.html?aid={{ $videoID }}&page={{ $pageNum }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" loading="lazy" > </iframe></div>
8
{{ end }}
9

10
<style>
11
// 嵌入 BiliBili 视频
12
#biliplayer {
13
  width: 100%;
14
  height: 550px;
15
}
16
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
17
  #biliplayer {
18
    width: 100%;
19
    height: 250px;
20
  }
21
}
22
</style>

鼠标点击特效#

这里是网上找的鼠标点击特效，添加到了layouts/partials/scripts.html中。

1
<script>
2
(function () {
3
  let balls = [];
4
  let longPressed = false;
5
  let longPress;
6
  let multiplier = 0;
7
  let width, height;
8
  let origin;
9
  let normal;
10
  let ctx;
11
  const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
12
  const canvas = document.createElement("canvas");
13
  document.body.appendChild(canvas);
14
  canvas.setAttribute("style", "width: 60%; height: 60%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
15
  const pointer = document.createElement("span");
16
  pointer.classList.add("pointer");
17
  document.body.appendChild(pointer);
18

19
  if (canvas.getContext && window.addEventListener) {
20
    ctx = canvas.getContext("2d");
21
    updateSize();
22
    window.addEventListener('resize', updateSize, false);
23
    loop();
24
    window.addEventListener("mousedown", function(e) {
25
      pushBalls(randBetween(10, 20), e.clientX, e.clientY);
26
      document.body.classList.add("is-pressed");
27
      longPress = setTimeout(function(){
28
        document.body.classList.add("is-longpress");
29
        longPressed = true;
30
      }, 500);
31
    }, false);
32
    window.addEventListener("mouseup", function(e) {
33
      clearInterval(longPress);
34
      if (longPressed == true) {
35
        document.body.classList.remove("is-longpress");
36
        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
37
        longPressed = false;
38
      }
39
      document.body.classList.remove("is-pressed");
40
    }, false);
41
    window.addEventListener("mousemove", function(e) {
42
      let x = e.clientX;
43
      let y = e.clientY;
44
      pointer.style.top = y + "px";
45
      pointer.style.left = x + "px";
46
    }, false);
47
  } else {
48
    console.log("canvas or addEventListener is unsupported!");
49
  }
50

51

52
  function updateSize() {
53
    canvas.width = window.innerWidth * 2;
54
    canvas.height = window.innerHeight * 2;
55
    canvas.style.width = window.innerWidth + 'px';
56
    canvas.style.height = window.innerHeight + 'px';
57
    ctx.scale(2, 2);
58
    width = (canvas.width = window.innerWidth);
59
    height = (canvas.height = window.innerHeight);
60
    origin = {
61
      x: width / 2,
62
      y: height / 2
63
    };
64
    normal = {
65
      x: width / 2,
66
      y: height / 2
67
    };
68
  }
69
  class Ball {
70
    constructor(x = origin.x, y = origin.y) {
71
      this.x = x;
72
      this.y = y;
73
      this.angle = Math.PI * 2 * Math.random();
74
      if (longPressed == true) {
75
        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
76
      } else {
77
        this.multiplier = randBetween(6, 12);
78
      }
79
      this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
80
      this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
81
      this.r = randBetween(8, 12) + 3 * Math.random();
82
      this.color = colours[Math.floor(Math.random() * colours.length)];
83
    }
84
    update() {
85
      this.x += this.vx - normal.x;
86
      this.y += this.vy - normal.y;
87
      normal.x = -2 / window.innerWidth * Math.sin(this.angle);
88
      normal.y = -2 / window.innerHeight * Math.cos(this.angle);
89
      this.r -= 0.3;
90
      this.vx *= 0.9;
91
      this.vy *= 0.9;
92
    }
93
  }
94

95
  function pushBalls(count = 1, x = origin.x, y = origin.y) {
96
    for (let i = 0; i < count; i++) {
97
      balls.push(new Ball(x, y));
98
    }
99
  }
100

101
  function randBetween(min, max) {
102
    return Math.floor(Math.random() * max) + min;
103
  }
104

105
  function loop() {
106
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
107
    ctx.clearRect(0, 0, canvas.width, canvas.height);
108
    for (let i = 0; i < balls.length; i++) {
109
      let b = balls[i];
110
      if (b.r < 0) continue;
111
      ctx.fillStyle = b.color;
112
      ctx.beginPath();
113
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
114
      ctx.fill();
115
      b.update();
116
    }
117
    if (longPressed == true) {
118
      multiplier += 0.2;
119
    } else if (!longPressed && multiplier >= 0) {
120
      multiplier -= 0.4;
121
    }
122
    removeBall();
123
    requestAnimationFrame(loop);
124
  }
125

126
  function removeBall() {
127
    for (let i = 0; i < balls.length; i++) {
128
      let b = balls[i];
129
      if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
130
        balls.splice(i, 1);
131
      }
132
    }
133
  }
134
})();
135

136
</script>

网页蛛网效果#

也是网上找的，不过找到的貌似都是被混淆过的。虽然还是能看懂部分地方 maybe。

添加assets/js/net-animation.js，这里把id固定为c_n75。便于之后设置暗亮色主题切换。最后的window.runNetAnimation函数可以传入颜色参数(rgb形式"255,255,255"，"0,0,0"等)，来切换颜色。当然，为了能切换主题色，额外在上面添加了移除原来可能已经存在的canvas代码。

1
const runNetAnimation = function (the_color) {
2
    if (document.getElementById("c_n75") !== null) {
3
        document.getElementById("c_n75").remove();
4
    }
5

6
    function n(n, e, t) {
7
        return n.getAttribute(e) || t;
8
    }
9

10
    function t() {
11
        var t = document.getElementsByTagName("script"),
12
            o = t.length,
13
            i = t[o - 1];
14

15
        return {
16
            l: o,
17
            z: n(i, "zIndex", 2),
18
            o: n(i, "opacity", 0.5),
19
            c: n(i, "color", the_color),
20
            n: n(i, "count", 120),
21
        };
22
    }
23

24
    function o() {
25
        (a = m.width =
26
            window.innerWidth ||
27
            document.documentElement.clientWidth ||
28
            document.body.clientWidth),
29
            (c = m.height =
30
                window.innerHeight ||
31
                document.documentElement.clientHeight ||
32
                document.body.clientHeight);
33
    }
34

35
    function i() {
36
        r.clearRect(0, 0, a, c);
37
        var n, e, t, o, m, l;
38
        s.forEach(function (i, x) {
39
            for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e], null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
40
        }), x(i)
41
    }
42

43
    var a,
44
        c,
45
        u,
46
        m = document.createElement("canvas"),
47
        d = t(),
48
        l = "c_n75",
49
        r = m.getContext("2d"),
50
        x =
51
            window.requestAnimationFrame ||
52
            function (n) {
53
                window.setTimeout(n, 1e3 / 45);
54
            },
55
        w = Math.random,
56
        y = { x: null, y: null, max: 2e4 };
57
    (m.id = l),
58
        (m.style.cssText =
59
            "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o + ";pointer-events:none"),
60
        document.getElementsByTagName("body")[0].appendChild(m),
61
        o(),
62
        (window.onresize = o),
63
        (window.onmousemove = function (n) {
64
            (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
65
        }),
66
        (window.onmouseout = function () {
67
            (y.x = null), (y.y = null);
68
        });
69
    for (var s = [], f = 0; d.n > f; f++) {
70
        var h = w() * a,
71
            g = w() * c,
72
            v = 2 * w() - 1,
73
            p = 2 * w() - 1;
74
        s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 });
75
    }
76
    (u = s.concat([y])),
77
        setTimeout(function () {
78
            i();
79
        }, 100);
80
};
81

82
window.runNetAnimation = runNetAnimation;

在layouts/_default/baseof.html中添加启动脚本，让网页加载时自动启动蛛网效果，同时根据主题颜色切换蛛网颜色。

1
<script>
2
  document.documentElement.getAttribute('data-theme') === 'dark' ?
3
    runNetAnimation("255,255,255") :
4
    runNetAnimation("0,0,0");
5
</script>

在assets/js/utils.js中registerToolButtons函数为按钮添加自动改变蛛网颜色的功能。

1
// in assets/js/utils.js: registerToolButtons: line 58
2
buttons.querySelector('div#toggle-theme').addEventListener('click', () => {
3
      const cur_theme = document.documentElement.getAttribute('data-theme');
4
      window.theme.toggle(cur_theme === 'dark' ? 'light' : 'dark');
5
      window.runNetAnimation(cur_theme === 'dark' ? "0,0,0" : "255,255,255");
6
    });

其他改动#

字体#

在assets/css/_variables/base.scss中添加了custom-fonts-for-all变量，来设置所有字体，以及修改get-font-family函数来使用这个变量。为了方便，这里把font-family-base设置为$font-family-english, $font-family-chinese。本来是打算直接用font-family-base，但是老是出现字体不对的情况😿。

1
$font-family-chinese      : 'PingFang SC', 'Microsoft YaHei';
2
$font-family-english      : -apple-system, BlinkMacSystemFont, Lora;
3
$font-family-base         :  $font-family-english, $font-family-chinese;
4

5
$custom-fonts-for-all: (
6
  'title':  'Lora, "PingFang SC"',
7
  'headings': 'Lora, "PingFang SC"',
8
  'posts': '"PingFang SC"',
9
  'codes': 'jetbrains mono'
10
);
11

12
@function get-font-family($config) {
13
  $custom-family: map-get($custom-fonts-for-all, $config);
14
  @return if(type-of($custom-family) == string, unquote($custom-family), null);
15
}

颜色#

调整了部分颜色，主要是$text-color-dark和$text-color。(因为之前的颜色太浅，容易看不清楚)。这也是在assets/css/_variables/base.scss中修改。

1
$text-color                   : #12183A;
2
$text-color-dark              : #ffffff;