博客快捷键

按住 Shift 键查看可用快捷键

ShiftK

开启/关闭快捷键功能

ShiftA

打开/关闭中控台

ShiftD

深色/浅色显示模式

ShiftS

站内搜索

ShiftR

随机访问

ShiftH

返回首页

ShiftL

友链页面

ShiftP

关于本站

ShiftI

原版/本站右键菜单

松开 Shift 键或点击外部区域关闭

文章详情

互动

安知鱼主题文件魔改记录

364319分钟2024-10-25104河南郑州

本文只是记录，并非教程，请直接不要按照本文修改，以免报错。
其实本站并没有做多修改，写此文章仅为记录，方便以后升级更新！

1. 修改 `analytics.pug`

在**themes/anzhiyu/layout/includes/head/analytics.pug**中

最下面33行，添加以下代码：

pug

if theme.umami_analytics 
  script(defer, src='https://umami.elykia.cn/script.js', data-website- id=`${theme.umami_analytics}`)

2. 修改 `head.pug`

在 themes/anzhiyu/layout/includes/head.pug 中

最下面94行，添加以下代码：

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}`)

3. 修改 `about.styl`

在 themes/anzhiyu/source/css/_page/about.styl 中

大致1265 行：

stylus

- if (hexo-config('LA.enable')) {
+ if (hexo-config('Umami.enable')) {

4. 修改 `about.pug`

在 themes/anzhiyu/layout/includes/page/about.pug 中

修改过多，故直接贴出：

pug

if site.data.about
  - let aboutData = site.data.about
  each item in aboutData
    - let subtitle = item.subtitle || config.subtitle
    - let avatarImg = item.avatarImg || theme.avatar.img
    - let aboutName = item.name || theme.author
    - let aboutDescription = item.description || config.description
    - let helloAbout = item.helloAbout
    - let skillsTips = item.skillsTips
    - let careers = item.careers
    - let crrList = careers.list
    - let crrItem = careers.item
    - let avatarSkills = item.avatarSkills
    #about-page
      .author-box
        if avatarSkills
          .author-tag-left
            each item in avatarSkills.left
              span.author-tag=item
        .author-img
          img.no-lightbox(src=url_for(avatarImg) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
        if avatarSkills
          .author-tag-right
            each item in avatarSkills.right
              span.author-tag=item
      p.p.center.logo.large 关于我
      p.p.center.small=subtitle
      .author-content
        .author-content-item.myInfoAndSayHello
          .title1 你好，很高兴认识你👋
          .title2
            | 我叫 
            span.inline-word=aboutName
          .title1=aboutDescription
        .aboutsiteTips.author-content-item
          - let { tips, title1, title2, word } = item.aboutsiteTips
          .author-content-item-tips= tips
          h2
            = title1
            br
            = title2
            .mask
              each wordItem, index in word
                if index < word.length - 2
                  span(class=(index === 0 ? 'first-tips' : ''))= wordItem
              span(data-up)= word[word.length - 2]
              |  
              span(data-show)= word[word.length - 1]
      
      .hello-about
        .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
        .shapes
          .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
          .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
          .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
        .content
          h1=helloAbout
      
      .author-content
        .author-content-item.skills
          .card-content
            .author-content-item-tips=skillsTips.tips
            span.author-content-item-title=skillsTips.title
            .skills-style-group
              include ../anzhiyu/tags-group-all.pug
              if site.data.creativity
                .skills-list
                  each i in site.data.creativity
                    each item, index in i.creativity_list
                      .skill-info
                        .skill-icon(style=`background: ${item.color}`)
                          img.no-lightbox(title=item.name, src=item.icon, alt=item.name)
                        .skill-name
                          span=item.name 
                  .etc ...
        .author-content-item.careers
          .card-content
            .author-content-item-tips=careers.tips
            span.author-content-item-title=careers.title
            .careers-group
              if crrList
                each career in crrList
                  .career-item
                    .circle(style=`background:${career.color ? career.color : "#357ef5"}`)
                    .name=career.desc
              else
                .careers-none
            if careers.img
              img.author-content-img.no-lightbox(alt=careers.tips, src=url_for(careers.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
      
      .author-content
        if 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://umami.elykia.cn', target='_blank', rel='noopener nofollow') Umami统计
              .banner-button-group
                - let link = item.statistic.link
                - let text = item.statistic.text
                a.banner-button(onclick=`pjax.loadUrl("${link}")`)
                  i.anzhiyufont.anzhiyu-icon-arrow-circle-right
                  |  
                  span.banner-button-text=text
        .author-content-item-group.column.mapAndInfo
          - let mapBackground = item.map.background
          - let mapBackgroundDark = item.map.backgroundDark
          style.
            .author-content-item.map {
              background-image: url(#{mapBackground});
            }
            [data-theme='dark'] .author-content-item.map {
              background-image: url(#{mapBackgroundDark});
            }
          .author-content-item.map.single
            - let mapTitle = item.map.title
            - let mapStrengthenTitle = item.map.StrengthenTitle
            span.map-title=mapTitle
              b=mapStrengthenTitle
          .author-content-item.selfInfo.single
            - let { selfInfoTips1, selfInfoContentYear, selfInfoTips2, selfInfoContent2, selfInfoTips3, selfInfoContent3 } = item.selfInfo
            div
              span.selfInfo-title=selfInfoTips1
              |  
              span.selfInfo-content#selfInfo-content-year(style='color:#43a6c6')=selfInfoContentYear
            div
              span.selfInfo-title=selfInfoTips2
              |  
              span.selfInfo-content(style='color:#c69043')=selfInfoContent2
            div
              span.selfInfo-title=selfInfoTips3
              |  
              span.selfInfo-content(style='color:#b04fe6')=selfInfoContent3
      
      .author-content
        .author-content-item.personalities
          - let {author_name, personality_type, photo_url, personality_img, name_url, personality_type_color} = item.personalities
          .author-content-item-tips 性格
          span.author-content-item-title= author_name
          .title2(style=`color:${personality_type_color ? personality_type_color : "#ac899c"}`)= personality_type
          .post-tips
            | 在 
            a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16personalities
            |  了解更多关于 
            a(target='_blank', rel='noopener external nofollow', href= name_url)= author_name
          .image
            img.no-lightbox(src=url_for(personality_img), alt='人格')
        .author-content-item.myphoto
          img.author-content-img.no-lightbox(alt='自拍', src=url_for(photo_url))
      
      .author-content
        .author-content-item.maxim
          - let {maxim_tips, maxim_top, maxim_bottom} = item.maxim
          .author-content-item-tips=maxim_tips
          span.maxim-title
            span(style='opacity:.6;margin-bottom:8px')=maxim_top
            |  
            span=maxim_bottom
        .author-content-item.buff
          .card-content
          - let {buff_tips, buff_top, buff_bottom} = item.buff
            .author-content-item-tips=buff_tips
            span.buff-title
              span(style='opacity:.6;margin-bottom:8px')=buff_top
              |  
              span=buff_bottom
          .card-background-icon
            i.anzhiyufont.anzhiyu-icon-dice-d20

      .author-content
        - let {game_tips, game_title, game_uid, game_bg} = item.game
        .author-content-item.game-yuanshen(style=`background: url(${game_bg}) top / cover no-repeat;`)
          .card-content
            .author-content-item-tips=game_tips
            span.author-content-item-title=game_title
            .content-bottom
              .icon-group
                .loading-bar(role='presentation', aria-hidden='true' style=`${game_title != "原神" ? "display: none": ""}`)
              .tips.game-yuanshen-uid=game_uid
        .author-content-item.comic-content
          .card-content
            - let {comic_tips, comic_title, comic_list} = item.comic
            .author-content-item-tips=comic_tips
            .author-content-item-title=comic_title
            .comic-box
              if comic_list
                each i in comic_list
                  a.comic-item(href=i.href, target="_blank", title=i.name)
                    .comic-item-cover
                      img(src=i.cover, alt=i.name)
      
      .author-content
        - let {music_tips, music_title, music_link, music_bg} = item.music
        - let {like_tips, like_title, like_bottom, like_bg} = item.like
        .author-content-item.like-technology(style=`background: url(${like_bg}) top / cover no-repeat;`)
          .card-content
            .author-content-item-tips=like_tips
            span.author-content-item-title=like_title
            .content-bottom
              .tips
                | 跟 #{aboutName} 一起开拓银河
                br
                | 愿此行，终抵群星
        .author-content-item.like-music(style=`background: url(${music_bg}) top / cover no-repeat;`)
          .card-content
            .author-content-item-tips=music_tips
            span.author-content-item-title=music_title
            .content-bottom
              .tips='摆烂中'
            .banner-button-group
              a.banner-button(onclick=`pjax.loadUrl("${music_link}")`)
                i.anzhiyufont.anzhiyu-icon-arrow-circle-right
                |  
                span.banner-button-text 回到首页

      .author-content
        .create-site-post.author-content-item.single
          .author-content-item-tips 心路历程
          | 欢迎来到我的博客！这是我用来
          strong 记录、分享和沉淀知识与兴趣
          | 的地方，希望它能成为一个能帮助更多人的空间。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 从很早开始，我就对分享感兴趣。我喜欢研究数码产品和软件，探索互联网世界如何被创造和发展。在这里，我将分享
          strong 我在学习、生活中获得的点滴知识和感悟。
          | 
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          h3 为什么创建这个网站？
          | 作为一个非科班的学生，一直觉得
          del 拥有自己的独立网站是一件十分酷的事情
          psw (觉得用来装逼十分合适)
          | ！这样就相当于拥有自己独立的空间，不用去CSDN这些网站上写博客或者用有道云笔记去记笔记。网站成为了自己的一个名片，
          strong 在上面写写东西，记录生活，分享知识，把自己想与他人展现的技能放在博客上，
          | 何尝不是一件有趣的事情！
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 我希望在这个平台上分享自己积累的知识和兴趣，与更多的人产生连接。互联网让我学到了很多，也开阔了视野，我希望能通过这个平台，
          strong 分享一些我生活中琐碎但有趣的东西。
          | 与大多数垂直类的技术博客不同，这里的内容非常多样化——有
          strong 实用的技能教程和干货
          | ，也有
          strong 生活中的吐槽和小妙招
          | ，还有
          strong 我对各种话题的思考和看法。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 当我研究到一些新鲜的东西，或者发现了有趣的事物，我都会在这里记录和分享。对我来说，
          strong 分享是最好的学习方式，
          | 正如那句话所说：“能够教给别人的知识，才是真正学会的知识。”
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')

          h3 关于我
          | 目前就读于
          strong 郑州大学
          | 的
          strong 工程力学专业
          | 。虽然作为一个非科班的学生，
          del 但我也是一个编程开发的爱好者。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          .checkbox.blue.checked
            input(type='checkbox', checked)
            p 在读废物摆烂大学生
          .checkbox.blue.checked
            input(type='checkbox', checked)
            p 致力于成为一个编程开发小佬
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 又菜又爱玩
            kbd ctrl
            |  +
            kbd C
            | 、
            kbd ctrl
            |  +
            kbd V
            | 高级CV工程师
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 熟悉Html、CSS、JavaScript、Vue、React、PHP、Java、Python、C、C++、C#、Go、TypeScript等单词的拼写
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 熟练Windows、Linux、Mac、Android、IOS等系统的开关机
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 精通Baidu编程，Google编程，面向ChatGPT编程

          h3 To DO List
          .checkbox
            input(type='checkbox')
            p 考研
          .checkbox.checked
            input(type='checkbox')
            p 考研
          .checkbox.checked
            input(type='checkbox')
            p 还是TMD考研

          h3 关于本站
          | 创建这个站的时候，我想要的就是有一个能够
          strong 积累知识，积累兴趣
          | 的地方，和他人分享，这样可以让知识成为真正的
          strong 积累和沉淀。
          | 如果能够帮助到更多的人，解决更多问题，那一定是非常棒的事情。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 这里大多是
          strong 技术向
          | 的文章，可能不会有很多人看，就当是自我记录吧。一般我研究什么、发现了什么都会分享在这里。当然，如果某篇文章能够帮助到你，我也会感到很开心。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 这些就是创建这个小站的本意，也是我
          strong 分享生活的方式。
          | 有幸能和你相遇在这里，相信我们能共同留下
          strong 一段美好的记忆。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')

      - let rawData = item.reward_list
      if rawData
        - let sortedByDate = rawData.slice().sort((a, b) => new Date(b.datatime) - new Date(a.datatime));
        .author-content
          .author-content-item.single.reward#about-reward
            .author-content-item-tips 致谢
            span.author-content-item-title 赞赏名单
            .author-content-item-description 感谢因为有你们，让我感受到写博客这件事情能够给你们创造了价值，让我更加有创作的动力，让我在这条路上走得更远。
              .reward-list-all
                - let reward_list_amount = item.reward_list.sort((a,b)=>b.amount -  a.amount)
                each item, index in reward_list_amount
                  .reward-list-item
                    .reward-list-item-name=item.name
                    .reward-list-bottom-group
                      if item.amount >= 50
                        .reward-list-item-money(style='background:var(--anzhiyu-yellow)')=`¥${item.amount}`
                      else 
                        .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
                      .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
              .reward-list-updateDate
                | 最新更新时间： 
                time.datatime.reward-list-updateDate-time(datatime=sortedByDate[0].datatime)=new Date(sortedByDate[0].datatime).toISOString().slice(0, -14)
                | &nbsp;&nbsp;&nbsp;这些将全部用于博客的服务器、域名及云服务开销
            .about-reward
              #con
              #TA-con(onclick="anzhiyu.rewardShowConsole()")
                #text-con
                  #linght
                  #TA 为TA充电
              #tube-con
                svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
                  path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
                  path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
                  path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
                  path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
                  rect(y='186', width='236', height='24', fill='#e5e9ef')
                  ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
                  circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
                  ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
                  circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
                #mask
                  svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
                    path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
                    path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
                    path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
                    path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
                    rect(y='186', width='236', height='24', fill='#f25d8e')
                    ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
                    circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
                    ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
                    circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
                #orange-mask
                  svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
                    path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
                    path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
                    path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
                    path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
                    rect(y='186', width='236', height='24', fill='#ffd52b')
                    ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
                    circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
                    ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
                    circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
                p#people
                  | 共
                  b=item.reward_list.length
                  | 人


    script(src=url_for(theme.asset.countup_js))
    - 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);
      }

5.编辑 `main.js`

在 themes/anzhiyu/source/js/main.js 中

最下面1803行，添加以下代码：

javascript

// 欢迎信息
elykia.setWelcome_info();

6. 修改 `sw-rules.js`

在 themes/anzhiyu/sw-rules.js 中

修改为**swpp.config.js**并放到博客根目录下

修改过多，故直接贴出：

javascript

import { defineConfig } from 'swpp-backends';
 
defineConfig({
    compilationEnv: {
        // 此项是必须配置的项目，swpp 必须知道您的域名才能区分哪些资源是外部资源。
        // 部分前端实现可能会帮您自动填写该项目，具体是否必须手动填写请见前端实现的文档。
        DOMAIN_HOST: new URL('https://blog.elykia.cn/'),
        SERVICE_WORKER:"SW",
        NETWORK_FILE_FETCHER:{
        referer:"https://blog.elykia.cn/"
      },
    }
})

/**
 * @see https://kmar.top/posts/b70ec88f/
 */
module.exports.config = {
  /**
   * 与 ServiceWorker 有关的配置项
   * 若想禁止插件自动生成 sw，此项填 false 即可
   * @type ?Object|boolean
   */
  /** @type {?ServiceWorkerConfig|boolean} */
  serviceWorker: {
    cacheName: 'AnZhiYuThemeCache',
    escape: 0,
    debug: false,
  },
  register: {
    onsuccess: undefined,
    onerror: () => console.error('Service Worker 注册失败！可能是由于您的浏览器不支持该功能！'),
    builder: (root, framework, pluginConfig) => {
      const { onerror, onsuccess } = pluginConfig.register;
      return `
        <script>
          (() => {
            const sw = navigator.serviceWorker;
            const error = ${onerror && onerror.toString()};
            if (!sw?.register('${new URL(root).pathname}sw.js')
              ${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
              ?.catch(error)
            ) error()
          })()
        </script>`;
    },
  },
  /** @type {?DomConfig|boolean} */
  dom: {
    /** @type {?VoidFunction} */
    onsuccess: () => {
      caches.match('https://id.v3/').then(function (response) {
        if (response) {
          // 如果找到了匹配的缓存响应
          response.json().then(function (data) {
            anzhiyuPopupManager && anzhiyuPopupManager.enqueuePopup('通知📢', `已刷新缓存，更新为${data.global + "." + data.local}版本最新内容`, null, 5000);
          });
        } else {
          console.info('未找到匹配的缓存响应');
        }
      }).catch(function (error) {
        console.error('缓存匹配出错:', error);
      });
    },
  },
  /** @type {?VersionJsonConfig|boolean} */
  json: {
    maxHtml: 15,
    charLimit: 1024,
    merge: ['page', 'archives', 'categories', 'tags'],
    exclude: {
      localhost: [],
      other: [],
    },
  },
  /** @type {?ExternalMonitorConfig|boolean} */
  external: {
    timeout: 5000,
    concurrencyLimit: 100,
    stable: [
      /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/registry\.npmmirror\.com\/[^/]+\/[^/]+\/files\/[^/]+$/,
      /^https:\/\/npm\.onmicrosoft\.cn\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/fastly\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
    ],
    replacer: (srcUrl) => {
      const pathname = new URL(srcUrl).pathname;
      return srcUrl.startsWith('https://npm.elemecdn.com') 
        ? [
            srcUrl,
            `https://npm.onmicrosoft.cn` + url.pathname,
            `https://cdn.cbd.int` + url.pathname,
            `https://cdn.jsdelivr.net/npm` + url.pathname,
            `https://unpkg.com` + url.pathname,
            `https://registry.npmmirror.com` + url.pathname,
            `https://fastly.jsdelivr.net/npm` + url.pathname,
          ]
        : srcUrl;
    },
  },
};

