跳过正文
hugo【blowfish】
  1. 运维日记/

hugo【blowfish】

·4946 字·10 分钟·
目录
hugo - 这篇文章属于一个选集。
§ 2: 本文

Hugo 主题 Blowfish 是一款简单且轻量级的博客主题。

页脚:Badges
#

效果呈现
#

blowfish badges

extend-footer.html
#

  1. 创建代码: static/js/anime.min.js
<div style="text-align: center; margin: 0 auto; max-width: 100%;">
  <p
    class="text-sm text-neutral-500 dark:text-neutral-400"
    style="margin: 0 auto; text-align: center;"
  >
    © 2025 artoio.com<br />
    依据
    <a
      href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh"
      target="_blank"
      rel="noopener noreferrer"
      style="color: #83B81A; font-weight: bold;"
    >
      CC BY-NC-SA 4.0
    </a>
    许可证进行授权,转载请附上出处链接。
  </p>

  <div
    class="github-badge"
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0.5rem auto;
      max-width: 100%;
  "
  >
    <a href="https://gohugo.io" aria-label="Hugo构建">
      <img
        alt="Static Badge"
        src="https://img.shields.io/badge/%E6%9E%84%E5%BB%BA-Hugo-%23FF4088?logo=hugo"
        loading="lazy"
      />
    </a>
    <a href="https://blowfish.page" aria-label="Blowfish主题">
      <img
        alt="Static Badge"
        src="https://img.shields.io/badge/%E4%B8%BB%E9%A2%98-Blowfish-%23F64935?style=flat"
        loading="lazy"
      />
    </a>
    <!-- <a href="" aria-label="托管于Vercel">
      <img alt="Static Badge" src="https://img.shields.io/badge/%E4%B8%BB%E6%9C%BA-Vercel-%2342B883?style=flat&logo=vercel" loading="lazy">
    </a> -->
    <a href="https://cloudflare.com" aria-label="服务托管Cloudflare">
      <img
        alt="Static Badge"
        src="https://img.shields.io/badge/%E6%89%98%E7%AE%A1-Cloudflare-%23F38020?style=flat&logo=cloudflare&color=%23F38020"
        loading="lazy"
      />
    </a>
    <a href="https://github.com" aria-label="代码托管GitHub">
      <img
        alt="Static Badge"
        src="https://img.shields.io/badge/%E4%BB%A3%E7%A0%81-GitHub-%2300ADD8?style=flat&logo=github"
        loading="lazy"
      />
    </a>
    <a href="https://img.shields.io" aria-label="图片来自Freepik">
      <img
        alt="Static Badge"
        src="https://img.shields.io/badge/Photo-Freepik-blue?style=flat&logo=freepik&color=%231273EB"
        loading="lazy"
      />
    </a>
  </div>

  <section
    class="text-sm text-neutral-500 dark:text-neutral-400"
    style="margin: 0 auto; text-align: center;"
  >
    <span id="span_dt_dt">站点运行 0 天 0 小时 0 分 0秒</span>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const startDate = new Date("2024-06-01T00:00:00");

        function updateUptime() {
          const now = new Date();
          const diff = now - startDate;

          const days = Math.floor(diff / (1000 * 60 * 60 * 24));
          const hours = Math.floor(
            (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
          const seconds = Math.floor((diff % (1000 * 60)) / 1000);

          document.getElementById(
            "span_dt_dt"
          ).textContent = `站点运行 ${days}${hours} 小时 ${minutes}${seconds} 秒`;

          setTimeout(updateUptime, 1000);
        }

        updateUptime();
      });
    </script>
  </section>
</div>
  1. 自定义badges

打开网站 shields.io;点击Static Badge。参数如下,配置完成后,点击Execte

鼠标点击:烟花
#

感谢作者:cpython666

效果呈现
#

anime.min.js
#

  • 创建代码:static/js/anime.min.js
