【Hexo】全面改造美化属于你的个性化博客

关于Hexo的一切 —— 我的Hexo专栏

零 前言

继上篇， 本文将讲述一些博客主题的美化、实用功能的添加。

比如添加评论系统，百度统计，雪花飘落，添加live2d看板娘，鼠标点击显示字体效果，烟花爆炸效果等等等等……

提示：不同主题的添加方法可能有些不同，相同主题的不同版本配置方法也可能有所差异。

个性化还是需要一定的前端基础，了解 HTML、CSS、JS，了解 CSS 预处理语言 Sass、Less，搞懂Hexo的文件目录结构。

不过只要我们选好主题，认真阅读主题文档，大概了解每个文件是对应网页哪个部分的，然后认真阅读本篇教程，相信你一定可以的💪🏻💪🏻

可以根据目录跳转到你感兴趣的地方~

一 添加live2d看板娘

项目地址：EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)

1. 在右下角添加一个萌萌的看板娘，命令行输入 npm install --save hexo-helper-live2d 获取插件。

2. 输入 npm install [name] 即可下载相应的模型，将 [name] 更换成模型名称即可，更多模型选择点击获取，各个模型的预览请访问原作者的博客。

3. 打开站点目录下的 _config.yml 文件，添加如下代码：

    live2d:
      enable: true
      scriptFrom: local
      model:
        use: live2d-widget-model-haruto # 模型选择
      display:
        position: right     # 模型位置
        width: 150          # 模型宽度
        height: 300         # 模型高度
      mobile:
        show: false         # 是否在手机端显示
   

4. 设置好后我们就拥有了一个小可爱😇
   

二 添加鼠标点击效果

爱心效果

1. 在 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);
   
   

2. 在themes/你选择的主题/layout/layout.ejs下添加：

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

3. 完成以上，当我们点击鼠标就可以看见爱心的特效了

   

文字效果

1. 在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