/** 跳过处理番剧封面 */
module.exports.skipRequest = request => request.url.startsWith('https://i0.hdslb.com');

/**
 * 缓存列表
 * @param clean 清理全站时是否删除其缓存
 * @param match {function(URL)} 匹配规则
 * 更多：/\/|\.(js|html|css|woff2|woff|ttf|cur)$/
 */
module.exports.cacheRules = {
  simple: {
    clean: true,
    search: false,
    match: (url, $eject) => {
      const allowedHost = $eject.domain;
      return url.host === allowedHost && url.pathname.match(/(\.(js|css|json)|\/)$/)
    }
  },
  cdn: {
    clean: true,
    match: (url) =>
      [
        "cdn.cbd.int",
        "lf26-cdn-tos.bytecdntp.com",
        "lf6-cdn-tos.bytecdntp.com",
        "lf3-cdn-tos.bytecdntp.com",
        "lf9-cdn-tos.bytecdntp.com",
        "cdn.staticfile.org",
        "npm.elemecdn.com",
        "npm.onmicrosoft.cn",
        "fonts.gstatic.com",
        "font.onmicrosoft.cn"
      ].includes(url.host) && url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
  },
  img: {
    clean: true,
    match: (url, $eject) => {
      const allowedHost = $eject.domain;
      return url.host === allowedHost && url.pathname.match(/(.*?)\.(png|jpe?g|svg|webp|gif|bmp|psd|tiff|tga|ico|eps)/)
    }
  },
  thirdparty: {
    clean: true,
    match: (url) => url.host === 'unpkg.com' && url.pathname.match(/\.(png|webp)$/),
  },
};