/*
 2017 Julian Garnier
 Released under the MIT license
*/
var $jscomp = {
  scope: {},
};
$jscomp.defineProperty =
  "function" == typeof Object.defineProperties
    ? Object.defineProperty
    : function (e, r, p) {
        if (p.get || p.set)
          throw new TypeError("ES3 does not support getters and setters.");
        e != Array.prototype && e != Object.prototype && (e[r] = p.value);
      };
$jscomp.getGlobal = function (e) {
  return "undefined" != typeof window && window === e
    ? e
    : "undefined" != typeof global && null != global
    ? global
    : e;
};
$jscomp.global = $jscomp.getGlobal(this);
$jscomp.SYMBOL_PREFIX = "jscomp_symbol_";
$jscomp.initSymbol = function () {
  $jscomp.initSymbol = function () {};
  $jscomp.global.Symbol || ($jscomp.global.Symbol = $jscomp.Symbol);
};
$jscomp.symbolCounter_ = 0;
$jscomp.Symbol = function (e) {
  return $jscomp.SYMBOL_PREFIX + (e || "") + $jscomp.symbolCounter_++;
};
$jscomp.initSymbolIterator = function () {
  $jscomp.initSymbol();
  var e = $jscomp.global.Symbol.iterator;
  e || (e = $jscomp.global.Symbol.iterator = $jscomp.global.Symbol("iterator"));
  "function" != typeof Array.prototype[e] &&
    $jscomp.defineProperty(Array.prototype, e, {
      configurable: !0,
      writable: !0,
      value: function () {
        return $jscomp.arrayIterator(this);
      },
    });
  $jscomp.initSymbolIterator = function () {};
};
$jscomp.arrayIterator = function (e) {
  var r = 0;
  return $jscomp.iteratorPrototype(function () {
    return r < e.length
      ? {
          done: !1,
          value: e[r++],
        }
      : {
          done: !0,
        };
  });
};
$jscomp.iteratorPrototype = function (e) {
  $jscomp.initSymbolIterator();
  e = {
    next: e,
  };
  e[$jscomp.global.Symbol.iterator] = function () {
    return this;
  };
  return e;
};
$jscomp.array = $jscomp.array || {};
$jscomp.iteratorFromArray = function (e, r) {
  $jscomp.initSymbolIterator();
  e instanceof String && (e += "");
  var p = 0,
    m = {
      next: function () {
        if (p < e.length) {
          var u = p++;
          return {
            value: r(u, e[u]),
            done: !1,
          };
        }
        m.next = function () {
          return {
            done: !0,
            value: void 0,
          };
        };
        return m.next();
      },
    };
  m[Symbol.iterator] = function () {
    return m;
  };
  return m;
};
$jscomp.polyfill = function (e, r, p, m) {
  if (r) {
    p = $jscomp.global;
    e = e.split(".");
    for (m = 0; m < e.length - 1; m++) {
      var u = e[m];
      u in p || (p[u] = {});
      p = p[u];
    }
    e = e[e.length - 1];
    m = p[e];
    r = r(m);
    r != m &&
      null != r &&
      $jscomp.defineProperty(p, e, {
        configurable: !0,
        writable: !0,
        value: r,
      });
  }
};
$jscomp.polyfill(
  "Array.prototype.keys",
  function (e) {
    return e
      ? e
      : function () {
          return $jscomp.iteratorFromArray(this, function (e) {
            return e;
          });
        };
  },
  "es6-impl",
  "es3"
);
var $jscomp$this = this;
(function (e, r) {
  "function" === typeof define && define.amd
    ? define([], r)
    : "object" === typeof module && module.exports
    ? (module.exports = r())
    : (e.anime = r());
})(this, function () {
  function e(a) {
    if (!h.col(a))
      try {
        return document.querySelectorAll(a);
      } catch (c) {}
  }

  function r(a, c) {
    for (
      var d = a.length,
        b = 2 <= arguments.length ? arguments[1] : void 0,
        f = [],
        n = 0;
      n < d;
      n++
    )
      if (n in a) {
        var k = a[n];
        c.call(b, k, n, a) && f.push(k);
      }
    return f;
  }

  function p(a) {
    return a.reduce(function (a, d) {
      return a.concat(h.arr(d) ? p(d) : d);
    }, []);
  }

  function m(a) {
    if (h.arr(a)) return a;
    h.str(a) && (a = e(a) || a);
    return a instanceof NodeList || a instanceof HTMLCollection
      ? [].slice.call(a)
      : [a];
  }

  function u(a, c) {
    return a.some(function (a) {
      return a === c;
    });
  }

  function C(a) {
    var c = {},
      d;
    for (d in a) c[d] = a[d];
    return c;
  }

  function D(a, c) {
    var d = C(a),
      b;
    for (b in a) d[b] = c.hasOwnProperty(b) ? c[b] : a[b];
    return d;
  }

  function z(a, c) {
    var d = C(a),
      b;
    for (b in c) d[b] = h.und(a[b]) ? c[b] : a[b];
    return d;
  }

  function T(a) {
    a = a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (a, c, d, k) {
      return c + c + d + d + k + k;
    });
    var c = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
    a = parseInt(c[1], 16);
    var d = parseInt(c[2], 16),
      c = parseInt(c[3], 16);
    return "rgba(" + a + "," + d + "," + c + ",1)";
  }

  function U(a) {
    function c(a, c, b) {
      0 > b && (b += 1);
      1 < b && --b;
      return b < 1 / 6
        ? a + 6 * (c - a) * b
        : 0.5 > b
        ? c
        : b < 2 / 3
        ? a + (c - a) * (2 / 3 - b) * 6
        : a;
    }
    var d =
      /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a) ||
      /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(a);
    a = parseInt(d[1]) / 360;
    var b = parseInt(d[2]) / 100,
      f = parseInt(d[3]) / 100,
      d = d[4] || 1;
    if (0 == b) f = b = a = f;
    else {
      var n = 0.5 > f ? f * (1 + b) : f + b - f * b,
        k = 2 * f - n,
        f = c(k, n, a + 1 / 3),
        b = c(k, n, a);
      a = c(k, n, a - 1 / 3);
    }
    return "rgba(" + 255 * f + "," + 255 * b + "," + 255 * a + "," + d + ")";
  }

  function y(a) {
    if (
      (a =
        /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(
          a
        ))
    )
      return a[2];
  }

  function V(a) {
    if (-1 < a.indexOf("translate") || "perspective" === a) return "px";
    if (-1 < a.indexOf("rotate") || -1 < a.indexOf("skew")) return "deg";
  }

  function I(a, c) {
    return h.fnc(a) ? a(c.target, c.id, c.total) : a;
  }

  function E(a, c) {
    if (c in a.style)
      return (
        getComputedStyle(a).getPropertyValue(
          c.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
        ) || "0"
      );
  }

  function J(a, c) {
    if (h.dom(a) && u(W, c)) return "transform";
    if (h.dom(a) && (a.getAttribute(c) || (h.svg(a) && a[c])))
      return "attribute";
    if (h.dom(a) && "transform" !== c && E(a, c)) return "css";
    if (null != a[c]) return "object";
  }

  function X(a, c) {
    var d = V(c),
      d = -1 < c.indexOf("scale") ? 1 : 0 + d;
    a = a.style.transform;
    if (!a) return d;
    for (var b = [], f = [], n = [], k = /(\w+)\((.+?)\)/g; (b = k.exec(a)); )
      f.push(b[1]), n.push(b[2]);
    a = r(n, function (a, b) {
      return f[b] === c;
    });
    return a.length ? a[0] : d;
  }

  function K(a, c) {
    switch (J(a, c)) {
      case "transform":
        return X(a, c);
      case "css":
        return E(a, c);
      case "attribute":
        return a.getAttribute(c);
    }
    return a[c] || 0;
  }

  function L(a, c) {
    var d = /^(\*=|\+=|-=)/.exec(a);
    if (!d) return a;
    var b = y(a) || 0;
    c = parseFloat(c);
    a = parseFloat(a.replace(d[0], ""));
    switch (d[0][0]) {
      case "+":
        return c + a + b;
      case "-":
        return c - a + b;
      case "*":
        return c * a + b;
    }
  }

  function F(a, c) {
    return Math.sqrt(Math.pow(c.x - a.x, 2) + Math.pow(c.y - a.y, 2));
  }

  function M(a) {
    a = a.points;
    for (var c = 0, d, b = 0; b < a.numberOfItems; b++) {
      var f = a.getItem(b);
      0 < b && (c += F(d, f));
      d = f;
    }
    return c;
  }

  function N(a) {
    if (a.getTotalLength) return a.getTotalLength();
    switch (a.tagName.toLowerCase()) {
      case "circle":
        return 2 * Math.PI * a.getAttribute("r");
      case "rect":
        return 2 * a.getAttribute("width") + 2 * a.getAttribute("height");
      case "line":
        return F(
          {
            x: a.getAttribute("x1"),
            y: a.getAttribute("y1"),
          },
          {
            x: a.getAttribute("x2"),
            y: a.getAttribute("y2"),
          }
        );
      case "polyline":
        return M(a);
      case "polygon":
        var c = a.points;
        return M(a) + F(c.getItem(c.numberOfItems - 1), c.getItem(0));
    }
  }

  function Y(a, c) {
    function d(b) {
      b = void 0 === b ? 0 : b;
      return a.el.getPointAtLength(1 <= c + b ? c + b : 0);
    }
    var b = d(),
      f = d(-1),
      n = d(1);
    switch (a.property) {
      case "x":
        return b.x;
      case "y":
        return b.y;
      case "angle":
        return (180 * Math.atan2(n.y - f.y, n.x - f.x)) / Math.PI;
    }
  }

  function O(a, c) {
    var d = /-?\d*\.?\d+/g,
      b;
    b = h.pth(a) ? a.totalLength : a;
    if (h.col(b))
      if (h.rgb(b)) {
        var f = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(b);
        b = f ? "rgba(" + f[1] + ",1)" : b;
      } else b = h.hex(b) ? T(b) : h.hsl(b) ? U(b) : void 0;
    else
      (f = (f = y(b)) ? b.substr(0, b.length - f.length) : b),
        (b = c && !/\s/g.test(b) ? f + c : f);
    b += "";
    return {
      original: b,
      numbers: b.match(d) ? b.match(d).map(Number) : [0],
      strings: h.str(a) || c ? b.split(d) : [],
    };
  }

  function P(a) {
    a = a ? p(h.arr(a) ? a.map(m) : m(a)) : [];
    return r(a, function (a, d, b) {
      return b.indexOf(a) === d;
    });
  }

  function Z(a) {
    var c = P(a);
    return c.map(function (a, b) {
      return {
        target: a,
        id: b,
        total: c.length,
      };
    });
  }

  function aa(a, c) {
    var d = C(c);
    if (h.arr(a)) {
      var b = a.length;
      2 !== b || h.obj(a[0])
        ? h.fnc(c.duration) || (d.duration = c.duration / b)
        : (a = {
            value: a,
          });
    }
    return m(a)
      .map(function (a, b) {
        b = b ? 0 : c.delay;
        a =
          h.obj(a) && !h.pth(a)
            ? a
            : {
                value: a,
              };
        h.und(a.delay) && (a.delay = b);
        return a;
      })
      .map(function (a) {
        return z(a, d);
      });
  }

  function ba(a, c) {
    var d = {},
      b;
    for (b in a) {
      var f = I(a[b], c);
      h.arr(f) &&
        ((f = f.map(function (a) {
          return I(a, c);
        })),
        1 === f.length && (f = f[0]));
      d[b] = f;
    }
    d.duration = parseFloat(d.duration);
    d.delay = parseFloat(d.delay);
    return d;
  }

  function ca(a) {
    return h.arr(a) ? A.apply(this, a) : Q[a];
  }

  function da(a, c) {
    var d;
    return a.tweens.map(function (b) {
      b = ba(b, c);
      var f = b.value,
        e = K(c.target, a.name),
        k = d ? d.to.original : e,
        k = h.arr(f) ? f[0] : k,
        w = L(h.arr(f) ? f[1] : f, k),
        e = y(w) || y(k) || y(e);
      b.from = O(k, e);
      b.to = O(w, e);
      b.start = d ? d.end : a.offset;
      b.end = b.start + b.delay + b.duration;
      b.easing = ca(b.easing);
      b.elasticity = (1e3 - Math.min(Math.max(b.elasticity, 1), 999)) / 1e3;
      b.isPath = h.pth(f);
      b.isColor = h.col(b.from.original);
      b.isColor && (b.round = 1);
      return (d = b);
    });
  }

  function ea(a, c) {
    return r(
      p(
        a.map(function (a) {
          return c.map(function (b) {
            var c = J(a.target, b.name);
            if (c) {
              var d = da(b, a);
              b = {
                type: c,
                property: b.name,
                animatable: a,
                tweens: d,
                duration: d[d.length - 1].end,
                delay: d[0].delay,
              };
            } else b = void 0;
            return b;
          });
        })
      ),
      function (a) {
        return !h.und(a);
      }
    );
  }

  function R(a, c, d, b) {
    var f = "delay" === a;
    return c.length
      ? (f ? Math.min : Math.max).apply(
          Math,
          c.map(function (b) {
            return b[a];
          })
        )
      : f
      ? b.delay
      : d.offset + b.delay + b.duration;
  }

  function fa(a) {
    var c = D(ga, a),
      d = D(S, a),
      b = Z(a.targets),
      f = [],
      e = z(c, d),
      k;
    for (k in a)
      e.hasOwnProperty(k) ||
        "targets" === k ||
        f.push({
          name: k,
          offset: e.offset,
          tweens: aa(a[k], d),
        });
    a = ea(b, f);
    return z(c, {
      children: [],
      animatables: b,
      animations: a,
      duration: R("duration", a, c, d),
      delay: R("delay", a, c, d),
    });
  }

  function q(a) {
    function c() {
      return (
        window.Promise &&
        new Promise(function (a) {
          return (p = a);
        })
      );
    }

    function d(a) {
      return g.reversed ? g.duration - a : a;
    }

    function b(a) {
      for (var b = 0, c = {}, d = g.animations, f = d.length; b < f; ) {
        var e = d[b],
          k = e.animatable,
          h = e.tweens,
          n = h.length - 1,
          l = h[n];
        n &&
          (l =
            r(h, function (b) {
              return a < b.end;
            })[0] || l);
        for (
          var h =
              Math.min(Math.max(a - l.start - l.delay, 0), l.duration) /
              l.duration,
            w = isNaN(h) ? 1 : l.easing(h, l.elasticity),
            h = l.to.strings,
            p = l.round,
            n = [],
            m = void 0,
            m = l.to.numbers.length,
            t = 0;
          t < m;
          t++
        ) {
          var x = void 0,
            x = l.to.numbers[t],
            q = l.from.numbers[t],
            x = l.isPath ? Y(l.value, w * x) : q + w * (x - q);
          p && ((l.isColor && 2 < t) || (x = Math.round(x * p) / p));
          n.push(x);
        }
        if ((l = h.length))
          for (m = h[0], w = 0; w < l; w++)
            (p = h[w + 1]),
              (t = n[w]),
              isNaN(t) || (m = p ? m + (t + p) : m + (t + " "));
        else m = n[0];
        ha[e.type](k.target, e.property, m, c, k.id);
        e.currentValue = m;
        b++;
      }
      if ((b = Object.keys(c).length))
        for (d = 0; d < b; d++)
          H ||
            (H = E(document.body, "transform")
              ? "transform"
              : "-webkit-transform"),
            (g.animatables[d].target.style[H] = c[d].join(" "));
      g.currentTime = a;
      g.progress = (a / g.duration) * 100;
    }

    function f(a) {
      if (g[a]) g[a](g);
    }

    function e() {
      g.remaining && !0 !== g.remaining && g.remaining--;
    }

    function k(a) {
      var k = g.duration,
        n = g.offset,
        w = n + g.delay,
        r = g.currentTime,
        x = g.reversed,
        q = d(a);
      if (g.children.length) {
        var u = g.children,
          v = u.length;
        if (q >= g.currentTime) for (var G = 0; G < v; G++) u[G].seek(q);
        else for (; v--; ) u[v].seek(q);
      }
      if (q >= w || !k) g.began || ((g.began = !0), f("begin")), f("run");
      if (q > n && q < k) b(q);
      else if (
        (q <= n && 0 !== r && (b(0), x && e()), (q >= k && r !== k) || !k)
      )
        b(k), x || e();
      f("update");
      a >= k &&
        (g.remaining
          ? ((t = h), "alternate" === g.direction && (g.reversed = !g.reversed))
          : (g.pause(),
            g.completed ||
              ((g.completed = !0),
              f("complete"),
              "Promise" in window && (p(), (m = c())))),
        (l = 0));
    }
    a = void 0 === a ? {} : a;
    var h,
      t,
      l = 0,
      p = null,
      m = c(),
      g = fa(a);
    g.reset = function () {
      var a = g.direction,
        c = g.loop;
      g.currentTime = 0;
      g.progress = 0;
      g.paused = !0;
      g.began = !1;
      g.completed = !1;
      g.reversed = "reverse" === a;
      g.remaining = "alternate" === a && 1 === c ? 2 : c;
      b(0);
      for (a = g.children.length; a--; ) g.children[a].reset();
    };
    g.tick = function (a) {
      h = a;
      t || (t = h);
      k((l + h - t) * q.speed);
    };
    g.seek = function (a) {
      k(d(a));
    };
    g.pause = function () {
      var a = v.indexOf(g);
      -1 < a && v.splice(a, 1);
      g.paused = !0;
    };
    g.play = function () {
      g.paused &&
        ((g.paused = !1),
        (t = 0),
        (l = d(g.currentTime)),
        v.push(g),
        B || ia());
    };
    g.reverse = function () {
      g.reversed = !g.reversed;
      t = 0;
      l = d(g.currentTime);
    };
    g.restart = function () {
      g.pause();
      g.reset();
      g.play();
    };
    g.finished = m;
    g.reset();
    g.autoplay && g.play();
    return g;
  }
  var ga = {
      update: void 0,
      begin: void 0,
      run: void 0,
      complete: void 0,
      loop: 1,
      direction: "normal",
      autoplay: !0,
      offset: 0,
    },
    S = {
      duration: 1e3,
      delay: 0,
      easing: "easeOutElastic",
      elasticity: 500,
      round: 0,
    },
    W =
      "translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY perspective".split(
        " "
      ),
    H,
    h = {
      arr: function (a) {
        return Array.isArray(a);
      },
      obj: function (a) {
        return -1 < Object.prototype.toString.call(a).indexOf("Object");
      },
      pth: function (a) {
        return h.obj(a) && a.hasOwnProperty("totalLength");
      },
      svg: function (a) {
        return a instanceof SVGElement;
      },
      dom: function (a) {
        return a.nodeType || h.svg(a);
      },
      str: function (a) {
        return "string" === typeof a;
      },
      fnc: function (a) {
        return "function" === typeof a;
      },
      und: function (a) {
        return "undefined" === typeof a;
      },
      hex: function (a) {
        return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a);
      },
      rgb: function (a) {
        return /^rgb/.test(a);
      },
      hsl: function (a) {
        return /^hsl/.test(a);
      },
      col: function (a) {
        return h.hex(a) || h.rgb(a) || h.hsl(a);
      },
    },
    A = (function () {
      function a(a, d, b) {
        return (((1 - 3 * b + 3 * d) * a + (3 * b - 6 * d)) * a + 3 * d) * a;
      }
      return function (c, d, b, f) {
        if (0 <= c && 1 >= c && 0 <= b && 1 >= b) {
          var e = new Float32Array(11);
          if (c !== d || b !== f)
            for (var k = 0; 11 > k; ++k) e[k] = a(0.1 * k, c, b);
          return function (k) {
            if (c === d && b === f) return k;
            if (0 === k) return 0;
            if (1 === k) return 1;
            for (var h = 0, l = 1; 10 !== l && e[l] <= k; ++l) h += 0.1;
            --l;
            var l = h + ((k - e[l]) / (e[l + 1] - e[l])) * 0.1,
              n =
                3 * (1 - 3 * b + 3 * c) * l * l +
                2 * (3 * b - 6 * c) * l +
                3 * c;
            if (0.001 <= n) {
              for (h = 0; 4 > h; ++h) {
                n =
                  3 * (1 - 3 * b + 3 * c) * l * l +
                  2 * (3 * b - 6 * c) * l +
                  3 * c;
                if (0 === n) break;
                var m = a(l, c, b) - k,
                  l = l - m / n;
              }
              k = l;
            } else if (0 === n) k = l;
            else {
              var l = h,
                h = h + 0.1,
                g = 0;
              do
                (m = l + (h - l) / 2),
                  (n = a(m, c, b) - k),
                  0 < n ? (h = m) : (l = m);
              while (1e-7 < Math.abs(n) && 10 > ++g);
              k = m;
            }
            return a(k, d, f);
          };
        }
      };
    })(),
    Q = (function () {
      function a(a, b) {
        return 0 === a || 1 === a
          ? a
          : -Math.pow(2, 10 * (a - 1)) *
              Math.sin(
                (2 * (a - 1 - (b / (2 * Math.PI)) * Math.asin(1)) * Math.PI) / b
              );
      }
      var c = "Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),
        d = {
          In: [
            [0.55, 0.085, 0.68, 0.53],
            [0.55, 0.055, 0.675, 0.19],
            [0.895, 0.03, 0.685, 0.22],
            [0.755, 0.05, 0.855, 0.06],
            [0.47, 0, 0.745, 0.715],
            [0.95, 0.05, 0.795, 0.035],
            [0.6, 0.04, 0.98, 0.335],
            [0.6, -0.28, 0.735, 0.045],
            a,
          ],
          Out: [
            [0.25, 0.46, 0.45, 0.94],
            [0.215, 0.61, 0.355, 1],
            [0.165, 0.84, 0.44, 1],
            [0.23, 1, 0.32, 1],
            [0.39, 0.575, 0.565, 1],
            [0.19, 1, 0.22, 1],
            [0.075, 0.82, 0.165, 1],
            [0.175, 0.885, 0.32, 1.275],
            function (b, c) {
              return 1 - a(1 - b, c);
            },
          ],
          InOut: [
            [0.455, 0.03, 0.515, 0.955],
            [0.645, 0.045, 0.355, 1],
            [0.77, 0, 0.175, 1],
            [0.86, 0, 0.07, 1],
            [0.445, 0.05, 0.55, 0.95],
            [1, 0, 0, 1],
            [0.785, 0.135, 0.15, 0.86],
            [0.68, -0.55, 0.265, 1.55],
            function (b, c) {
              return 0.5 > b ? a(2 * b, c) / 2 : 1 - a(-2 * b + 2, c) / 2;
            },
          ],
        },
        b = {
          linear: A(0.25, 0.25, 0.75, 0.75),
        },
        f = {},
        e;
      for (e in d)
        (f.type = e),
          d[f.type].forEach(
            (function (a) {
              return function (d, f) {
                b["ease" + a.type + c[f]] = h.fnc(d)
                  ? d
                  : A.apply($jscomp$this, d);
              };
            })(f)
          ),
          (f = {
            type: f.type,
          });
      return b;
    })(),
    ha = {
      css: function (a, c, d) {
        return (a.style[c] = d);
      },
      attribute: function (a, c, d) {
        return a.setAttribute(c, d);
      },
      object: function (a, c, d) {
        return (a[c] = d);
      },
      transform: function (a, c, d, b, f) {
        b[f] || (b[f] = []);
        b[f].push(c + "(" + d + ")");
      },
    },
    v = [],
    B = 0,
    ia = (function () {
      function a() {
        B = requestAnimationFrame(c);
      }

      function c(c) {
        var b = v.length;
        if (b) {
          for (var d = 0; d < b; ) v[d] && v[d].tick(c), d++;
          a();
        } else cancelAnimationFrame(B), (B = 0);
      }
      return a;
    })();
  q.version = "2.2.0";
  q.speed = 1;
  q.running = v;
  q.remove = function (a) {
    a = P(a);
    for (var c = v.length; c--; )
      for (var d = v[c], b = d.animations, f = b.length; f--; )
        u(a, b[f].animatable.target) && (b.splice(f, 1), b.length || d.pause());
  };
  q.getValue = K;
  q.path = function (a, c) {
    var d = h.str(a) ? e(a)[0] : a,
      b = c || 100;
    return function (a) {
      return {
        el: d,
        property: a,
        totalLength: N(d) * (b / 100),
      };
    };
  };
  q.setDashoffset = function (a) {
    var c = N(a);
    a.setAttribute("stroke-dasharray", c);
    return c;
  };
  q.bezier = A;
  q.easings = Q;
  q.timeline = function (a) {
    var c = q(a);
    c.pause();
    c.duration = 0;
    c.add = function (d) {
      c.children.forEach(function (a) {
        a.began = !0;
        a.completed = !0;
      });
      m(d).forEach(function (b) {
        var d = z(b, D(S, a || {}));
        d.targets = d.targets || a.targets;
        b = c.duration;
        var e = d.offset;
        d.autoplay = !1;
        d.direction = c.direction;
        d.offset = h.und(e) ? b : L(e, b);
        c.began = !0;
        c.completed = !0;
        c.seek(d.offset);
        d = q(d);
        d.began = !0;
        d.completed = !0;
        d.duration > b && (c.duration = d.duration);
        c.children.push(d);
      });
      c.seek(0);
      c.reset();
      c.autoplay && c.restart();
      return c;
    };
    return c;
  };
  q.random = function (a, c) {
    return Math.floor(Math.random() * (c - a + 1)) + a;
  };
  return q;
});

