--- theme: hydrogen highlight: atelier-sulphurpool-light --- 这是我参与8月更文挑战的第3天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831) 关于Hexo的一切 —— [我的Hexo专栏](https://juejin.cn/column/6997777547744247815 "https://juejin.cn/column/6997777547744247815") # 零前言继上篇内容[搭建博客教程](https://juejin.cn/post/6997418639003484174)，本文将讲述一些博客主题的美化、实用功能的添加。比如**添加评论系统**，**百度统计**，**雪花飘落**，添加live2d**看板娘**，鼠标点击显示字体效果，烟花爆炸效果等等等等…… > 提示：不同主题的添加方法可能有些不同，相同主题的不同版本配置方法也可能有所差异。 > > 个性化还是需要**一定的前端基础**，了解 HTML、CSS、JS，了解 CSS 预处理语言 Sass、Less，搞懂Hexo的文件目录结构。不过只要我们选好主题，认真阅读主题文档，大概了解每个文件是对应网页哪个部分的，然后认真阅读本篇教程，相信你一定可以的💪🏻💪🏻 # 一添加live2d看板娘 > 项目地址：[EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)](https://github.com/EYHN/hexo-helper-live2d) 1. 在右下角添加一个萌萌的看板娘，命令行输入 `npm install --save hexo-helper-live2d` 获取插件。 0. 输入 `npm install [name]` 即可下载相应的模型，将 `[name]` 更换成模型名称即可，更多模型选择[点击获取](https://github.com/xiazeyu/live2d-widget-models)，各个模型的预览请[访问原作者的博客](https://huaji8.top/post/live2d-plugin-2.0/)。 0. 打开站点目录下的 `_config.yml` 文件，添加如下代码： ```yaml live2d: enable: true scriptFrom: local model: use: live2d-widget-model-haruto # 模型选择 display: position: right # 模型位置 width: 150 # 模型宽度 height: 300 # 模型高度 mobile: show: false # 是否在手机端显示 ``` 0. 设置好后我们就拥有了一个小可爱😇 ![image-20210818201518784](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1e1412faec149009d7b01ebe1e90d21~tplv-k3u1fbpfcp-zoom-1.image) # 二添加鼠标点击效果 ## 爱心效果 1. 在 `themes/你选择的主题/source/js` 下新建文件 `heart.js` ，添加： ```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); ``` 2. 在`themes/你选择的主题/layout/layout.ejs`下添加： ```html ``` 3. 完成以上，当我们点击鼠标就可以看见爱心的特效了 ![image-20210818205905348](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c5c57aa9c5f41e897b7deaa4feac514~tplv-k3u1fbpfcp-zoom-1.image) ## 文字效果 1. 在`themes/你选择的主题/source/js`下新建文件`show_text.js`，添加： ```js var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("").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"); } ``` 2. 社会主义核心价值观可以更换为其他的文字，想要每次点击显示不同颜色需要修改其中 `color` 的值： ```js "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" ``` 3. 在 `themes/你选择的主题/layout/layout.ejs` 下添加： ```html ``` ## 烟花爆炸效果 1. 在 `themes/你选择的主题/source/js` 下新建文件 `firework.js` ，添加： ```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); } ``` 2. 在 `themes/你选择的主题/layout/layout.ejs` 下添加： ```html

``` 3. 效果如下 ![image-20210818210757509](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08743b0ba6f84a16bb23556b4eb161ee~tplv-k3u1fbpfcp-zoom-1.image) # 三添加网站运行时间 1. 记录网站运行时间在页脚显示，所以在 `themes/你选择的主题/layout/_partial/footer.ejs` 下添加： ```html 载入天数...载入时分秒... ``` 2. 效果如下： ![image-20210818211602854](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb12989902a04c7686242a32397aca6f~tplv-k3u1fbpfcp-zoom-1.image) # 四添加浏览器标题恶搞 1. 在用户切换标签页的时候，更改浏览器标题呼唤用户回归，在 `themes/你选择的主题/source/js` 下新建文件 `funny.js` ，添加： ```js var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "/funny.ico"); document.title = '╭(°A°`)╮ 页面崩溃啦 ~'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "/favicon.ico"); document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } }); ``` 2. 其中的 `favicon.ico` 为正常显示图标，`funny.ico` 为用户切换后的图标，需要你自己设置🙈 # 五添加动态诗词 1. 采用的是[今日诗词](https://www.jinrishici.com/)，每次返回一句诗词，根据时间、地点、天气、事件智能推荐。官网 [API 文档](https://www.jinrishici.com/doc/)，在 `themes/你选择的主题/layout/_partial/head.ejs` 添加下面的一行代码： ```html ``` 2. 如果不成功，请将主题配置文件`subtitle`的值为`false`🙈 # 六添加动态科技线条背景 1. 在`themes/你选择的主题/layout/layout.ejs`文件中添加： ```html ``` 2. `color`表示线条颜色，`opactity`表示线条透明度，`count`表示线条总数量，都可自己修改~ # 七添加雪花飘落效果 1. 在`themes/你选择的主题/source/js`下新建文件`snow.js`，添加： ```js (function($){ $.fn.snow = function(options){ var $flake = $('

').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */ }, options = $.extend({}, defaults, options); var interval= setInterval( function(){ var startPositionLeft = Math.random() * documentWidth - 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight - 200, endPositionLeft = startPositionLeft - 500 + Math.random() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake.clone().appendTo('body').css({ left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: options.flakeColor }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall,'linear',function(){ $(this).remove() }); }, options.newOn); }; })(jQuery); $(function(){ $.fn.snow({ minSize: 5, // 定义雪花最小尺寸 maxSize: 50, // 定义雪花最大尺寸 newOn: 300 // 定义密集程度，数字越小越密集 }); }); ``` 2. 在`themes/你选择的主题/layout/layout.ejs`下添加： ```html ``` # 八添加评论系统 ## 来必力 > 官网地址：[来必力 (livere.com)](https://livere.com/) 1. 点击导航栏的安装，选择免费版本，注册填写网站信息，填写完成后会给你一段代码把`uid`复制下来： ![image-20210818214425206](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa5c617a7ad04dce85b9972db9721279~tplv-k3u1fbpfcp-zoom-1.image) 2. 在主题配置下修改： ```yaml # Livere comment configuration, the default is not activated # Livere 来必力评论模块的配置，默认为不激活 livere: enable: true # true为开启评论系统 uid: # 这里填写上一步获取的uid ``` ## Valine > 官网地址：[介绍 | Valine 一款快速、简洁且高效的无后端评论系统。](https://valine.js.org/) 1. 注册并[登录LeanCloud](https://console.leancloud.cn/login?from=%2Fapps)，创建应用并在设置页面找到**应用Keys**，复制其中的`APPID`和`APPKEY`： ![image-20210818214854104](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3106eec04c5046609d1da6d565915f43~tplv-k3u1fbpfcp-zoom-1.image) 2. 修改主题配置文件： ```yaml # The configuration of the Valine comment module is not activated by default. # To use it, activate the configuration item and set appId and appKey. # Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey. valine: enable: false # true即为开启评论系统 appId: # 此处填写你的appid appKey: # 此处填写你的appkey notify: false verify: false visitor: true avatar: 'mm' pageSize: 10 placeholder: 'test test' # Comment Box placeholder background: # 设置评论区背景图 ``` # 九添加百度统计 > 官网地址：[百度统计——领先的中文网站分析平台 (baidu.com)](https://tongji.baidu.com/web/welcome/login) 1. 注册登陆后，在管理界面网站列表添加自己的网站地址 2. 接着点击代码获取，复制该代码 ![image-20210818215422699](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3888fbc862d9450197ae9d60ecd1a37a~tplv-k3u1fbpfcp-zoom-1.image) 3. 接着在`themes/你选择的主题/layout/_partial`下新建文件` baidu-analytics.ejs`，里面粘贴你刚复制的代码~ 4. 修改主题文件夹下的配置文件`baidu_analytic:`，将你的`key`（图中马赛克部分）填进去即可。 # 十添加各种网页小挂件 - http://abowman.com/ 里面有很多有趣的小挂件，可以养养鱼、龟、狗、仓鼠等各式各样的虚拟宠物，直接复制代码就可以用。 - http://www.revolvermaps.com/ 它提供网站访客地理信息，可以以2D、3D等形式显示。 - http://www.amazingcounters.com/ 免费网站计数器，有非常多的样式供你选。 - https://www.seniverse.com/widget/get 心知天气提供基于Web的免费天气插件，可以为你的网站添加一项简洁美观的天气预报功能，并自动适配PC和手机上的浏览。 # 最后的主题推荐 - [next](https://github.com/iissnan/hexo-theme-next) - [yilia](https://github.com/litten/hexo-theme-yilia) - [matery](https://github.com/blinkfox/hexo-theme-matery) - [butterfly](https://github.com/jerryc127/hexo-theme-butterfly) - 我正在用的 [even](https://github.com/ahonn/hexo-theme-even) --- 真的写了很长时间，xdm点个赞呗😆 这两天内会更新博客的域名绑定和SEO优化~ 欢迎关注交流更多有趣文章：[Mancuoj 的个人主页](https://juejin.cn/user/3466105460624760/posts)