/**
 * 获取一个 URL 对应的备用 URL 列表，访问顺序按列表顺序，所有 URL 访问时参数一致
 * @param srcUrl {string} 原始 URL
 * @return {{list: string[], timeout: number}} 返回 null 或不返回表示对该 URL 不启用该功能。timeout 为超时时间（ms），list 为 URL 列表，列表不包含原始 URL 表示去除原始访问
 */
module.exports.getSpareUrls = (srcUrl) => {
  if (srcUrl.startsWith('https://npm.elemecdn.com')) {
    return {
      timeout: 3000,
      list: [
        srcUrl,
        `https://cdn.cbd.int${new URL(srcUrl).pathname}`,
        `https://fastly.jsdelivr.net/npm${new URL(srcUrl).pathname}`,
      ],
    };
  }
};

/**
 * 获取要插入到 sw 中的变量或常量
 * @param hexo hexo 对象
 * @param rules 合并后的 sw-rules 对象
 * @return {Object} 要插入的键值对
 */
module.exports.ejectValues = (hexo, rules) => {
  return {
    domain: {
      prefix: "const",
      value: new URL(hexo.config.url).host,
    },
  };
};


/**
 * @param request {Request}
 * @return {boolean}
 */


module.exports.skipRequest = (request) => 
  request.url.startsWith('https://i0.hdslb.com') ||
  request.url.startsWith('https://meting.qjqq.cn') ||
  request.url.startsWith('https://api.i-meto.com');

