如何给个人博客网站加一个炫酷的背景？

D_Hans

已于 2024-07-30 20:41:51 修改

阅读量271

点赞数 6

文章标签： stylus 前端 edge javascript

于 2024-07-30 20:40:57 首次发布

本文链接：https://blog.csdn.net/D_Hans/article/details/140805977

版权

本文章的方法适用于纯色背景和HEXO里面的Chic主题

本文章同步发在我的个人博客网Hans'BLOOOOG上

如何给个人博客网站加一个炫酷的背景？| Hans’BLOOOOG

某一天在逛GITHUB Chic主题issue的时候偶然发现一位大佬的网站背景变成了一些几何线条，而且还会跟随鼠标汇聚和散开，富有科技感，而且这样的线条也给Chic单调的背景增加几分动态的美感，为此，我心动了！事不宜迟，请看下文！

大佬的博客网站CY’s Blog

背景部署

代码借鉴

这样复杂而又难懂的代码对于我这个前端小白来说完全手撕出来是不太可能的啦，那我们实现的办法只能是前往大佬GITHUB主页寻找到关键代码了

在大佬index.html文件往下翻个几百行后，终于找到了我们需要的背景代码了，关键代码如下：

<script>
!
function() {
    function n(n, e, t) {
        return n.getAttribute(e) || t
    }
    function e(n) {
        return document.getElementsByTagName(n)
    }
    function t() {
        var t = e("script"),
        o = t.length,
        i = t[o - 1];
        return {
            l: o,
            z: n(i, "zIndex", -1),     //置于主页面背后
            o: n(i, "opacity", .5),     //线条透明度
            c: n(i, "color", "0,0,0"),  //线条颜色
            n: n(i, "count", 100)    //线条数量
        }
    }
    function o() {
        a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
    function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function(i, x) {
            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()))
        }),
        x(i)
    }
    var a, c, u, m = document.createElement("canvas"),
    d = t(),
    l = "c_n" + d.l,
    r = m.getContext("2d"),
    x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(n) {
        window.setTimeout(n, 1e3 / 45)
    },
    w = Math.random,
    y = {
        x: null,
        y: null,
        max: 2e4
    };
    m.id = l,
    m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
    e("body")[0].appendChild(m),
    o(),
    window.onresize = o,
    window.onmousemove = function(n) {
        n = n || window.event,
        y.x = n.clientX,
        y.y = n.clientY
    },
    window.onmouseout = function() {
        y.x = null,
        y.y = null
    };
    for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
        g = w() * c,
        v = 2 * w() - 1,
        p = 2 * w() - 1;
        s.push({
            x: h,
            y: g,
            xa: v,
            ya: p,
            max: 6e3
        })
    }
    u = s.concat([y]),
    setTimeout(function() {
        i()
    },
    100)
} ();
</script>

有了代码后，我们下一步就是部署代码了。

部署代码

按照文件路径themes\Chic\layout\_plugins打开，我们创建一个ejs文件background.ejs(这里自己随意命名)，进入编辑文件，把我们上述的代码全部复制粘贴到里面，完成这一步后我们回到layout文件夹，在我们需要的页面加上下面一句代码即可。

<%- partial("/_plugins/background") %>

例如我们需要把我们所有文章的背景设置为上述说的，我们就需要把这句话加到post.ejs，如果需要加载page页面、category页面、tag页面…同理只需要编辑相应的ejs文件，加入上述一句代码即可

夜间模式

到这一步可以说基本实现开篇的效果了，但是当我打开夜间模式的时候，两眼一黑，模糊的线条与背景融为一体，也就是在夜间模式下，效果还是没出来，下面我们将解决这个问题

需要解决解决夜间模式下也能看得清楚，我们就需要改变夜间模式下线条的颜色，而线条颜色的定义在function t()函数里面，找到 function t()函数，把函数改为

function t() {
        var t = e("script"),
        o = t.length,
        i = t[o - 1];

        const theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
        if(theme==="dark")
            color = "255,255,255";
        else
            color = "0,0,0";

        return {
            l: o,
            z: n(i, "zIndex", -1),     //置于主页面背后
            o: n(i, "opacity", .5),     //线条透明度
            c: n(i, "color", color),  //线条颜色
            n: n(i, "count", 100)    //线条数量
        }
    }

改了这个函数后，原本以为应该能够解决问题了，但是当我按下按键，还是没有改变，需要对页面重新刷新后，才能有效果出来，OK，那我们就做一个识别按到切换按键，就给它来一次页面刷新，代码如下:

// Update theme when theme switcher is clicked
const toggleDesktop = document.querySelector('label[for="switch_default"]');
const toggleMobile = document.querySelector('#mobile-toggle-theme');

if (toggleDesktop) {
    toggleDesktop.addEventListener('click', function() {
        location.reload();
    });
}

if (toggleMobile) {
    toggleMobile.addEventListener('click', function() {
        location.reload();
    });
}