hexo Next美化_next主题页脚上红心-CSDN博客

这篇博客介绍了如何为个人博客增添互动元素和动态背景。首先，在特定路径下创建clicklove.js文件，实现点击爱心效果。然后，在layout_layout.swig文件中引入该脚本，使用户点击时出现小红心。接着，通过git克隆canvas-nest库来设置动态背景，并在_config.yml文件中启用。此外，还提供了修改canvas-nest参数的方法，如调整图层、透明度、颜色和数量等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击爱心效果

在路径：我的博客/themes/next主题/source/js/source下新建文件clicklove.js

里面的内容是：

! function(e, t, a) {
	function n() {
		c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
	}

	function r() {
		for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
		requestAnimationFrame(r)
	}

	function o() {
		var t = "function" == typeof e.onclick && e.onclick;
		e.onclick = function(e) {
			t && t(), i(e)
		}
	}

	function i(e) {
		var a = t.createElement("div");
		a.className = "heart", d.push({
			el: a,
			x: e.clientX - 5,
			y: e.clientY - 5,
			scale: 1,
			alpha: 1,
			color: s()
		}), t.body.appendChild(a)
	}

	function c(e) {
		var a = t.createElement("style");
		a.type = "text/css";
		try {
			a.appendChild(t.createTextNode(e))
		} catch (t) {
			a.styleSheet.cssText = e
		}
		t.getElementsByTagName("head")[0].appendChild(a)
	}

	function s() {
		return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
	}
	var d = [];
	e.requestAnimationFrame = function() {
		return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
			setTimeout(e, 1e3 / 60)
		}
	}(), n()
}(window, document);

接着在这个路径：我的博客\themes\next主题\layout_layout.swig文件添加：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

设置动态背景

在路径：我的博客\themes\next主题下
打开Git bash here
输入以下：

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

给我的博客\themes\next主题下_config.yml文件添加内容：

# 设置canvas_nest动态背景
canvas_nest:
  enable: true

如果想改参数

路径：我的博客\themes\next主题\source\lib\canvas-nest下的canvas-nest-nomobile.min.js文件

    function l() {
        var i = j("script"),
            w = i.length,
            v = i[w - 1];
        return {
            l: w,
            z: o(v, "zIndex", -1),
            o: o(v, "opacity", 0.5),
            c: o(v, "color", "200,50,200"),
            n: o(v, "count", 150)
        }
    }