7. 修改`rightmenu.pug`

在 themes/anzhiyu/layout/includes/anzhiyu/rightmenu.pug 中

大致42 行：

pug

.rightMenu-item#menu-searchBaidu
  i.anzhiyufont.anzhiyu-icon-magnifying-glass
- span 百度搜索
+ span 必应搜索

8. 修改`right_click_menu.js`

在 themes/anzhiyu/source/js/anzhiyu/right_click_menu.js 中

大致364 行：

javascript

// 百度搜索
rm.searchBaidu = function () {
- anzhiyu.snackbarShow("即将跳转到百度搜索", false, 2000);
+ anzhiyu.snackbarShow("即将跳转到必应搜索", false, 2000);
  setTimeout(function () {
-   window.open("https://www.baidu.com/s?wd=" + selectTextNow);
+   window.open("https://www.bing.com/search?q=" + selectTextNow);
  }, "2000");
  rm.hideRightMenu();
};

9. 修改`img`

删除 themes/anzhiyu/source/js/anzhiyu/source/favicon.ico
覆盖 themes/anzhiyu/source/js/anzhiyu/source/img/

https://elykia.lanzoup.com/iJorc2dac4li

Elykia

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自 Elykia

编程开发25

喜欢这篇文章的人也看了

随便逛逛

安知鱼主题：记一次鱼塘朋友圈钓鱼报错的修复

Twikoo 在多吉云CDN场景下获取访客真实IP的解决方案

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

文章详情

互动

安知鱼主题文件魔改记录

364319分钟2024-10-25104河南郑州

本文只是记录，并非教程，请直接不要按照本文修改，以免报错。
其实本站并没有做多修改，写此文章仅为记录，方便以后升级更新！

1. 修改 `analytics.pug`

在**themes/anzhiyu/layout/includes/head/analytics.pug**中

最下面33行，添加以下代码：

pug

if theme.umami_analytics 
  script(defer, src='https://umami.elykia.cn/script.js', data-website- id=`${theme.umami_analytics}`)

2. 修改 `head.pug`

在 themes/anzhiyu/layout/includes/head.pug 中

