配置Umami到about页

配置Umami到about页

本文转载自:梦爱吃鱼配置Umami到about页》根据CC 4.0 BY-SA版权协议发布,请遵守协议要求


  • themes/anzhiyu/layout/includes/head.pug 添加
//- Umami
if theme.Umami
  if theme.Umami.umami_url
    script(async defer src=`${theme.Umami.umami_url_js}` data-website-id=`${theme.Umami.umami_id}` data-host-url=`${theme.Umami.umami_url}`)
  else
    script(async defer src=`${theme.Umami.umami_url_js}` data-website-id=`${theme.Umami.umami_id}`)
  • 然后修改 themes/anzhiyu/source/css/_page/about.styl
大致在1255行
- if (hexo-config('LA.enable')) {
+ if (hexo-config('LA.enable') || hexo-config('Umami.enable')) {
  • 接着修改 themes/anzhiyu/layout/includes/page/about.pug
//-  应该是91行
       .author-content
-        if theme.LA.enable
+        if theme.LA.enable || theme.Umami.enable
           - let cover = item.statistic.cover
           .about-statistic.author-content-item(style=`background: url(${cover}) top / cover no-repeat;`)
             .card-content
               .author-content-item-tips 数据
               span.author-content-item-title 访问统计
               #statistic
-              .post-tips
-                | 统计信息来自
-                a(href='https://invite.51.la/1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计
+              if theme.LA.enable
+                .post-tips
+                  | 统计信息来自
+                  a(href='https://www.51.la/', target='_blank', rel='noopener nofollow') 51LA统计
+              else if theme.Umami.enable
+                .post-tips
+                  | 统计信息来自
+                  a(href='https://um.ruom.top', target='_blank', rel='noopener nofollow') Umami统计
               .banner-button-group
                 - let link = item.statistic.link
                 - let text = item.statistic.text
  • - const ck = theme.LA.ck把下面的全部替换
// 复制即是正常缩进(两个字符) 需要删除本行
    //- Umami 统计 和 51LA 统计
    if theme.Umami && theme.Umami.enable
      script(defer).
        (function() {
          const umamiApiUrl = "#{url_for(theme.Umami.umami_api)}";
          fetch(umamiApiUrl)
            .then(res => res.json())
            .then(data => {
              let title = {
                "today_uv": "今日人数",
                "today_pv": "今日访问",
                "yesterday_uv": "昨日人数",
                "yesterday_pv": "昨日访问",
                "last_month_pv": "本月访问",
                "last_year_pv": "本年访问"
              };
              let s = document.getElementById("statistic");
              for (let key in data) {
                if (data.hasOwnProperty(key) && title[key]) {
                  s.innerHTML += `<div><span>${title[key]}</span><span id="${key}">${data[key]}</span></div>`;
                }
              }
              initCountUp(data, title);
            })
            .catch(error => console.error('Error:', error));
        })();
    else
      script(defer).
        function initAboutPage() {
          fetch("https://v6-widget.51.la/v6/#{ck}/quote.js")
            .then(res => res.text())
            .then(data => {
              let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
              let num = data.match(/(</span><span>).*?(/span></p>)/g);

              num = num.map(el => {
                let val = el.replace(/(</span><span>)/g, "");
                let str = val.replace(/(</span></p>)/g, "");
                return str;
              });

              let statisticEl = document.getElementById("statistic");

              // 自定义不显示哪个或者显示哪个,如下为不显示 最近活跃访客 和 总访问量
              let statistic = [];
              for (let i = 0; i < num.length; i++) {
                if (!statisticEl) return;
                if (i == 0) continue;
                statisticEl.innerHTML +=
                  "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
                queueMicrotask(() => {
                  statistic.push(
                    new CountUp(title[i], 0, num[i], 0, 2, {
                      useEasing: true,
                      useGrouping: true,
                      separator: ",",
                      decimal: ".",
                      prefix: "",
                      suffix: "",
                    })
                  );
                });
              }

              let statisticElement = document.querySelector(".about-statistic.author-content-item");
              function statisticUP() {
                if (!statisticElement) return;

                const callback = (entries, observer) => {
                  entries.forEach(entry => {
                    if (entry.isIntersecting) {
                      for (let i = 0; i < num.length; i++) {
                        if (i == 0) continue;
                        queueMicrotask(() => {
                          statistic[i - 1].start();
                        });
                      }
                      observer.disconnect(); // 停止观察元素,因为不再需要触发此回调
                    }
                  });
                };

                const options = {
                  root: null,
                  rootMargin: "0px",
                  threshold: 0
                };
                const observer = new IntersectionObserver(callback, options);
                observer.observe(statisticElement);
              }

              statisticUP();
              initCountUp({}, {});
            });

          initAnimation();
        }
        if (typeof gsap === "object") {
          initAboutPage()
        } else {
          getScript("!{url_for(theme.asset.gsap_js)}").then(initAboutPage);
        }

    //- 初始化 countup.js
    script(defer).
      function initCountUp(data, title) {
        const elements = [];

        for (let key in data) {
          if (data.hasOwnProperty(key) && title[key]) {
            const element = document.getElementById(key);
            if (element) {
              elements.push({ id: key, value: data[key], element: element });
            }
          }
        }

        const selfInfoContentYearElement = document.getElementById("selfInfo-content-year");
        if (selfInfoContentYearElement) {
          elements.push({ id: "selfInfo-content-year", value: #{selfInfoContentYear}, element: selfInfoContentYearElement });
        }

        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const target = elements.find(el => el.element === entry.target);
              if (target) {
                const countUp = new CountUp(target.id, 0, target.value, 0, 2, {
                  useEasing: true,
                  useGrouping: target.id === "selfInfo-content-year" ? false : true,
                  separator: ",",
                  decimal: ".",
                  prefix: "",
                  suffix: "",
                });
                countUp.start();
                observer.unobserve(entry.target);
              }
            }
          });
        }, { threshold: 0 });

        elements.forEach(el => observer.observe(el.element));
      }

    //- 独立鼠标跟随动画
    script(defer).
      function initAnimation() {
        var pursuitInterval = null;
        pursuitInterval = setInterval(function () {
          const show = document.querySelector("span[data-show]");
          const next = show.nextElementSibling || document.querySelector(".first-tips");
          const up = document.querySelector("span[data-up]");

          if (up) {
            up.removeAttribute("data-up");
          }

          show.removeAttribute("data-show");
          show.setAttribute("data-up", "");

          next.setAttribute("data-show", "");
        }, 2000);

        document.addEventListener("pjax:send", function () {
          pursuitInterval && clearInterval(pursuitInterval);
        });

        var helloAboutEl = document.querySelector(".hello-about");
        helloAboutEl.addEventListener("mousemove", evt => {
          const mouseX = evt.offsetX;
          const mouseY = evt.offsetY;
          gsap.set(".cursor", {
            x: mouseX,
            y: mouseY,
          });

          gsap.to(".shape", {
            x: mouseX,
            y: mouseY,
            stagger: -0.1,
          });
        });
      }
      if (typeof gsap === "object") {
        initAnimation()
      } else {
        getScript("!{url_for(theme.asset.gsap_js)}").then(initAnimation);
      }
  • 最后在主题的_config.anzhiyu.yml配置项内添加
# Umami
Umami:
  enable: true # 开关
  umami_url_js: https://umami.mooe.us.kg/script.js # 填写 umami js地址 可以使用第三方CDN加速但需要配置下面的 umami_url
  umami_id: 77c19445-d4a1-4ddc-ba15-8a01e6cd692f # 填写 umami 统计 ID
  umami_api: https://umami.wooi.us.kg/ # 填写 umami API 地址
  umami_url: # https://umami.mooe.us.kg 填写 umami 服务器地址 使用 CDN 加速 Umami 静态资源后需配置此项

© 版权声明
THE END
喜欢就支持一下吧
点赞1 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容