不同主题可能方法有些不同，相同主题不同版本，配置方法也有所差异！阅读主题文档非常重要
有一定的前端基础，了解 HTML、CSS、JS，了解 CSS 预处理语言 Sass、Less、Stylus，搞懂 hexo 的目录结构
选定主题，认真阅读主题文档，分析主题目录结构，了解每个文件是对应网页哪个部分的，认真阅读美化教程，美化教程本质上只为你提供核心代码和思路，具体代码要添加到哪个地方，需要你自己搞懂主题结构，添加到需要的、合适的位置

添加卡通人物（看板娘）

发现好多博客的右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，是不是也想为自己主题添加呢

该项目地址https://github.com/EYHN/hexo-helper-live2d

也可以安装官方提供的插件

npm install --save hexo-helper-live2d

输入以下命令，下载相应的模型，将packagename更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客

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

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

设置好过后我们就拥有了一个卡通人物

添加鼠标点击爱心效果

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

1	<script type="text/javascript" src="//abbw.gitee.io/asset/js/click_love.js"></script>

添加鼠标点击显示字体效果

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

1 2	<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="//abbw.gitee.io/asset/js/click_text.js"></script>

添加鼠标点击烟花爆炸效果

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

1
2
3

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="//abbw.gitee.io/asset/js/fireworks.js"></script>

添加彩色滚动变换字体

在你想要添加彩色滚动变换字体的地方写入以下代码即可，其中文字可自行更改

<div id="binft"></div>
  <script>
    var binft = function (r) {
      function t() {
        return b[Math.floor(Math.random() * b.length)]
      }  
      function e() {
        return String.fromCharCode(94 * Math.random() + 33)
      }
      function n(r) {
        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
          var l = document.createElement("span");
          l.textContent = e(), l.style.color = t(), n.appendChild(l)
        }
        return n
      }
      function i() {
        var t = o[c.skillI];
        c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
      }
      var l = "",
      o = ["青青陵上柏，磊磊涧中石。", "人生天地间，忽如远行客。","斗酒相娱乐，聊厚不为薄。", "驱车策驽马，游戏宛与洛。","洛中何郁郁，冠带自相索。","长衢罗夹巷，王侯多第宅。","两宫遥相望，双阙百余尺。","极宴娱心意，戚戚何所迫？"].map(function (r) {
      return r + ""
      }),
      a = 2,
      g = 1,
      s = 5,
      d = 75,
      b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
      c = {
        text: "",
        prefixP: -s,
        skillI: 0,
        skillP: 0,
        direction: "forward",
        delay: a,
        step: g
      };
      i()
      };
      binft(document.getElementById('binft'));
  </script>

浏览器网页标题恶搞

首先在目录 \themes\主题目录\source\js 下新建一个 FunnyTitle.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);
    }
});

其中 funny.ico 是用户切换到其他标签后你网站的图标，favicon.ico 是正常图标，然后在 \themes\主题目录\layout\layout.ejs 文件中添加如下代码

1	<script type="text/javascript" src="//abbw.gitee.io/asset/js/FunnyTitle.js"></script>

背景添加动态线条效果

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

1	<script async src="//abbw.gitee.io/asset/js/canvas-nest.min.js" color="0,0,255" opacity='0.5' zIndex="-2" count="200"></script>

color：表示线条颜色，三个数字分别为(R,G,B)，默认：（0,0,0）
opacity：表示线条透明度（0~1），默认：0.5
count：表示线条的总数量，默认：150
zIndex：表示背景的z-index属性，css属性用于控制所在层的位置，默认：-1

添加人体时钟等有趣的挂件

无意中发现了个有趣的人体时钟 HONE HONE CLOCK，作者是个日本人，点击此处访问作者博客，点击此处在作者原博客上查看动态样式，点击此处查看动态大图，如果你的博客上有合适的地方，加上一个人体时钟会很有趣的

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

<!--人体时钟背景透明-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

<!--人体时钟背景白-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>

添加网站雪花飘落效果

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

<!--样式一-->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="//abbw.gitee.io/asset/js/snow.js"></script>

<!--样式二-->
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="//abbw.gitee.io/asset/js/snow2.js"></script>

添加背景动态彩带效果

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

<!-- 样式一（鼠标点击更换样式）-->
<script type="text/javascript" src="//abbw.gitee.io/asset/js/Ribbon.js"></script>

<!-- 样式二（飘动的彩带）-->
<script type="text/javascript" src="//abbw.gitee.io/asset/js/Ribbon2.js"></script>

添加背景代码雨特效

在 \themes\主题目录\layout\layout.ejs 文件末尾添加以下代码

1 2	<link rel="stylesheet" href="//abbw.gitee.io/asset/css/DigitalRain.css"> <script type="text/javascript" src="//abbw.gitee.io/asset/js/DigitalRain.js"></script>

部分代码收集于网络，仅供参考学习