最下面94行，添加以下代码：

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}`)

3. 修改 `about.styl`

在 themes/anzhiyu/source/css/_page/about.styl 中

大致1265 行：

stylus

- if (hexo-config('LA.enable')) {
+ if (hexo-config('Umami.enable')) {

4. 修改 `about.pug`

在 themes/anzhiyu/layout/includes/page/about.pug 中

修改过多，故直接贴出：

pug

if site.data.about
  - let aboutData = site.data.about
  each item in aboutData
    - let subtitle = item.subtitle || config.subtitle
    - let avatarImg = item.avatarImg || theme.avatar.img
    - let aboutName = item.name || theme.author
    - let aboutDescription = item.description || config.description
    - let helloAbout = item.helloAbout
    - let skillsTips = item.skillsTips
    - let careers = item.careers
    - let crrList = careers.list
    - let crrItem = careers.item
    - let avatarSkills = item.avatarSkills
    #about-page
      .author-box
        if avatarSkills
          .author-tag-left
            each item in avatarSkills.left
              span.author-tag=item
        .author-img
          img.no-lightbox(src=url_for(avatarImg) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
        if avatarSkills
          .author-tag-right
            each item in avatarSkills.right
              span.author-tag=item
      p.p.center.logo.large 关于我
      p.p.center.small=subtitle
      .author-content
        .author-content-item.myInfoAndSayHello
          .title1 你好，很高兴认识你👋
          .title2
            | 我叫 
            span.inline-word=aboutName
          .title1=aboutDescription
        .aboutsiteTips.author-content-item
          - let { tips, title1, title2, word } = item.aboutsiteTips
          .author-content-item-tips= tips
          h2
            = title1
            br
            = title2
            .mask
              each wordItem, index in word
                if index < word.length - 2
                  span(class=(index === 0 ? 'first-tips' : ''))= wordItem
              span(data-up)= word[word.length - 2]
              |  
              span(data-show)= word[word.length - 1]
      
      .hello-about
        .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
        .shapes
          .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
          .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
          .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
        .content
          h1=helloAbout
      
      .author-content
        .author-content-item.skills
          .card-content
            .author-content-item-tips=skillsTips.tips
            span.author-content-item-title=skillsTips.title
            .skills-style-group
              include ../anzhiyu/tags-group-all.pug
              if site.data.creativity
                .skills-list
                  each i in site.data.creativity
                    each item, index in i.creativity_list
                      .skill-info
                        .skill-icon(style=`background: ${item.color}`)
                          img.no-lightbox(title=item.name, src=item.icon, alt=item.name)
                        .skill-name
                          span=item.name 
                  .etc ...
        .author-content-item.careers
          .card-content
            .author-content-item-tips=careers.tips
            span.author-content-item-title=careers.title
            .careers-group
              if crrList
                each career in crrList
                  .career-item
                    .circle(style=`background:${career.color ? career.color : "#357ef5"}`)
                    .name=career.desc
              else
                .careers-none
            if careers.img
              img.author-content-img.no-lightbox(alt=careers.tips, src=url_for(careers.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'`)
      
      .author-content
        if 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://umami.elykia.cn', target='_blank', rel='noopener nofollow') Umami统计
              .banner-button-group
                - let link = item.statistic.link
                - let text = item.statistic.text
                a.banner-button(onclick=`pjax.loadUrl("${link}")`)
                  i.anzhiyufont.anzhiyu-icon-arrow-circle-right
                  |  
                  span.banner-button-text=text
        .author-content-item-group.column.mapAndInfo
          - let mapBackground = item.map.background
          - let mapBackgroundDark = item.map.backgroundDark
          style.
            .author-content-item.map {
              background-image: url(#{mapBackground});
            }
            [data-theme='dark'] .author-content-item.map {
              background-image: url(#{mapBackgroundDark});
            }
          .author-content-item.map.single
            - let mapTitle = item.map.title
            - let mapStrengthenTitle = item.map.StrengthenTitle
            span.map-title=mapTitle
              b=mapStrengthenTitle
          .author-content-item.selfInfo.single
            - let { selfInfoTips1, selfInfoContentYear, selfInfoTips2, selfInfoContent2, selfInfoTips3, selfInfoContent3 } = item.selfInfo
            div
              span.selfInfo-title=selfInfoTips1
              |  
              span.selfInfo-content#selfInfo-content-year(style='color:#43a6c6')=selfInfoContentYear
            div
              span.selfInfo-title=selfInfoTips2
              |  
              span.selfInfo-content(style='color:#c69043')=selfInfoContent2
            div
              span.selfInfo-title=selfInfoTips3
              |  
              span.selfInfo-content(style='color:#b04fe6')=selfInfoContent3
      
      .author-content
        .author-content-item.personalities
          - let {author_name, personality_type, photo_url, personality_img, name_url, personality_type_color} = item.personalities
          .author-content-item-tips 性格
          span.author-content-item-title= author_name
          .title2(style=`color:${personality_type_color ? personality_type_color : "#ac899c"}`)= personality_type
          .post-tips
            | 在 
            a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16personalities
            |  了解更多关于 
            a(target='_blank', rel='noopener external nofollow', href= name_url)= author_name
          .image
            img.no-lightbox(src=url_for(personality_img), alt='人格')
        .author-content-item.myphoto
          img.author-content-img.no-lightbox(alt='自拍', src=url_for(photo_url))
      
      .author-content
        .author-content-item.maxim
          - let {maxim_tips, maxim_top, maxim_bottom} = item.maxim
          .author-content-item-tips=maxim_tips
          span.maxim-title
            span(style='opacity:.6;margin-bottom:8px')=maxim_top
            |  
            span=maxim_bottom
        .author-content-item.buff
          .card-content
          - let {buff_tips, buff_top, buff_bottom} = item.buff
            .author-content-item-tips=buff_tips
            span.buff-title
              span(style='opacity:.6;margin-bottom:8px')=buff_top
              |  
              span=buff_bottom
          .card-background-icon
            i.anzhiyufont.anzhiyu-icon-dice-d20

      .author-content
        - let {game_tips, game_title, game_uid, game_bg} = item.game
        .author-content-item.game-yuanshen(style=`background: url(${game_bg}) top / cover no-repeat;`)
          .card-content
            .author-content-item-tips=game_tips
            span.author-content-item-title=game_title
            .content-bottom
              .icon-group
                .loading-bar(role='presentation', aria-hidden='true' style=`${game_title != "原神" ? "display: none": ""}`)
              .tips.game-yuanshen-uid=game_uid
        .author-content-item.comic-content
          .card-content
            - let {comic_tips, comic_title, comic_list} = item.comic
            .author-content-item-tips=comic_tips
            .author-content-item-title=comic_title
            .comic-box
              if comic_list
                each i in comic_list
                  a.comic-item(href=i.href, target="_blank", title=i.name)
                    .comic-item-cover
                      img(src=i.cover, alt=i.name)
      
      .author-content
        - let {music_tips, music_title, music_link, music_bg} = item.music
        - let {like_tips, like_title, like_bottom, like_bg} = item.like
        .author-content-item.like-technology(style=`background: url(${like_bg}) top / cover no-repeat;`)
          .card-content
            .author-content-item-tips=like_tips
            span.author-content-item-title=like_title
            .content-bottom
              .tips
                | 跟 #{aboutName} 一起开拓银河
                br
                | 愿此行，终抵群星
        .author-content-item.like-music(style=`background: url(${music_bg}) top / cover no-repeat;`)
          .card-content
            .author-content-item-tips=music_tips
            span.author-content-item-title=music_title
            .content-bottom
              .tips='摆烂中'
            .banner-button-group
              a.banner-button(onclick=`pjax.loadUrl("${music_link}")`)
                i.anzhiyufont.anzhiyu-icon-arrow-circle-right
                |  
                span.banner-button-text 回到首页

      .author-content
        .create-site-post.author-content-item.single
          .author-content-item-tips 心路历程
          | 欢迎来到我的博客！这是我用来
          strong 记录、分享和沉淀知识与兴趣
          | 的地方，希望它能成为一个能帮助更多人的空间。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 从很早开始，我就对分享感兴趣。我喜欢研究数码产品和软件，探索互联网世界如何被创造和发展。在这里，我将分享
          strong 我在学习、生活中获得的点滴知识和感悟。
          | 
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          h3 为什么创建这个网站？
          | 作为一个非科班的学生，一直觉得
          del 拥有自己的独立网站是一件十分酷的事情
          psw (觉得用来装逼十分合适)
          | ！这样就相当于拥有自己独立的空间，不用去CSDN这些网站上写博客或者用有道云笔记去记笔记。网站成为了自己的一个名片，
          strong 在上面写写东西，记录生活，分享知识，把自己想与他人展现的技能放在博客上，
          | 何尝不是一件有趣的事情！
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 我希望在这个平台上分享自己积累的知识和兴趣，与更多的人产生连接。互联网让我学到了很多，也开阔了视野，我希望能通过这个平台，
          strong 分享一些我生活中琐碎但有趣的东西。
          | 与大多数垂直类的技术博客不同，这里的内容非常多样化——有
          strong 实用的技能教程和干货
          | ，也有
          strong 生活中的吐槽和小妙招
          | ，还有
          strong 我对各种话题的思考和看法。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 当我研究到一些新鲜的东西，或者发现了有趣的事物，我都会在这里记录和分享。对我来说，
          strong 分享是最好的学习方式，
          | 正如那句话所说：“能够教给别人的知识，才是真正学会的知识。”
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')

          h3 关于我
          | 目前就读于
          strong 郑州大学
          | 的
          strong 工程力学专业
          | 。虽然作为一个非科班的学生，
          del 但我也是一个编程开发的爱好者。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          .checkbox.blue.checked
            input(type='checkbox', checked)
            p 在读废物摆烂大学生
          .checkbox.blue.checked
            input(type='checkbox', checked)
            p 致力于成为一个编程开发小佬
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 又菜又爱玩
            kbd ctrl
            |  +
            kbd C
            | 、
            kbd ctrl
            |  +
            kbd V
            | 高级CV工程师
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 熟悉Html、CSS、JavaScript、Vue、React、PHP、Java、Python、C、C++、C#、Go、TypeScript等单词的拼写
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 熟练Windows、Linux、Mac、Android、IOS等系统的开关机
          .checkbox.times.red.checked
            input(type='checkbox', checked)
            p 精通Baidu编程，Google编程，面向ChatGPT编程

          h3 To DO List
          .checkbox
            input(type='checkbox')
            p 考研
          .checkbox.checked
            input(type='checkbox')
            p 考研
          .checkbox.checked
            input(type='checkbox')
            p 还是TMD考研

          h3 关于本站
          | 创建这个站的时候，我想要的就是有一个能够
          strong 积累知识，积累兴趣
          | 的地方，和他人分享，这样可以让知识成为真正的
          strong 积累和沉淀。
          | 如果能够帮助到更多的人，解决更多问题，那一定是非常棒的事情。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 这里大多是
          strong 技术向
          | 的文章，可能不会有很多人看，就当是自我记录吧。一般我研究什么、发现了什么都会分享在这里。当然，如果某篇文章能够帮助到你，我也会感到很开心。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')
          br
          | 这些就是创建这个小站的本意，也是我
          strong 分享生活的方式。
          | 有幸能和你相遇在这里，相信我们能共同留下
          strong 一段美好的记忆。
          img.inline-img(src='/img/404.jpg' data-fancybox='gallery', style='display: inline;margin: 0 3px;height: 1.1em;vertical-align: text-bottom;')

      - let rawData = item.reward_list
      if rawData
        - let sortedByDate = rawData.slice().sort((a, b) => new Date(b.datatime) - new Date(a.datatime));
        .author-content
          .author-content-item.single.reward#about-reward
            .author-content-item-tips 致谢
            span.author-content-item-title 赞赏名单
            .author-content-item-description 感谢因为有你们，让我感受到写博客这件事情能够给你们创造了价值，让我更加有创作的动力，让我在这条路上走得更远。
              .reward-list-all
                - let reward_list_amount = item.reward_list.sort((a,b)=>b.amount -  a.amount)
                each item, index in reward_list_amount
                  .reward-list-item
                    .reward-list-item-name=item.name
                    .reward-list-bottom-group
                      if item.amount >= 50
                        .reward-list-item-money(style='background:var(--anzhiyu-yellow)')=`¥${item.amount}`
                      else 
                        .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
                      .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
              .reward-list-updateDate
                | 最新更新时间： 
                time.datatime.reward-list-updateDate-time(datatime=sortedByDate[0].datatime)=new Date(sortedByDate[0].datatime).toISOString().slice(0, -14)
                | &nbsp;&nbsp;&nbsp;这些将全部用于博客的服务器、域名及云服务开销
            .about-reward
              #con
              #TA-con(onclick="anzhiyu.rewardShowConsole()")
                #text-con
                  #linght
                  #TA 为TA充电
              #tube-con
                svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
                  path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
                  path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
                  path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
                  path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
                  rect(y='186', width='236', height='24', fill='#e5e9ef')
                  ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
                  circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
                  ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
                  circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
                #mask
                  svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
                    path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
                    path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
                    path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
                    path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
                    rect(y='186', width='236', height='24', fill='#f25d8e')
                    ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
                    circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
                    ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
                    circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
                #orange-mask
                  svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
                    path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
                    path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
                    path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
                    path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
                    rect(y='186', width='236', height='24', fill='#ffd52b')
                    ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
                    circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
                    ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
                    circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
                p#people
                  | 共
                  b=item.reward_list.length
                  | 人


    script(src=url_for(theme.asset.countup_js))
    - 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);
      }

