Hexo博客主题Next添加动态线条背景canvas_nest

​欢迎光临我的博客查看最新文章: https://river106.cn

Hexo 版本：5.4.0
Next版本：8.7.1

为了美化Hexo博客，可以给博客添加动态线条背景，这里使用canvas_nest，github: https://github.com/theme-next/theme-next-canvas-nest。

1、在 source/_data/footer.njk(没有目录或文件可新增) 文件中添加以下代码：

<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

可以将canvas-nest.js下载到本地，放置在themes/next/source/js/目录下,内容调整为：

<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="/js/canvas_nest.js"></script>

2、修改配置：themes/next/_config.yml

custom_file_path:
  footer: source/_data/footer.njk

同样地，如果再添加第三方主题，也可以同样配置，比如我们点击时显示爱心。
在themes/next/source/js/下新建js文件click_love.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: 50%;-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)

然后在source_data\footer.njk 中添加如下代码即可：

<script type="text/javascript" src="/js/click_love.js"></script>

添加好后重启服务查看效果：