fireworks.min.js
#

  • 创建代码:static/js/fireworks.min.js
  • 自定义颜色:colors = ["#FFB6B9E5", “#FAE3D9E5”, “#BBDED6E5”, “#8AC6D1E5”]
function initfirework() {
  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(fn, delay) {
    var timer;
    return function () {
      var context = this;
      var args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    };
  }
  // 创建一个 div 元素
  var div = document.createElement("canvas");
  div.className = "fireworks";
  div.style =
    "position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;";

  // 将 div 添加到 body 的末尾
  document.body.appendChild(div);

  var canvasEl = document.querySelector(".fireworks");
  if (canvasEl) {
    var ctx = canvasEl.getContext("2d"),
      numberOfParticules = 30,
      pointerX = 0,
      pointerY = 0,
      tap = "mousedown",
      colors = ["#FFB6B9E5", "#FAE3D9E5", "#BBDED6E5", "#8AC6D1E5"],
      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);
  }
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initfirework);
} else {
  initfirework(); // DOMContentLoaded 已经发生
}

加载
#

  • 创建:layouts/partials/extend-head.html
<!-- fireworks 鼠标点击特效烟花-->
<script type="text/javascript" src="/js/fireworks.min.js"></script>
<script type="text/javascript" src="/js/anime.min.js"></script>

结语
#

总结而言,Hugo 以其简约而优雅的设计理念,为我们提供了一个专注于内容的创作平台。它让复杂的构建流程隐于幕后,将前端资源的优雅处理交由 Hugo Pipes,将全部的舞台留给了您的文字和创意。告别繁琐的依赖和数据库维护,拥抱 Hugo 带来的纯粹、快速和安全的静态体验,让您的网站如风一般轻盈。


hugo - 这篇文章属于一个选集。
§ 2: 本文

相关文章


微信赞赏
微信赞赏
关注公众号
关注公众号
支付宝赞赏
支付宝赞赏