5.编辑 `main.js`

在 themes/anzhiyu/source/js/main.js 中

最下面1803行，添加以下代码：

javascript

// 欢迎信息
elykia.setWelcome_info();

6. 修改 `sw-rules.js`

在 themes/anzhiyu/sw-rules.js 中

修改为**swpp.config.js**并放到博客根目录下

修改过多，故直接贴出：

javascript

import { defineConfig } from 'swpp-backends';
 
defineConfig({
    compilationEnv: {
        // 此项是必须配置的项目，swpp 必须知道您的域名才能区分哪些资源是外部资源。
        // 部分前端实现可能会帮您自动填写该项目，具体是否必须手动填写请见前端实现的文档。
        DOMAIN_HOST: new URL('https://blog.elykia.cn/'),
        SERVICE_WORKER:"SW",
        NETWORK_FILE_FETCHER:{
        referer:"https://blog.elykia.cn/"
      },
    }
})

/**
 * @see https://kmar.top/posts/b70ec88f/
 */
module.exports.config = {
  /**
   * 与 ServiceWorker 有关的配置项
   * 若想禁止插件自动生成 sw，此项填 false 即可
   * @type ?Object|boolean
   */
  /** @type {?ServiceWorkerConfig|boolean} */
  serviceWorker: {
    cacheName: 'AnZhiYuThemeCache',
    escape: 0,
    debug: false,
  },
  register: {
    onsuccess: undefined,
    onerror: () => console.error('Service Worker 注册失败！可能是由于您的浏览器不支持该功能！'),
    builder: (root, framework, pluginConfig) => {
      const { onerror, onsuccess } = pluginConfig.register;
      return `
        <script>
          (() => {
            const sw = navigator.serviceWorker;
            const error = ${onerror && onerror.toString()};
            if (!sw?.register('${new URL(root).pathname}sw.js')
              ${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
              ?.catch(error)
            ) error()
          })()
        </script>`;
    },
  },
  /** @type {?DomConfig|boolean} */
  dom: {
    /** @type {?VoidFunction} */
    onsuccess: () => {
      caches.match('https://id.v3/').then(function (response) {
        if (response) {
          // 如果找到了匹配的缓存响应
          response.json().then(function (data) {
            anzhiyuPopupManager && anzhiyuPopupManager.enqueuePopup('通知📢', `已刷新缓存，更新为${data.global + "." + data.local}版本最新内容`, null, 5000);
          });
        } else {
          console.info('未找到匹配的缓存响应');
        }
      }).catch(function (error) {
        console.error('缓存匹配出错:', error);
      });
    },
  },
  /** @type {?VersionJsonConfig|boolean} */
  json: {
    maxHtml: 15,
    charLimit: 1024,
    merge: ['page', 'archives', 'categories', 'tags'],
    exclude: {
      localhost: [],
      other: [],
    },
  },
  /** @type {?ExternalMonitorConfig|boolean} */
  external: {
    timeout: 5000,
    concurrencyLimit: 100,
    stable: [
      /^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/registry\.npmmirror\.com\/[^/]+\/[^/]+\/files\/[^/]+$/,
      /^https:\/\/npm\.onmicrosoft\.cn\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
      /^https:\/\/fastly\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
    ],
    replacer: (srcUrl) => {
      const pathname = new URL(srcUrl).pathname;
      return srcUrl.startsWith('https://npm.elemecdn.com') 
        ? [
            srcUrl,
            `https://npm.onmicrosoft.cn` + url.pathname,
            `https://cdn.cbd.int` + url.pathname,
            `https://cdn.jsdelivr.net/npm` + url.pathname,
            `https://unpkg.com` + url.pathname,
            `https://registry.npmmirror.com` + url.pathname,
            `https://fastly.jsdelivr.net/npm` + url.pathname,
          ]
        : srcUrl;
    },
  },
};

