零 前言
继上篇内容搭建博客教程， 本文将讲述一些博客主题的美化、实用功能的添加。
比如添加评论系统，百度统计，雪花飘落，添加live2d看板娘，鼠标点击显示字体效果，烟花爆炸效果等等等等……
提示：不同主题的添加方法可能有些不同，相同主题的不同版本配置方法也可能有所差异。
个性化还是需要一定的前端基础，了解 HTML、CSS、JS，了解 CSS 预处理语言 Sass、Less，搞懂Hexo的文件目录结构。
不过只要我们选好主题，认真阅读主题文档，大概了解每个文件是对应网页哪个部分的，然后认真阅读本篇教程，相信你一定可以的💪🏻💪🏻
一 添加live2d看板娘
项目地址：EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)
- 在右下角添加一个萌萌的看板娘，命令行输入
npm install --save hexo-helper-live2d获取插件。 - 输入
npm install [name]即可下载相应的模型，将[name]更换成模型名称即可，更多模型选择点击获取，各个模型的预览请访问原作者的博客。 - 打开站点目录下的
_config.yml文件，添加如下代码：
live2d: enable: true scriptFrom: local model: use: live2d-widget-model-haruto # 模型选择 display: position: right # 模型位置 width: 150 # 模型宽度 height: 300 # 模型高度 mobile: show: false # 是否在手机端显示 复制代码
- 设置好后我们就拥有了一个小可爱😇
二 添加鼠标点击效果
爱心效果
- 在
themes/你选择的主题/source/js下新建文件heart.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 += 0.004), (d[e].alpha -= 0.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/你选择的主题/layout/layout.ejs下添加：
<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/heart.js"></script> 复制代码
- 完成以上，当我们点击鼠标就可以看见爱心的特效了
文字效果
- 在
themes/你选择的主题/source/js下新建文件show_text.js，添加：
var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 5, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#FF0000" // 修改颜色处 }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 3000, function() { $i.remove(); }); }); setTimeout('delay()', 2000); }); function delay() { $(".buryit").removeAttr("onclick"); } 复制代码
- 社会主义核心价值观可以更换为其他的文字，想要每次点击显示不同颜色需要修改其中
color的值：
"color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" 复制代码
- 在
themes/你选择的主题/layout/layout.ejs下添加：
<!--单击显示文字--> <script type="text/javascript" src="/js/show_text.js"></script> 复制代码
烟花爆炸效果
- 在
themes/你选择的主题/source/js下新建文件firework.js，添加：
"use strict"; function updateCoords(e) { (pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left), (pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top); } function setParticuleDirection(e) { var t = (anime.random(0, 360) * Math.PI) / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) }; } function createParticule(e, t) { var a = {}; return ( (a.x = e), (a.y = t), (a.color = colors[anime.random(0, colors.length - 1)]), (a.radius = anime.random(16, 32)), (a.endPos = setParticuleDirection(a)), (a.draw = function () { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), (ctx.fillStyle = a.color), ctx.fill(); }), a ); } function createCircle(e, t) { var a = {}; return ( (a.x = e), (a.y = t), (a.color = "#F00"), (a.radius = 0.1), (a.alpha = 0.5), (a.lineWidth = 6), (a.draw = function () { (ctx.globalAlpha = a.alpha), ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), (ctx.lineWidth = a.lineWidth), (ctx.strokeStyle = a.color), ctx.stroke(), (ctx.globalAlpha = 1); }), a ); } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw(); } } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t)); } anime .timeline() .add({ targets: n, x: function (e) { return e.endPos.x; }, y: function (e) { return e.endPos.y; }, radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, }) .add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0, }); } function debounce(e, t) { var a; return function () { var n = this, i = arguments; clearTimeout(a), (a = setTimeout(function () { e.apply(n, i); }, t)); }; } var canvasEl = document.querySelector(".fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { (canvasEl.width = 2 * window.innerWidth), (canvasEl.height = 2 * window.innerHeight), (canvasEl.style.width = window.innerWidth + "px"), (canvasEl.style.height = window.innerHeight + "px"), canvasEl.getContext("2d").scale(2, 2); }, 500), render = anime({ duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); }, }); document.addEventListener( tap, function (e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)); }, !1 ), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1); } ("use strict"); function updateCoords(e) { (pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left), (pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top); } function setParticuleDirection(e) { var t = (anime.random(0, 360) * Math.PI) / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) }; } function createParticule(e, t) { var a = {}; return ( (a.x = e), (a.y = t), (a.color = colors[anime.random(0, colors.length - 1)]), (a.radius = anime.random(16, 32)), (a.endPos = setParticuleDirection(a)), (a.draw = function () { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), (ctx.fillStyle = a.color), ctx.fill(); }), a ); } function createCircle(e, t) { var a = {}; return ( (a.x = e), (a.y = t), (a.color = "#F00"), (a.radius = 0.1), (a.alpha = 0.5), (a.lineWidth = 6), (a.draw = function () { (ctx.globalAlpha = a.alpha), ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), (ctx.lineWidth = a.lineWidth), (ctx.strokeStyle = a.color), ctx.stroke(), (ctx.globalAlpha = 1); }), a ); } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) { e.animatables[t].target.draw(); } } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) { n.push(createParticule(e, t)); } anime .timeline() .add({ targets: n, x: function (e) { return e.endPos.x; }, y: function (e) { return e.endPos.y; }, radius: 0.1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, }) .add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0, }); } function debounce(e, t) { var a; return function () { var n = this, i = arguments; clearTimeout(a), (a = setTimeout(function () { e.apply(n, i); }, t)); }; } var canvasEl = document.querySelector(".fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function () { (canvasEl.width = 2 * window.innerWidth), (canvasEl.height = 2 * window.innerHeight), (canvasEl.style.width = window.innerWidth + "px"), (canvasEl.style.height = window.innerHeight + "px"), canvasEl.getContext("2d").scale(2, 2); }, 500), render = anime({ duration: 1 / 0, update: function () { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); }, }); document.addEventListener( tap, function (e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)); }, !1 ), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1); }
作者：Mancuoj
链接：https://juejin.cn/post/6997775533840793614
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