/** 跳过处理番剧封面 */
module.exports.skipRequest = request => request.url.startsWith('https://i0.hdslb.com');

/**
 * 缓存列表
 * @param clean 清理全站时是否删除其缓存
 * @param match {function(URL)} 匹配规则
 * 更多：/\/|\.(js|html|css|woff2|woff|ttf|cur)$/
 */
module.exports.cacheRules = {
  simple: {
    clean: true,
    search: false,
    match: (url, $eject) => {
      const allowedHost = $eject.domain;
      return url.host === allowedHost && url.pathname.match(/(\.(js|css|json)|\/)$/)
    }
  },
  cdn: {
    clean: true,
    match: (url) =>
      [
        "cdn.cbd.int",
        "lf26-cdn-tos.bytecdntp.com",
        "lf6-cdn-tos.bytecdntp.com",
        "lf3-cdn-tos.bytecdntp.com",
        "lf9-cdn-tos.bytecdntp.com",
        "cdn.staticfile.org",
        "npm.elemecdn.com",
        "npm.onmicrosoft.cn",
        "fonts.gstatic.com",
        "font.onmicrosoft.cn"
      ].includes(url.host) && url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
  },
  img: {
    clean: true,
    match: (url, $eject) => {
      const allowedHost = $eject.domain;
      return url.host === allowedHost && url.pathname.match(/(.*?)\.(png|jpe?g|svg|webp|gif|bmp|psd|tiff|tga|ico|eps)/)
    }
  },
  thirdparty: {
    clean: true,
    match: (url) => url.host === 'unpkg.com' && url.pathname.match(/\.(png|webp)$/),
  },
};

/**
 * 获取一个 URL 对应的备用 URL 列表，访问顺序按列表顺序，所有 URL 访问时参数一致
 * @param srcUrl {string} 原始 URL
 * @return {{list: string[], timeout: number}} 返回 null 或不返回表示对该 URL 不启用该功能。timeout 为超时时间（ms），list 为 URL 列表，列表不包含原始 URL 表示去除原始访问
 */
module.exports.getSpareUrls = (srcUrl) => {
  if (srcUrl.startsWith('https://npm.elemecdn.com')) {
    return {
      timeout: 3000,
      list: [
        srcUrl,
        `https://cdn.cbd.int${new URL(srcUrl).pathname}`,
        `https://fastly.jsdelivr.net/npm${new URL(srcUrl).pathname}`,
      ],
    };
  }
};

/**
 * 获取要插入到 sw 中的变量或常量
 * @param hexo hexo 对象
 * @param rules 合并后的 sw-rules 对象
 * @return {Object} 要插入的键值对
 */
module.exports.ejectValues = (hexo, rules) => {
  return {
    domain: {
      prefix: "const",
      value: new URL(hexo.config.url).host,
    },
  };
};


/**
 * @param request {Request}
 * @return {boolean}
 */


module.exports.skipRequest = (request) => 
  request.url.startsWith('https://i0.hdslb.com') ||
  request.url.startsWith('https://meting.qjqq.cn') ||
  request.url.startsWith('https://api.i-meto.com');

7. 修改`rightmenu.pug`

在 themes/anzhiyu/layout/includes/anzhiyu/rightmenu.pug 中

大致42 行：

pug

.rightMenu-item#menu-searchBaidu
  i.anzhiyufont.anzhiyu-icon-magnifying-glass
- span 百度搜索
+ span 必应搜索

8. 修改`right_click_menu.js`

在 themes/anzhiyu/source/js/anzhiyu/right_click_menu.js 中

大致364 行：

javascript

// 百度搜索
rm.searchBaidu = function () {
- anzhiyu.snackbarShow("即将跳转到百度搜索", false, 2000);
+ anzhiyu.snackbarShow("即将跳转到必应搜索", false, 2000);
  setTimeout(function () {
-   window.open("https://www.baidu.com/s?wd=" + selectTextNow);
+   window.open("https://www.bing.com/search?q=" + selectTextNow);
  }, "2000");
  rm.hideRightMenu();
};

9. 修改`img`

删除 themes/anzhiyu/source/js/anzhiyu/source/favicon.ico
覆盖 themes/anzhiyu/source/js/anzhiyu/source/img/

https://elykia.lanzoup.com/iJorc2dac4li

Elykia

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自 Elykia

编程开发25

喜欢这篇文章的人也看了

随便逛逛

安知鱼主题：记一次鱼塘朋友圈钓鱼报错的修复

Twikoo 在多吉云CDN场景下获取访客真实IP的解决方案

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

安知鱼主题文件魔改记录

1. 修改 analytics.pug

2. 修改 head.pug

3. 修改 about.styl

4. 修改 about.pug

5.编辑 main.js

6. 修改 sw-rules.js

7. 修改rightmenu.pug

8. 修改right_click_menu.js

9. 修改img

喜欢这篇文章的人也看了

安知鱼主题：记一次鱼塘朋友圈钓鱼报错的修复

Twikoo 在多吉云CDN场景下获取访客真实IP的解决方案

安知鱼主题文件魔改记录

1. 修改 analytics.pug

2. 修改 head.pug

3. 修改 about.styl

4. 修改 about.pug

5.编辑 main.js

6. 修改 sw-rules.js

7. 修改rightmenu.pug

8. 修改right_click_menu.js

9. 修改img

喜欢这篇文章的人也看了

安知鱼主题：记一次鱼塘朋友圈钓鱼报错的修复

Twikoo 在多吉云CDN场景下获取访客真实IP的解决方案

1. 修改 `analytics.pug`

2. 修改 `head.pug`

3. 修改 `about.styl`

4. 修改 `about.pug`

5.编辑 `main.js`

6. 修改 `sw-rules.js`

7. 修改`rightmenu.pug`

8. 修改`right_click_menu.js`

9. 修改`img`

1. 修改 `analytics.pug`

2. 修改 `head.pug`

3. 修改 `about.styl`

4. 修改 `about.pug`

5.编辑 `main.js`

6. 修改 `sw-rules.js`

7. 修改`rightmenu.pug`

8. 修改`right_click_menu.js`

9. 修改`img`