[{"data":1,"prerenderedAt":638},["ShallowReactive",2],{"\u002F2025\u002F03\u002Fbtfaboutpage":3,"index_posts":133,"surround-\u002F2025\u002F03\u002Fbtfaboutpage":633},{"id":4,"title":5,"body":6,"categories":107,"date":109,"description":110,"draft":111,"extension":112,"image":113,"meta":114,"navigation":116,"path":117,"permalink":118,"published":118,"readingTime":119,"recommend":118,"references":118,"seo":124,"sitemap":125,"stem":126,"subtitle":118,"tags":127,"type":130,"updated":131,"__hash__":132},"content\u002Fposts\u002F2025\u002F03\u002FbtfAboutPage.md","关于页面(butterfly)",{"type":7,"value":8,"toc":96},"minimark",[9,13,17,20,24,29,32,39,50,53,58,66,72,78,84,90],[10,11,12],"h2",{"id":12},"前言",[14,15,16],"p",{},"本篇文章在安知鱼的文章基础上加入轻笑部分css，删减不必要的内容",[10,18,19],{"id":19},"实现",[21,22,23],"h3",{"id":23},"效果",[25,26],"pic",{"caption":27,"src":28},"关于页面展示","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost%2Fimg%2F%E5%85%B3%E4%BA%8E%E9%A1%B5%E9%9D%A2%E7%BE%8E%E5%8C%96%2F1.avif",[21,30,31],{"id":31},"覆盖pug文件内容",[33,34,35],"ol",{},[36,37,38],"li",{},"覆盖 \\themes\\butterfly\\layout\\includes\\page\\about.pug（如果没有就新建）:",[40,41,47],"pre",{"className":42,"code":44,"language":45,"meta":46},[43],"language-pug","#about-page\n  .author-main\n    style.\n      \u002F* 1.基础架构 *\u002F\n      #about-page .author-main {\n        display: -webkit-box;\n        display: -moz-box;\n        display: -webkit-flex;\n        display: -ms-flexbox;\n        display: box;\n        display: flex;\n        -webkit-box-align: center;\n        -moz-box-align: center;\n        -o-box-align: center;\n        -ms-flex-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        -moz-box-pack: center;\n        -o-box-pack: center;\n        -ms-flex-pack: center;\n        -webkit-justify-content: center;\n        justify-content: center;\n        margin: 0 0 16px 0;\n        user-select: none;\n      }\n      #about-page .author-box {\n        position: relative;\n        width: 189px;\n        height: 189px;\n        background: rgba(253, 253, 253, 0.8);\n        border-radius: 50%;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      #about-page .author-img {\n        margin: auto;\n        border-radius: 50%;\n        overflow: hidden;\n        width: 180px;\n        height: 180px;\n        z-index: 10;\n        background: var(--mj-card-bg);\n      }\n      .author-tag-left {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-end;\n        margin-right: 30px;\n      }\n      .author-tag-right {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        margin-left: 30px;\n      }\n      \u002F* 2.头像美化 *\u002F\n      #about-page .author-box span {\n        position: absolute;\n        inset: 5px;\n        border-radius: 50%;\n        background: rgba(253, 253, 253, 0.8);\n        z-index: 1;\n      }\n      #about-page .author-box::before {\n        content: '';\n        position: absolute;\n        width: 500px;\n        height: 500px;\n        background-image: conic-gradient(transparent, transparent, transparent, #8758FF);\n        animation: animate 4s linear infinite;\n        animation-delay: -2s;\n      }\n      #about-page .author-box::after {\n        content: '';\n        position: absolute;\n        width: 500px;\n        height: 500px;\n        background-image: conic-gradient(transparent, transparent, transparent, #5CB8E4);\n        animation: animate 4s linear infinite;\n      }\n      \u002F* 3.列表卡片美化 *\u002F\n      .author-tag {\n        transform: translate(0, -4px);\n        padding: 1px 8px;\n        background: var(--heo-card-bg);\n        border: var(--style-border-always);\n        border-radius: 40px;\n        margin-top: 6px;\n        font-size: 14px;\n        font-weight: bold;\n        box-shadow: var(--heo-shadow-lightblack);\n        animation: 6s ease-in-out 0s infinite normal none running floating;\n      }\n      \u002F* 4.列表卡片美化以及动画 *\u002F\n      \u002F* 4.1.左序列 *\u002F\n      .author-tag-left .author-tag:first-child, .author-tag-left .author-tag:last-child {\n        margin-right: -16px;\n      }\n      \u002F* 4.2.右序列 *\u002F\n      .author-tag-right .author-tag:first-child, .author-tag-right .author-tag:last-child {\n        margin-left: -16px;\n      }\n      .author-tag:nth-child(1) {\n        animation-delay: 0s;\n      }\n      .author-tag:nth-child(2) {\n        animation-delay: 0.6s;\n      }\n      .author-tag:nth-child(3) {\n        animation-delay: 1.2s;\n      }\n      .author-tag:nth-child(4) {\n        animation-delay: 1.8s;\n      }\n      \u002F* 5.动画css *\u002F\n      @keyframes floating {\n        0% {\n          transform: translate(0, -4px);\n        }\n        50% {\n          transform: translate(0, 4px);\n        }\n        100% {\n          transform: translate(0, -4px);\n        }\n      }\n      @keyframes animate {\n        0% {\n          transform: rotate(0)\n        }\n        100% {\n          transform: rotate(360deg)\n        }\n      }\n      \u002F* 6.关于本站文字样式美化 *\u002F\n      [data-theme=dark] #about-page .author-title {\n        text-stroke: 1px #bccbe4;\n        -webkit-text-stroke: 1px #bccbe4;\n      }\n      #about-page .author-title {\n        font-size: 2.7rem;\n        font-weight: 700;\n        margin-top: 1px;\n        letter-spacing: 6px;\n        -webkit-background-clip: text;\n        background-image: linear-gradient(90deg, #2ca2b4, #5598de 24%, #7f87ff 45%, #f65aad 85%, #df80b4);\n        background-clip: text;\n        display: inline-block;\n        color: transparent;\n        text-stroke: 2px #3fdaee;\n        -webkit-text-stroke: 1px #3fdaee;\n      }\n    .author-tag-left\n      span.author-tag 💻 Like数码科技\n      span.author-tag 🥣 干饭魂 干饭人\n      span.author-tag 🕊 咕咕咕咕咕咕~\n      span.author-tag 🧱 CV工程师\n    .author-box\n      span\n      .author-img\n        img.no-lightbox(src='https:\u002F\u002Fnpm.elemecdn.com\u002Fanzhiyu-blog-static@1.0.4\u002Fimg\u002Favatar.jpg')\n    .author-tag-right\n      span.author-tag 吃饭不如碎觉 💤\n      span.author-tag 乐观 积极 向上 🤝\n      span.author-tag 专攻各种困难 🔨\n      span.author-tag 人不狠话超多 💢\n    .image-dot\n  p.p.center.logo.large 关于本站\n  .author-content\n    .author-content-item.myInfoAndSayHello\n      .title1 你好，很高兴认识你👋\n      .title2                       \n        | 我叫\n        span.inline-word 陈志伟\n      .title1\n        | 是一名 前端工程师、学生、独立开发者、\n        span.inline-word 博主\n    .aboutsiteTips.author-content-item\n      .author-content-item-tips 追求\n      h2\n        | 源于\n        br\n        | 热爱而去\n        span.inline-word 感受\n        .mask\n          span.first-tips 学习\n          |\n          span 生活\n          |\n          span(data-up) 程序\n          |\n          span(data-show) 体验\n\n  .hello-about\n    .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')\n    .shapes\n      .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')\n      .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')\n      .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')\n    .content\n      h1 Hello there!\n\n  .author-content\n    .about-statistic.author-content-item\n      .card-content\n        .author-content-item-tips 数据\n        span.author-content-item-title 访问统计\n        #statistic\n        .post-tips\n          | 统计信息来自\n          a(href='https:\u002F\u002Finvite.51.la\u002F1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计\n        .banner-button-group\n          a.banner-button(onclick='pjax.loadUrl(\"\u002Farchives\u002F\")', data-pjax-state)\n            i.fas.fa-circle-right\n            |\n            span.banner-button-text 文章隧道\n    .author-content-item-group.column.mapAndInfo\n      .author-content-item.map.single\n        span.map-title\n          | 我现在住在\n          b 中国，长沙市\n      .author-content-item.selfInfo.single\n        div\n          span.selfInfo-title 生于\n          |\n          span.selfInfo-content#selfInfo-content-year(style='color:#43a6c6') 2002\n        div\n          span.selfInfo-title 湖南信息学院\n          |\n          span.selfInfo-content(style='color:#c69043') 软件工程\n        div\n          span.selfInfo-title 现在职业\n          |\n          span.selfInfo-content(style='color:#b04fe6') \n\n  .author-content\n    .author-content-item.maxim\n      .author-content-item-tips 座右铭\n      span.maxim-title\n        span(style='opacity:.6;margin-bottom:8px') 生活明朗，\n        |\n        span 万物可爱。\n    .author-content-item.myphoto\n      img.author-content-img.no-lightbox(alt='自拍', src='https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F09\u002F24\u002F632e9643611ec.jpg')\n\n  .author-content\n    .author-content-item.like-technology\n      .card-content\n        .author-content-item-tips 关注偏好\n        span.author-content-item-title 数码科技\n        .content-bottom\n          .tips 手机、电脑软硬件\n    .author-content-item.game-yuanshen\n      .card-content\n        .author-content-item-tips 爱好游戏\n        span.author-content-item-title 原神\n        .content-bottom\n          .icon-group\n            .loading-bar(role='presentation', aria-hidden='true')\n              img.no-lightbox(src='https:\u002F\u002Fyuanshen.site\u002Fimgs\u002Floading-bar.png', alt='Loading...', longdesc='https:\u002F\u002Fys.mihoyo.com\u002Fmain\u002F')\n          .tips.game-yuanshen-uid UID: 125766904\n\n  .author-content\n    .create-site-post.author-content-item.single\n      .author-content-item-tips 心路历程\n      | 欢迎来到我的博客 😝，这里是我记笔记的地方 🙌，目前就读于长沙\n      strong 湖南信息学院\n      | 的\n      strong 软件工程\n      | 专业，虽然有时候常常会忘记更新笔记，咕咕 ✋~ 但是记笔记真的是一个很棒的习惯 💪，能把学下来的知识进行积累，沉淀，有一句话说的好，能教给别人的知识，才是真正学会了的知识 ⚡ 每周我都会尽量进行更新 ☁️，如果没更的话，可能是我忘了，也可能是我在钻研某个东西的时候太入迷了\n\n  .author-content\n    .author-content-item.single.reward\n      .author-content-item-tips 致谢\n      span.author-content-item-title 赞赏名单\n      .author-content-item-description 感谢因为有你们，让我更加有创作的动力。\n        each i in site.data.reward\n          - let rawData = [...i.reward_list]\n          .reward-list-all\n            - let reward_list_amount = i.reward_list.sort((a,b)=>b.amount -  a.amount)\n            each item, index in reward_list_amount\n              .reward-list-item\n                .reward-list-item-name=item.name\n                .reward-list-bottom-group\n                  if item.amount >= 50\n                    .reward-list-item-money(style='background:var(--anzhiyu-yellow)')=`¥${item.amount}`\n                  else\n                    .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : \"\")}`\n                  .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)\n          .reward-list-updateDate\n            | 最新更新时间：\n            time.datatime.reward-list-updateDate-time(datatime=rawData[0].datatime)=new Date(rawData[0].datatime).toISOString().slice(0, -14)\n      .post-reward\n        style.\n          .post-reward .reward-button {\n            display: inline-block!important;\n            adding: .2rem 2rem!important;\n            ound: var(--btn-bg)!important;\n            color: var(--btn-color)!important;\n            cursor: pointer!important;\n            -webkit-transition: all .4s!important;\n            -moz-transition: all .4s!important;\n            -o-transition: all .4s!important;\n            -ms-transition: all .4s;\n            transition: all .4s;\n          }\n        .reward-main\n          ul.reward-all\n            li.reward-item\n              a.about-reward(arget=\"_blank\" data-pjax-state=\"\")\n                img.entered.loaded.post-qr-code-img(alt=\"微信\" data-lazy-src=\"https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpay\u002Fweixin.jpg\" data-ll-status=\"loaded\" loading=\"lazy\" src=\"https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpay\u002Fweixin.jpg\")\n              .post-qr-code-desc 微信\n            li.reward-item\n              a.about-reward(target=\"_blank\")\n                img.entered.loaded.post-qr-code-img(alt=\"支付宝\" data-lazy-src=\"https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpay\u002Fzfb.png\" data-ll-status=\"loaded\" loading=\"lazy\" src=\"https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpay\u002Fzfb.png\")\n              .post-qr-code-desc 支付宝\n        button.reward-button.tip-button\n          span.tip-button__text 投 喂\n\nscript(src=\"https:\u002F\u002Flf26-cdn-tos.bytecdntp.com\u002Fcdn\u002Fexpire-1-M\u002Fgsap\u002F3.9.1\u002Fgsap.min.js\")\nscript.\n  (() => {\n    function isInViewPortOfOne(el) {\n      if (!el) return;\n      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;\n      const offsetTop = el.offsetTop;\n      const scrollTop = document.documentElement.scrollTop;\n      const top = offsetTop - scrollTop;\n      return top \u003C= viewPortHeight;\n    }\n    fetch('https:\u002F\u002Fv6-widget.51.la\u002Fv6\u002F527574\u002Fquote.js').then(res => res.text()).then((data) => {\n        let title = ['最近活跃', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']\n        let num = data.match(\u002F(\u003C\\\u002Fspan>\u003Cspan>).*?(\\\u002Fspan>\u003C\\\u002Fp>)\u002Fg)\n\n        num = num.map((el) => {\n          let val = el.replace(\u002F(\u003C\\\u002Fspan>\u003Cspan>)\u002Fg, '')\n          let str = val.replace(\u002F(\u003C\\\u002Fspan>\u003C\\\u002Fp>)\u002Fg, '')\n          return str\n        })\n\n        let statisticEl = document.getElementById('statistic')\n\n        \u002F\u002F 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量\n        let statistic = []\n        for (let i = 0; i \u003C num.length; i++) {\n            if (!statisticEl) return\n            if (i == 0 || i == num.length - 1) continue;\n            statisticEl.innerHTML += '\u003Cdiv>\u003Cspan>' + title[i] + '\u003C\u002Fspan>\u003Cspan id='+ title[i] + '>' + num[i] + '\u003C\u002Fspan>\u003C\u002Fdiv>'\n            queueMicrotask(()=> {\n              statistic.push(new CountUp(title[i], 0, num[i], 0, 2, {\n                  useEasing: true,\n                  useGrouping: true,\n                  separator: ',',\n                  decimal: '.',\n                  prefix: '',\n                  suffix: ''\n              }))\n            })\n        }\n\n        function statisticUP () {\n          let statisticElment = document.querySelector('.about-statistic.author-content-item');\n          if(isInViewPortOfOne(statisticElment)) {\n            for (let i = 0; i \u003C num.length; i++) {\n              if (i == 0 || i == num.length - 1) continue;\n              statistic[i-1].start();\n            }\n            document.removeEventListener('scroll', throttleStatisticUP);\n          }\n        }\n\n        const selfInfoContentYear = new CountUp('selfInfo-content-year', 0, 2002, 0, 2, {\n          useEasing: true,\n          useGrouping: false,\n          separator: ',',\n          decimal: '.',\n          prefix: '',\n          suffix: ''\n        })\n\n        function scrollSelfInfoContentYear() {\n          let selfInfoContentYearElment = document.querySelector('.author-content-item.selfInfo.single');\n          if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) {\n            selfInfoContentYear.start()\n            document.removeEventListener('scroll', throttleScrollSelfInfoContentYear);\n          }\n        }\n        const throttleStatisticUP = btf.throttle(statisticUP, 200)\n        document.addEventListener('scroll', throttleStatisticUP, {passive: true})\n\n        const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200)\n        document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true})\n    });\n\n    var pursuitInterval = null;\n      pursuitInterval = setInterval(function () {\n        const show = document.querySelector('span[data-show]')\n        const next = show.nextElementSibling || document.querySelector('.first-tips')\n        const up = document.querySelector('span[data-up]')\n\n        if (up) {\n          up.removeAttribute('data-up')\n        }\n\n        show.removeAttribute('data-show')\n        show.setAttribute('data-up', '')\n\n        next.setAttribute('data-show', '')\n      }, 2000)\n\n      document.addEventListener('pjax:send', function(){\n        clearInterval(pursuitInterval);\n      });\n\n      var helloAboutEl = document.querySelector('.hello-about')\n      helloAboutEl.addEventListener(\"mousemove\", evt => {\n        const mouseX = evt.offsetX;\n        const mouseY = evt.offsetY;\n        gsap.set(\".cursor\", {\n          x: mouseX,\n          y: mouseY,\n        })\n\n        gsap.to(\".shape\", {\n          x: mouseX,\n          y: mouseY,\n          stagger: -0.1\n        })\n      })\n  })()\n","pug","",[48,49,44],"code",{"__ignoreMap":46},[21,51,52],{"id":52},"添加css",[33,54,55],{},[36,56,57],{},"这里使用的是来自于安知鱼的css代码，为了可以后续方便一些，所以写在这里",[40,59,64],{"className":60,"code":62,"language":63,"meta":46},[61],"language-css","#gitcalendar {\n    margin: 0 auto;\n    border-radius: 24px;\n    background: var(--anzhiyu-card-bg);\n    border: var(--style-border-always);\n    box-shadow: var(--anzhiyu-shadow-border);\n    position: relative;\n    padding: 1rem 2rem;\n    overflow: hidden;\n  }\n  \n  #page:has(#about-page) {\n    border: 0;\n    box-shadow: none !important;\n    padding: 0 !important;\n    background: transparent !important;\n  }\n  \n  #page:has(#about-page) .page-title {\n    display: none;\n  }\n  \n  .page:has(#about-page) #footer-wrap {\n    opacity: 1;\n    overflow: visible;\n    height: auto !important;\n    min-height: 16px;\n    color: #666;\n  }\n  \n  #about-page .author-box {\n    position: relative;\n  }\n  #about-page .author-box .author-img {\n    margin: auto;\n    border-radius: 50%;\n    overflow: hidden;\n    width: 180px;\n    height: 180px;\n  }\n  #about-page .author-box .author-img img {\n    border-radius: 50%;\n    overflow: hidden;\n    width: 180px;\n    height: 180px;\n  }\n  \n  #about-page .author-box .image-dot {\n    width: 45px;\n    height: 45px;\n    background: #6bdf8f;\n    position: absolute;\n    border-radius: 50%;\n    border: 6px solid var(--anzhiyu-background);\n    top: 50%;\n    left: 50%;\n    transform: translate(35px, 45px);\n  }\n  \n  .author-content {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    width: 100%;\n    margin-top: 1rem;\n  }\n  \n  #about-page .myInfoAndSayHello {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    color: var(--anzhiyu-white);\n    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);\n    background-size: 200%;\n    animation: gradient 15s ease infinite;\n    width: 59%;\n  }\n  \n  .author-content-item {\n    width: 49%;\n    border-radius: 24px;\n    background: var(--anzhiyu-card-bg);\n    border: var(--style-border-always);\n    box-shadow: var(--anzhiyu-shadow-border);\n    position: relative;\n    padding: 1rem 2rem;\n    overflow: hidden;\n  }\n  \n  #about-page .myInfoAndSayHello .title1 {\n    opacity: 0.8;\n    line-height: 1.3;\n  }\n  \n  #about-page .myInfoAndSayHello .title2 {\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.1;\n    margin: 0.5rem 0;\n  }\n  .inline-word {\n    word-break: keep-all;\n    white-space: nowrap;\n  }\n  \n  #about-page .myInfoAndSayHello .title1 {\n    opacity: 0.8;\n    line-height: 1.3;\n  }\n  \n  .author-content-item.aboutsiteTips {\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    flex-direction: column;\n    width: 39%;\n  }\n  \n  .aboutsiteTips h2 {\n    margin-right: auto;\n    font-size: 36px;\n    font-family: Helvetica;\n    line-height: 1.06;\n    letter-spacing: -0.02em;\n    color: var(--font-color);\n    margin-top: 0;\n  }\n  \n  .aboutsiteTips .mask {\n    height: 36px;\n    position: relative;\n    overflow: hidden;\n    margin-top: 4px;\n  }\n  .aboutsiteTips .mask span {\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    top: 36px;\n    padding-bottom: var(--offset);\n    background-size: 100% 100%;\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-repeat: no-repeat;\n  }\n  .aboutsiteTips .mask span[data-show] {\n    transform: translateY(-100%);\n    transition: 0.5s transform ease-in-out;\n  }\n  .aboutsiteTips .mask span[data-up] {\n    transform: translateY(-200%);\n    transition: 0.5s transform ease-in-out;\n  }\n  .aboutsiteTips .mask span:nth-child(1) {\n    background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1);\n  }\n  .aboutsiteTips .mask span:nth-child(2) {\n    background-image: linear-gradient(45deg, #18e198 50%, #0ec15d);\n  }\n  .aboutsiteTips .mask span:nth-child(3) {\n    background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c);\n  }\n  .aboutsiteTips .mask span:nth-child(4) {\n    background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f);\n  }\n  @media screen and (max-width: 768px) {\n    .author-content-item.map {\n      margin-bottom: 0;\n    }\n  }\n  #about-page .about-statistic {\n    min-height: 380px;\n    width: 39%;\n    background: url(https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F09\u002F23\u002F632d634f8376d.jpg) no-repeat top;\n    background-size: cover;\n    color: var(--anzhiyu-white);\n    overflow: hidden;\n  }\n  #about-page .about-statistic::after {\n    box-shadow: 0 -159px 173px 71px #0c1c2c inset;\n    position: absolute;\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n  }\n  .author-content-item .card-content {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    padding: 1rem 2rem;\n  }\n  \n  .author-content-item .card-content .author-content-item-title {\n    margin-bottom: 0.5rem;\n  }\n  .author-content-item .author-content-item-title {\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1;\n  }\n  #statistic {\n    font-size: 16px;\n    border-radius: 15px;\n    width: 100%;\n    color: var(--anzhiyu-white);\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    flex-wrap: wrap;\n    margin-top: 1rem;\n    margin-bottom: 2rem;\n  }\n  #statistic div span:first-child {\n    opacity: 0.8;\n    font-size: 12px;\n  }\n  #statistic div span:last-child {\n    font-weight: 700;\n    font-size: 34px;\n    line-height: 1;\n    white-space: nowrap;\n  }\n  #statistic div {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    width: 50%;\n    margin-bottom: 0.5rem;\n  }\n  \n  .post-tips {\n    color: var(--anzhiyu-gray);\n    font-size: 14px;\n    position: absolute;\n    bottom: 1rem;\n    left: 2rem;\n  }\n  .post-tips a {\n    color: var(--anzhiyu-gray) !important;\n    border: none !important;\n  }\n  .author-content-item .card-content .banner-button-group {\n    position: absolute;\n    bottom: 1.5rem;\n    right: 2rem;\n  }\n  .author-content-item .card-content .banner-button-group .banner-button {\n    height: 40px;\n    width: 124px;\n    border-radius: 20px;\n    justify-content: center;\n    background: var(--anzhiyu-card-bg);\n    color: var(--font-color);\n    display: flex;\n    align-items: center;\n    z-index: 1;\n    transition: 0.3s;\n    cursor: pointer;\n    border-bottom: 0 !important;\n  }\n  .author-content-item .card-content .banner-button-group .banner-button i {\n    margin-right: 8px;\n    font-size: 1rem;\n  }\n  #about-page .author-content-item .card-content .banner-button-group .banner-button i {\n    font-size: 1.5rem;\n  }\n  \n  .author-content-item .card-content .banner-button-group .banner-button:hover {\n    background: var(--anzhiyu-main);\n    color: var(--anzhiyu-white);\n    border-radius: 20px !important;\n  }\n  .author-content-item.personalities {\n    position: relative;\n    width: 59%;\n  }\n  \n  .author-content-item.personalities .image {\n    position: absolute;\n    right: 30px;\n    top: 10px;\n    width: 220px;\n    transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02);\n  }\n  .author-content-item.personalities .image img {\n    display: block;\n    margin: 0 auto 20px;\n    max-width: 100%;\n    transition: filter 375ms ease-in 0.2s;\n  }\n  .author-content-item.personalities:hover .image {\n    transform: rotate(-10deg);\n  }\n  .author-content-item.myphoto {\n    height: 60%;\n    position: relative;\n    overflow: hidden;\n    min-height: 200px;\n    max-height: 400px;\n    width: 45%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .author-content-item.myphoto img {\n    position: absolute;\n    min-width: 100%;\n    object-fit: cover;\n    transition: 0.6s;\n    animation: coverIn 2s ease-out forwards;\n    transition: transform 2s ease-out !important;\n  }\n  .author-content-item.myphoto:hover img {\n    transform: scale(1.1);\n  }\n  .author-content-item:hover .card-background-icon {\n    transform: rotate(20deg);\n  }\n  .author-content-item.personalities .title2 {\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.1;\n  }\n  \n  .author-content-item.map {\n    background: url(https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F09\u002F24\u002F632e6f48981d8.jpg) no-repeat center;\n    min-height: 160px;\n    max-height: 400px;\n    position: relative;\n    overflow: hidden;\n    margin-bottom: 0.5rem;\n    height: 60%;\n    background-size: 100%;\n    transition: 1s ease-in-out;\n  }\n  [data-theme=\"dark\"] .author-content-item.map {\n    background: url(https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F09\u002F26\u002F6330ebf1f3e65.jpg) no-repeat center;\n    background-size: 100%;\n  }\n  \n  .author-content-item.single {\n    width: 100%;\n  }\n  \n  .author-content-item.map .map-title {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background: var(--anzhiyu-maskbg);\n    padding: 0.5rem 2rem;\n    backdrop-filter: saturate(180%) blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    transition: 1s ease-in-out;\n    font-size: 20px;\n  }\n  .author-content-item.map .map-title b {\n    color: var(--font-color);\n  }\n  .author-content-item.selfInfo {\n    display: flex;\n    min-height: 100px;\n    max-height: 400px;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    height: -webkit-fill-available;\n    height: 40%;\n  }\n  .author-content-item.selfInfo div {\n    display: flex;\n    flex-direction: column;\n    margin: 0.5rem 2rem 0.5rem 0;\n  }\n  .author-content-item.selfInfo .selfInfo-title {\n    opacity: 0.8;\n    font-size: 12px;\n    line-height: 1;\n    margin-bottom: 8px;\n  }\n  .author-content-item.selfInfo .selfInfo-content {\n    font-weight: 700;\n    font-size: 34px;\n    line-height: 1;\n  }\n  .author-content-item-group.column.mapAndInfo {\n    width: 59%;\n  }\n  .author-content-item.map:hover {\n    background-size: 120%;\n    transition: 4s ease-in-out;\n    background-position-x: 0;\n    background-position-y: 36%;\n  }\n  .author-content-item.map:hover .map-title {\n    bottom: -100%;\n  }\n  .author-content-item-group.column {\n    display: flex;\n    flex-direction: column;\n    width: 49%;\n    justify-content: space-between;\n  }\n  \n  .post-tips a:hover {\n    color: var(--anzhiyu-main) !important;\n    background: none !important;\n  }\n  \n  .author-content-item.single.reward .reward-list-updateDate {\n    color: var(--anzhiyu-gray);\n    font-size: 14px;\n  }\n  .tip-button {\n    border: 0;\n    border-radius: 8px;\n    padding: .2rem 1.5rem;\n    font-size: 20px;\n    font-weight: 600;\n    height: 2.6rem;\n    margin-bottom: -4rem;\n    outline: 0;\n    position: relative;\n    top: 0;\n    transform-origin: 0 100%;\n    transition: transform 50ms ease-in-out;\n    width: auto;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .coin::before,\n  .coin__back,\n  .coin__back::after,\n  .coin__front,\n  .coin__front::after,\n  .coin__middle {\n    border-radius: 50%;\n    box-sizing: border-box;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    width: 100%;\n    z-index: 3;\n  }\n  .coin-wrapper {\n    background: 0 0;\n    bottom: 0;\n    height: 18rem;\n    left: 0;\n    opacity: 1;\n    overflow: hidden;\n    pointer-events: none;\n    position: absolute;\n    transform: none;\n    transform-origin: 50% 100%;\n    transition: opacity 0.2s linear 0.1s, transform 0.3s ease-out;\n    width: 100%;\n  }\n  .coin__front::after {\n    background: rgba(0, 0, 0, 0.2);\n    content: \"\";\n    opacity: var(--front-y-multiplier);\n  }\n  .coin__back::after {\n    background: rgba(0, 0, 0, 0.2);\n    content: \"\";\n    opacity: var(--back-y-multiplier);\n  }\n  .coin__middle {\n    background: #737c99;\n    transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem \u002F 2)) scaleY(var(--middle-scale-multiplier));\n  }\n  .coin::before {\n    background: radial-gradient(circle at 25% 65%, transparent 50%, rgba(255, 255, 255, 0.9) 90%), linear-gradient(55deg, transparent\n          calc(var(--shine-bg-multiplier) + 0), #e9f4ff calc(var(--shine-bg-multiplier) + 0), transparent calc(var(\n                --shine-bg-multiplier\n              ) + 50%));\n    content: \"\";\n    opacity: var(--shine-opacity-multiplier);\n    transform: translateY(calc(var(--middle-y-multiplier) * 0.3181818182rem \u002F -2)) scaleY(var(--middle-scale-multiplier))\n      rotate(calc(var(--coin-rotation-multiplier) * 1deg));\n    z-index: 10;\n  }\n  \n  .coin {\n    --front-y-multiplier: 0;\n    --back-y-multiplier: 0;\n    --coin-y-multiplier: 0;\n    --coin-x-multiplier: 0;\n    --coin-scale-multiplier: 0;\n    --coin-rotation-multiplier: 0;\n    --shine-opacity-multiplier: 0.4;\n    --shine-bg-multiplier: 50%;\n    bottom: calc(var(--coin-y-multiplier) * 1rem - 3.5rem);\n    height: 3.5rem;\n    margin-bottom: 3.05rem;\n    position: absolute;\n    right: calc(var(--coin-x-multiplier) * 34% + 16%);\n    transform: translateX(50%) scale(calc(0.4 + var(--coin-scale-multiplier))) rotate(calc(var(\n              --coin-rotation-multiplier\n            ) * -1deg));\n    transition: opacity 0.1s linear 0.2s;\n    width: 3.5rem;\n    z-index: 3;\n  }\n  \n  .coin__back {\n    background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),\n      radial-gradient(circle at 50% 40%, #fcfaf9 23%, transparent 23%), radial-gradient(circle at 50% 100%, #fcfaf9 35%, transparent\n          35%);\n    background-color: #8590b3;\n    background-size: 100% 100%;\n    transform: translateY(calc(var(--back-y-multiplier) * 0.3181818182rem \u002F 2)) scaleY(var(--back-scale-multiplier));\n  }\n  .coin__front {\n    background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(115, 124, 153, 0.4) 54%, #c2cadf 54%),\n      linear-gradient(210deg, #8590b3 32%, transparent 32%), linear-gradient(150deg, #8590b3 32%, transparent 32%),\n      linear-gradient(to right, #8590b3 22%, transparent 22%, transparent 78%, #8590b3 78%), linear-gradient(\n        to bottom,\n        #fcfaf9 44%,\n        transparent 44%,\n        transparent 65%,\n        #fcfaf9 65%,\n        #fcfaf9 71%,\n        #8590b3 71%\n      ), linear-gradient(to right, transparent 28%, #fcfaf9 28%, #fcfaf9 34%, #8590b3 34%, #8590b3 40%, #fcfaf9 40%, #fcfaf9\n          47%, #8590b3 47%, #8590b3 53%, #fcfaf9 53%, #fcfaf9 60%, #8590b3 60%, #8590b3 66%, #fcfaf9 66%, #fcfaf9 72%, transparent\n          72%);\n    background-color: #8590b3;\n    background-size: 100% 100%;\n    transform: translateY(calc(var(--front-y-multiplier) * 0.3181818182rem \u002F 2)) scaleY(var(--front-scale-multiplier));\n  }\n  .tip-button__text {\n    color: #fff;\n    opacity: 1;\n    position: relative;\n    transition: opacity 0.1s linear 0.5s;\n    z-index: 3;\n  }\n  .author-content .post-reward .reward-main .reward-all:before {\n    top: -11px;\n    bottom: auto;\n  }\n  #about-page .post-reward .reward-item a:hover {\n    background: transparent !important;\n  }\n  #about-page .post-reward .reward-item a {\n    border-bottom: none !important;\n  }\n  #about-page .post-reward .reward-item a img {\n    margin-bottom: 0 !important;\n  }\n  #about-page .post-reward .reward-main .reward-all {\n    border-radius: 10px;\n    padding: 20px 10px !important;\n  }\n  .post-reward .reward-main .reward-all .reward-item {\n    padding: 0 8px !important;\n  }\n  .post-reward .reward-main .reward-all li.reward-item::before {\n    content: none !important;\n  }\n  .post-reward .reward-main .reward-all:after {\n    content: none !important;\n  }\n  .author-content-item.maxim {\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.1;\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    justify-content: center;\n    width: 53%;\n  }\n  .author-content-item .author-content-item-tips {\n    opacity: 0.8;\n    font-size: 12px;\n    margin-bottom: 0.5rem;\n  }\n  .author-content-item.maxim .maxim-title {\n    display: flex;\n    flex-direction: column;\n  }\n  .author-content-item.buff {\n    height: 200px;\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.1;\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    justify-content: center;\n    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%);\n    color: var(--anzhiyu-white);\n    background-size: 200%;\n    animation: gradient 15s ease infinite;\n    min-height: 200px;\n    height: fit-content;\n    width: 59%;\n  }\n  .author-content-item.buff .card-content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .author-content-item.buff .buff-title {\n    display: flex;\n    flex-direction: column;\n  }\n  .card-background-icon {\n    font-size: 12rem;\n    opacity: 0.2;\n    position: absolute;\n    right: 0;\n    bottom: -40%;\n    transform: rotate(30deg);\n    transition: 2s ease-in-out;\n  }\n  .author-content-item.game-yuanshen {\n    background: url(https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F12\u002F19\u002F63a079ca63c8a.webp) no-repeat top;\n    background-size: cover;\n    min-height: 300px;\n    overflow: hidden;\n    color: var(--anzhiyu-white);\n    width: 49%;\n  }\n  \n  .author-content-item .content-bottom {\n    margin-top: auto;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .author-content-item .content-bottom .icon-group {\n    display: flex;\n    position: relative;\n  }\n  .author-content-item .content-bottom .icon-group i {\n    display: inline-block;\n    width: 143px;\n    height: 18px;\n    margin-right: 0.5rem;\n  }\n  .icon-pos-mid {\n    background: url(https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F09\u002F25\u002F632fb9cecfc8c.png);\n  }\n  .author-content-item.game-yuanshen::after {\n    box-shadow: 0 -69px 203px 11px #575d8b inset;\n    position: absolute;\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n  }\n  \n  .author-content-item.comic-content {\n    width: 39%;\n    background: url(https:\u002F\u002Fnpm.elemecdn.com\u002Fanzhiyu-blog@1.1.6\u002Fimg\u002Fpost\u002Fcommon\u002Fviolet.jpg) no-repeat top;\n    background-size: cover;\n    min-height: 300px;\n    overflow: hidden;\n    color: violet;\n  }\n  .author-content-item.comic-content::after {\n    box-shadow: 0 -48px 203px 11px #fbe9b8 inset;\n    position: absolute;\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n  }\n  \n  .author-content-item.like-technology {\n    background: url(https:\u002F\u002Fimg02.anheyu.com\u002Fadminuploads\u002F1\u002F2022\u002F09\u002F24\u002F632f0dd8f33c6.webp) no-repeat;\n    background-size: cover;\n    min-height: 230px;\n    color: var(--anzhiyu-white);\n    width: 49%!important;\n  }\n  \n  .author-content-item.like-music {\n    background: url(https:\u002F\u002Fp2.music.126.net\u002FMrg1i7DwcwjWBvQPIMt_Mg==\u002F79164837213438.jpg) no-repeat top;\n    background-size: cover;\n    min-height: 400px;\n    color: var(--anzhiyu-white);\n    overflow: hidden;\n  }\n  \n  .author-content-item .card-content .banner-button-group {\n    position: absolute;\n    bottom: 1.5rem;\n    right: 2rem;\n  }\n  \n  .author-content-item.like-music::after {\n    box-shadow: 0 -69px 203px 11px #453e38 inset;\n    position: absolute;\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n  }\n  \n  @media screen and (max-width: 768px) {\n    #gitcalendar {\n      display: none;\n    }\n    [data-theme=\"dark\"] .author-content-item .card-content .banner-button-group .banner-button {\n      color: var(--anzhiyu-black) !important;\n    }\n    .author-content-item .card-content .banner-button-group .banner-button:hover {\n      background: none !important;\n    }\n    .author-content-item.game-yuanshen .content-bottom {\n      padding-bottom: 10px;\n    }\n    .author-content-item.game-yuanshen .game-yuanshen-uid {\n      display: none;\n    }\n    .author-content {\n      margin-top: 0;\n    }\n    .author-content-item {\n      width: 100% !important;\n      margin-top: 1rem;\n      padding: 1rem;\n    }\n    .author-content-item.map {\n      margin-bottom: 0;\n    }\n    .author-content-item-group.column {\n      width: 100% !important;\n    }\n    .author-content-item.selfInfo {\n      height: 95%;\n    }\n    .author-content-item.personalities {\n      height: 170px;\n    }\n    .post-tips {\n      left: auto;\n    }\n    .author-content-item.personalities .image {\n      width: 90px;\n    }\n    .site-card-group > a {\n      width: 100% !important;\n    }\n    .post-reward {\n      margin-top: 2px !important;\n    }\n    .reward-list-item {\n      width: 100% !important;\n    }\n    .layout > div:first-child:not(.recent-posts) {\n      \u002F* border-radius: 0; *\u002F\n      padding: 0 1rem !important;\n      box-shadow: none !important;\n      background: var(--anzhiyu-background);\n    }\n    .author-content-item .card-content .banner-button-group .banner-button-text {\n      display: none;\n    }\n    .author-content-item .card-content .banner-button-group {\n      right: 1rem;\n      bottom: 1rem;\n    }\n    .author-content-item .card-content .banner-button-group .banner-button {\n      background: 0 0;\n      padding: 0;\n    }\n    .author-content-item .card-content .banner-button-group .banner-button i {\n      margin-right: 0;\n      font-size: 1.5rem;\n      background: white;\n      border-radius: 50%;\n      padding: 6px;\n      margin-left: 80px;\n    }\n    .author-content-item .card-content .banner-button-group .banner-button:hover i {\n      background: var(--anzhiyu-background) !important;\n      color: var(--anzhiyu-theme);\n    }\n    #selfInfo-content-year {\n      width: 90px;\n    }\n  }\n  \n  @media screen and (min-width: 768px) and (max-width: 896px) {\n    .author-content-item.like-music .content-bottom .tips {\n      display: none;\n    }\n  }\n  \n  \u002F* 赞赏的css *\u002F\n  \n  .reward-list-all {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    margin-top: 1rem;\n    margin-bottom: 0.5rem;\n    margin-left: -0.25rem;\n    margin-right: -0.25rem;\n  }\n  \n  .reward-list-item {\n    padding: 1rem;\n    border-radius: 12px;\n    border: var(--style-border-always);\n    width: calc((100% \u002F 3) - 0.5rem);\n    margin: 0 0.25rem 0.5rem 0.25rem;\n    box-shadow: var(--anzhiyu-shadow-border);\n  }\n  \n  .reward-list-item .reward-list-item-name {\n    font-size: 1rem;\n    font-weight: 700;\n    line-height: 1;\n    margin-bottom: 0.5rem;\n  }\n  \n  .reward-list-item .reward-list-bottom-group {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  \n  .reward-list-item .reward-list-item-money {\n    padding: 4px;\n    background: var(--font-color);\n    color: var(--card-bg);\n    font-size: 12px;\n    line-height: 1;\n    border-radius: 4px;\n    margin-right: 4px;\n    white-space: nowrap;\n  }\n  \n  .reward-list-item .reward-list-item-time {\n    font-size: 12px;\n    color: var(--anzhiyu-secondtext);\n    white-space: nowrap;\n  }\n","css",[48,65,62],{"__ignoreMap":46},[40,67,70],{"className":68,"code":69,"language":63,"meta":46},[61],".author-content-item.careers {\n    min-height: 400px;\n  }\n  .author-content-item.careers .careers-group {\n    margin-top: 12px;\n  }\n  .author-content-item.careers .careers-item {\n    display: flex;\n    align-items: center;\n  }\n  .author-content-item.careers .careers-item .circle {\n    width: 16px;\n    height: 16px;\n    margin-right: 8px;\n    border-radius: 16px;\n  }\n  .author-content-item.careers .careers-item .name {\n    color: var(--anzhiyu-secondtext);\n  }\n  .author-content-item.careers .careers-item {\n    display: flex;\n    align-items: center;\n  }\n  .author-content-item.careers .careers-item .circle {\n    width: 16px;\n    height: 16px;\n    margin-right: 8px;\n    border-radius: 16px;\n  }\n  .author-content-item.careers .careers-item .name {\n    color: var(--anzhiyu-secondtext);\n  }\n  .author-content-item.careers img {\n    position: absolute;\n    left: 0;\n    bottom: 20px;\n    width: 100%;\n    transition: 0.6s;\n  }\n",[48,71,69],{"__ignoreMap":46},[40,73,76],{"className":74,"code":75,"language":63,"meta":46},[61],":root {\n    --loadingbar-background-color: #2c2b30;\n    --loadingbar-prospect-color: #ece5d8;\n  }\n  \n  \u002F* html.dark body {\n    background-color: #161d22;\n  } *\u002F\n  \n  .loading-bar {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 500px;\n    height: 62.5px;\n    transform: translate(-25%, -50%) scale(0.5);\n    transition: all 0.5s;\n    user-select: none;\n    overflow: hidden;\n  }\n  \n  .loading-bar img {\n    position: absolute;\n    top: 500px;\n    left: 0;\n    filter: drop-shadow(0 -500px 0 var(--loadingbar-background-color));\n  }\n  \n  .loading-bar::after {\n    content: \"\";\n    position: absolute;\n    top: 500px;\n    left: 0;\n    filter: drop-shadow(0 -500px 0 var(--loadingbar-prospect-color));\n    width: 500px;\n    height: 62.5px;\n    background: url(\"https:\u002F\u002Fyuanshen.site\u002Fimgs\u002Floading-bar.png\") no-repeat left 100%;\n    background-size: 500px 62.5px;\n    background-position-x: 0;\n  }\n  .author-content-item.game-yuanshen:hover .loading-bar::after {\n    animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards;\n  }\n  \n  @media screen and (max-width: 719px) {\n    .loading-bar .loading-bar {\n      display: none;\n    }\n  }\n  \n  @media screen and (max-width: 719px) and (orientation: landscape) {\n    .loading-bar .loading-bar {\n      display: block !important;\n      transform: translate(-50%, -50%) scale(0.7) !important;\n    }\n  }\n  \n  @supports not (filter: drop-shadow(0 0 0 #fff)) {\n    .loading-bar:before {\n      content: \"Your browser does not support the animation\";\n    }\n  }\n  \n  @keyframes loading-bar {\n    0% {\n      width: 0;\n      background-size: 500px 62.5px;\n    }\n    16.6% {\n    }\n    33.2% {\n    }\n    49.8% {\n    }\n    66.4% {\n    }\n    83% {\n      width: 475px;\n    }\n    83.1% {\n      width: 475px;\n    }\n    83.2% {\n      width: 475px;\n    }\n    83.3% {\n      width: 475px;\n    }\n    83.4% {\n      width: 475px;\n    }\n    83.5% {\n      width: 475px;\n    }\n    83.6% {\n      width: 475px;\n    }\n    83.7% {\n      width: 475px;\n    }\n    83.8% {\n      width: 475px;\n    }\n    83.9% {\n      width: 475px;\n    }\n    84% {\n      width: 475px;\n    }\n    85% {\n      width: 475px;\n    }\n    86% {\n      width: 475px;\n    }\n    87% {\n      width: 475px;\n    }\n    100% {\n      width: 500px;\n    }\n  }\n",[48,77,75],{"__ignoreMap":46},[40,79,82],{"className":80,"code":81,"language":63,"meta":46},[61],".hello-about {\n    margin: 20px auto;\n    border-radius: 24px;\n    background: var(--anzhiyu-card-bg);\n    border: var(--style-border-always);\n    box-shadow: var(--anzhiyu-shadow-border);\n    position: relative;\n    overflow: hidden;\n    user-select: none;\n  }\n  \n  .shapes {\n    position: relative;\n    height: 315px;\n    width: 100%;\n    background: #2128bd;\n    overflow: hidden;\n  }\n  \n  .shape {\n    will-change: transform;\n    position: absolute;\n    border-radius: 50%;\n  }\n  \n  .shape.shape-1 {\n    background: #005ffe;\n    width: 650px;\n    height: 650px;\n    margin: -325px 0 0 -325px;\n  }\n  \n  .shape.shape-2 {\n    background: #ffe5e3;\n    width: 440px;\n    height: 440px;\n    margin: -220px 0 0 -220px;\n  }\n  \n  .shape.shape-3 {\n    background: #ffcc57;\n    width: 270px;\n    height: 270px;\n    margin: -135px 0 0 -135px;\n  }\n  \n  .hello-about .content {\n    top: 0;\n    left: 0;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 315px;\n    width: 100%;\n    background: #fff;\n    mix-blend-mode: screen;\n  }\n  [data-theme=\"dark\"] .hello-about .content {\n    background: transparent;\n  }\n  [data-theme=\"dark\"] .hello-about h1 {\n    color: var(--anzhiyu-white);\n  }\n  \n  .hello-about h1 {\n    font-size: 200px;\n    color: #000;\n    margin: 0;\n    text-align: center;\n    font: inherit;\n    vertical-align: baseline;\n    line-height: 1;\n    font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  @media (min-width: 419px) {\n    .hello-about h1 {\n      font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));\n    }\n  }\n  \n  .cursor {\n    position: absolute;\n    background: #2128bd;\n    width: 20px;\n    height: 20px;\n    margin: -10px 0 0 -10px;\n    border-radius: 50%;\n    will-change: transform;\n    user-select: none;\n    pointer-events: none;\n    z-index: 3;\n  }\n  \n  ::selection {\n    color: #fff;\n    background: #2128bd;\n  }\n",[48,83,81],{"__ignoreMap":46},[40,85,88],{"className":86,"code":87,"language":63,"meta":46},[61],".site-card-group .site-card .info {\n    margin-top: 0;\n  }\n  .site-card-group > a {\n    width: calc(100% \u002F 4 - 0.5rem);\n    height: 150px;\n    position: relative;\n    display: block;\n    margin: 0.5rem 0.25rem;\n    float: left;\n    overflow: hidden;\n    padding: 0;\n    border-radius: 8px;\n    -webkit-transition: all 0.3s ease 0s, -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    -moz-transition: all 0.3s ease 0s, -moz-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    -o-transition: all 0.3s ease 0s, -o-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    -ms-transition: all 0.3s ease 0s, -ms-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    transition: all 0.3s ease 0s, transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    -webkit-box-shadow: none;\n    box-shadow: none;\n    border: var(--style-border) !important;\n  }\n  \n  .site-card-group > a .wrapper {\n    position: relative;\n  }\n  \n  .site-card-group > a .cover {\n    width: 100%;\n    -webkit-transition: -webkit-transform 0.5s ease-out;\n    -moz-transition: -moz-transform 0.5s ease-out;\n    -o-transition: -o-transform 0.5s ease-out;\n    -ms-transition: -ms-transform 0.5s ease-out;\n    transition: transform 0.5s ease-out;\n  }\n  \n  .site-card-group > a .info,\n  .site-card-group > a .wrapper .cover {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n  \n  .site-card-group > a .info {\n    display: -webkit-box;\n    display: -moz-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -moz-box-orient: vertical;\n    -o-box-orient: vertical;\n    -webkit-flex-direction: column;\n    -ms-flex-direction: column;\n    flex-direction: column;\n    -webkit-box-pack: center;\n    -moz-box-pack: center;\n    -o-box-pack: center;\n    -ms-flex-pack: center;\n    -webkit-justify-content: center;\n    justify-content: center;\n    -webkit-box-align: center;\n    -moz-box-align: center;\n    -o-box-align: center;\n    -ms-flex-align: center;\n    -webkit-align-items: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: 3px;\n    background-color: rgba(255, 255, 255, 0.7);\n    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    -moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    -o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    -ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n    transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;\n  }\n  \n  .site-card-group > a .info img {\n    position: relative;\n    top: 45px;\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    -webkit-box-shadow: 0 0 10px rgb(0 0 0 \u002F 30%);\n    box-shadow: 0 0 10px rgb(0 0 0 \u002F 30%);\n    z-index: 1;\n    text-align: center;\n    pointer-events: none;\n  }\n  \n  .site-card-group > a .info span {\n    padding: 20px 10% 60px 10%;\n    font-size: 16px;\n    width: 100%;\n    text-align: center;\n    -webkit-box-shadow: 0 0 10px rgb(0 0 0 \u002F 30%);\n    box-shadow: 0 0 10px rgb(0 0 0 \u002F 30%);\n    background-color: rgba(255, 255, 255, 0.7);\n    color: var(--font-color);\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n    text-overflow: ellipsis;\n  }\n  \n  .site-card-group .site-card:hover {\n    border-color: var(--anzhiyu-main) !important;\n    background-color: var(--anzhiyu-main) !important;\n    -webkit-box-shadow: var(--anzhiyu-shadow-theme) !important;\n    box-shadow: var(--anzhiyu-shadow-theme) !important;\n  }\n  .site-card-group > a:hover .wrapper img {\n    -webkit-transform: scale(1.2);\n    -moz-transform: scale(1.2);\n    -o-transform: scale(1.2);\n    -ms-transform: scale(1.2);\n    transform: scale(1.2);\n  }\n  \n  .site-card-group > a .cover {\n    width: 100%;\n    -webkit-transition: -webkit-transform 0.5s ease-out;\n    -moz-transition: -moz-transform 0.5s ease-out;\n    -o-transition: -o-transform 0.5s ease-out;\n    -ms-transition: -ms-transform 0.5s ease-out;\n    transition: transform 0.5s ease-out;\n  }\n  .site-card-group > a .wrapper img {\n    height: 150px;\n    pointer-events: none;\n  }\n  .site-card-group .site-card .wrapper img {\n    -webkit-transition: -webkit-transform 0.5s ease-out !important;\n    -moz-transition: -moz-transform 0.5s ease-out !important;\n    -o-transition: -o-transform 0.5s ease-out !important;\n    -ms-transition: -ms-transform 0.5s ease-out !important;\n    transition: transform 0.5s ease-out !important;\n  }\n  .site-card-group > a .wrapper .fadeIn {\n    -webkit-animation: coverIn 0.8s ease-out forwards;\n    -moz-animation: coverIn 0.8s ease-out forwards;\n    -o-animation: coverIn 0.8s ease-out forwards;\n    -ms-animation: coverIn 0.8s ease-out forwards;\n    animation: coverIn 0.8s ease-out forwards;\n  }\n  \n  .site-card-group > a:hover .info {\n    -webkit-transform: translateY(-100%);\n    -moz-transform: translateY(-100%);\n    -o-transform: translateY(-100%);\n    -ms-transform: translateY(-100%);\n    transform: translateY(-100%);\n  }\n",[48,89,87],{"__ignoreMap":46},[40,91,94],{"className":92,"code":93,"language":63,"meta":46},[61],".author-content-item.skills {\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    flex-direction: column;\n    width: 50%;\n    min-height: 450px;\n  }\n  \n  .author-content-item.skills .skills-style-group {\n    position: relative;\n  }\n  \n  .author-content-item.skills .tags-group-all {\n    display: flex;\n    transform: rotate(0);\n    transition: 0.3s;\n  }\n  .author-content-item.skills .tags-group-wrapper {\n    margin-top: 40px;\n    display: flex;\n    flex-wrap: nowrap;\n    animation: rowup 60s linear infinite;\n  }\n  .tags-group-icon-pair {\n    margin-left: 1rem;\n  }\n  .tags-group-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #fff;\n    font-size: 66px;\n    font-weight: 700;\n    box-shadow: var(--anzhiyu-shadow-blackdeep);\n    width: 120px;\n    height: 120px;\n    border-radius: 30px;\n  }\n  .tags-group-icon img {\n    width: 60%;\n    margin: 0 auto !important;\n  }\n  .tags-group-icon-pair .tags-group-icon:nth-child(even) {\n    margin-top: 1rem;\n    transform: translate(-60px);\n  }\n  .author-content-item.skills .skills-list {\n    display: flex;\n    opacity: 0;\n    transition: 0.3s;\n    position: absolute;\n    width: 100%;\n    top: 0;\n    left: 0;\n    flex-wrap: wrap;\n    flex-direction: row;\n    margin-top: 10px;\n  }\n  .author-content-item.skills .skill-info {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n    margin-top: 10px;\n    background: var(--anzhiyu-background);\n    border-radius: 40px;\n    padding: 4px 12px 4px 8px;\n    border: var(--style-border);\n    box-shadow: var(--anzhiyu-shadow-border);\n  }\n  .author-content-item.skills .skill-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 8px;\n  }\n  .author-content-item.skills .skill-icon img {\n    width: 18px;\n    height: 18px;\n    margin: 0 auto !important;\n  }\n  .author-content-item.skills .etc {\n    margin-right: 10px;\n    margin-top: 10px;\n  }\n  \n  @keyframes rowup {\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(-50%);\n    }\n  }\n  .author-content-item.skills:hover .skills-style-group .tags-group-all {\n    opacity: 0;\n  }\n  .author-content-item.skills:hover .skills-style-group .skills-list {\n    opacity: 1;\n  }\n",[48,95,93],{"__ignoreMap":46},{"title":46,"searchDepth":97,"depth":97,"links":98},4,[99,101],{"id":12,"depth":100,"text":12},2,{"id":19,"depth":100,"text":19,"children":102},[103,105,106],{"id":23,"depth":104,"text":23},3,{"id":31,"depth":104,"text":31},{"id":52,"depth":104,"text":52},[108],"站点魔改","2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。",false,"md","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif",{"top_img":111,"slots":115},{},true,"\u002F2025\u002F03\u002Fbtfaboutpage",null,{"text":120,"minutes":121,"time":122,"words":123},"24 min read",23.275,1396500,4655,{"title":5,"description":110},{"loc":117},"posts\u002F2025\u002F03\u002FbtfAboutPage",[128,129],"hexo","butterfly","tech","2025-03-25 11:20:00","WV83hs8E40cURqM5dp0Pz0TY_tr16QJLnyzLvMWO-BE",[134,149,164,178,192,205,218,230,234,246,257,271,287,302,315,332,346,361,376,391,406,422,439,455,467,481,495,507,521,533,543,555,567,580,591,602,615,624],{"categories":135,"date":137,"description":138,"image":118,"path":139,"readingTime":140,"recommend":118,"tags":145,"title":147,"type":130,"updated":148},[136],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":141,"minutes":142,"time":143,"words":144},"48 min read",47.34,2840400,9468,[128,129,146],"美化","即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":150,"date":151,"description":152,"image":153,"path":154,"readingTime":155,"recommend":160,"tags":161,"title":162,"type":130,"updated":163},[108],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":156,"minutes":157,"time":158,"words":159},"11 min read",10.8,648000,2160,1,[128,129],"友链魔改","2025-04-19 12:09:00",{"categories":165,"date":166,"description":167,"image":168,"path":169,"readingTime":170,"recommend":160,"tags":175,"title":176,"type":130,"updated":177},[108],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":171,"minutes":172,"time":173,"words":174},"9 min read",8.585,515100,1717,[128,129],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":179,"date":180,"description":181,"image":182,"path":183,"readingTime":184,"recommend":160,"tags":189,"title":190,"type":130,"updated":191},[108],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":185,"minutes":186,"time":187,"words":188},"4 min read",3.31,198600,662,[128,129,146],"轻笑底部美化","2025-02-28 10:00:00",{"categories":193,"date":194,"description":195,"image":196,"path":197,"readingTime":198,"recommend":118,"tags":202,"title":203,"type":130,"updated":204},[108],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":185,"minutes":199,"time":200,"words":201},3.08,184800,616,[128,129],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":206,"date":207,"description":208,"image":209,"path":210,"readingTime":211,"recommend":118,"tags":215,"title":216,"type":130,"updated":217},[108],"2025-03-05 08:00:00","这篇文章讲述如何给自己博客中的归档、分类、标签页三个页面的文章卡片添加数字来进行编排，以及对添加的数字进行CSS美化，但也请注意要经常备份以免出现错误。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_29.avif?v=20260104","\u002F2025\u002F03\u002Fartice-sort",{"text":185,"minutes":212,"time":213,"words":214},3.48,208800,696,[128,129],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":219,"date":207,"description":220,"image":221,"path":222,"readingTime":223,"recommend":118,"tags":228,"title":229,"type":130,"updated":217},[108],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":224,"minutes":225,"time":226,"words":227},"1 min read",0.71,42600,142,[128,129],"轻笑风格背景",{"categories":231,"date":109,"description":110,"image":113,"path":117,"readingTime":232,"recommend":118,"tags":233,"title":5,"type":130,"updated":131},[108],{"text":120,"minutes":121,"time":122,"words":123},[128,129],{"categories":235,"date":207,"description":236,"image":237,"path":238,"readingTime":239,"recommend":118,"tags":244,"title":245,"type":130,"updated":217},[108],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":240,"minutes":241,"time":242,"words":243},"5 min read",4.77,286200,954,[128,129],"卡片美化",{"categories":247,"date":207,"description":248,"image":249,"path":250,"readingTime":251,"recommend":118,"tags":255,"title":256,"type":130,"updated":217},[108],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":224,"minutes":252,"time":253,"words":254},0.345,20700,69,[128,129],"功能美化",{"categories":258,"date":259,"description":260,"image":261,"path":262,"readingTime":263,"recommend":118,"tags":268,"title":269,"type":130,"updated":270},[108],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":264,"minutes":265,"time":266,"words":267},"6 min read",5.595,335700,1119,[128,129,146],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":272,"date":273,"description":274,"image":275,"path":276,"readingTime":277,"recommend":281,"tags":282,"title":285,"type":130,"updated":286},[108],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":171,"minutes":278,"time":279,"words":280},8.88,532800,1776,11,[283,284,146],"Nuxt","魔改","在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":288,"date":289,"description":290,"image":291,"path":292,"readingTime":293,"recommend":298,"tags":299,"title":300,"type":130,"updated":301},[108],"2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif","\u002F2025\u002F08\u002Fnuxtaboutpage",{"text":294,"minutes":295,"time":296,"words":297},"16 min read",15.92,955200,3184,10,[283,284,146],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":303,"date":304,"description":305,"image":306,"path":307,"readingTime":308,"recommend":312,"tags":313,"title":314,"type":130,"updated":301},[108],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":240,"minutes":309,"time":310,"words":311},4.38,262800,876,9,[283,284,146],"添加站点详情页面",{"categories":316,"date":318,"description":319,"image":320,"path":321,"readingTime":322,"recommend":118,"tags":326,"title":329,"type":330,"updated":331},[317],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":185,"minutes":323,"time":324,"words":325},3.855,231300,771,[327,328],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":333,"date":334,"description":335,"image":336,"path":337,"readingTime":338,"recommend":312,"tags":343,"title":344,"type":130,"updated":345},[108],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":339,"minutes":340,"time":341,"words":342},"23 min read",22.175,1330500,4435,[283,284,146],"添加追更历史","2025-12-01 20:49:00",{"categories":347,"date":348,"description":349,"image":350,"path":351,"readingTime":352,"recommend":357,"tags":358,"title":359,"type":130,"updated":360},[108],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":353,"minutes":354,"time":355,"words":356},"32 min read",31.72,1903200,6344,8,[283,284,146],"评论优化","2026-03-01 20:49:00",{"categories":362,"date":363,"description":364,"image":365,"path":366,"readingTime":367,"recommend":372,"tags":373,"title":374,"type":130,"updated":375},[108],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":368,"minutes":369,"time":370,"words":371},"8 min read",7.28,436800,1456,7,[283,284,146],"添加装备页面","2025-12-03 20:49:09",{"categories":377,"date":378,"description":379,"image":380,"path":381,"readingTime":382,"recommend":387,"tags":388,"title":389,"type":130,"updated":390},[108],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":383,"minutes":384,"time":385,"words":386},"12 min read",11.165,669900,2233,6,[283,284,146],"文章美化","2025-12-09 20:49:00",{"categories":392,"date":393,"description":394,"image":395,"path":396,"readingTime":397,"recommend":402,"tags":403,"title":404,"type":130,"updated":405},[108],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":398,"minutes":399,"time":400,"words":401},"10 min read",9.745,584700,1949,5,[283,284,146],"侧边组件美化","2025-12-04 20:49:00",{"categories":407,"date":408,"description":409,"image":410,"path":411,"readingTime":412,"recommend":118,"tags":417,"title":420,"type":130,"updated":421},[108],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":413,"minutes":414,"time":415,"words":416},"14 min read",13.155,789300,2631,[418,419],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":423,"date":424,"description":425,"image":426,"path":427,"readingTime":428,"recommend":118,"tags":433,"title":437,"type":130,"updated":438},[136],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":429,"minutes":430,"time":431,"words":432},"3 min read",2.72,163200,544,[434,435,436],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":440,"date":441,"description":442,"image":443,"path":444,"readingTime":445,"recommend":118,"tags":450,"title":453,"type":130,"updated":454},[136],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":446,"minutes":447,"time":448,"words":449},"7 min read",6.86,411600,1372,[451,452],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":456,"date":457,"description":394,"image":458,"path":459,"readingTime":460,"recommend":97,"tags":464,"title":465,"type":130,"updated":466},[108],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":429,"minutes":461,"time":462,"words":463},2.15,129000,430,[283,284,146],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":468,"date":469,"description":470,"image":471,"path":472,"readingTime":473,"recommend":118,"tags":478,"title":479,"type":330,"updated":480},[108],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":474,"minutes":475,"time":476,"words":477},"2 min read",1.82,109200,364,[283,284,146],"站点资源优化","2026-01-07 20:49:00",{"categories":482,"date":484,"description":485,"image":486,"path":487,"readingTime":488,"recommend":118,"tags":492,"title":493,"type":130,"updated":494},[483],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":294,"minutes":489,"time":490,"words":491},15.545,932700,3109,[283,284,146],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":496,"date":497,"description":498,"image":486,"path":499,"readingTime":500,"recommend":118,"tags":504,"title":505,"type":130,"updated":506},[483],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":413,"minutes":501,"time":502,"words":503},13.965,837900,2793,[283,284,146],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":508,"date":509,"description":510,"image":511,"path":512,"readingTime":513,"recommend":160,"tags":518,"title":519,"type":130,"updated":520},[108],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":514,"minutes":515,"time":516,"words":517},"100 min read",99.23,5953800,19846,[283,284,146],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":522,"date":523,"description":485,"image":524,"path":525,"readingTime":526,"recommend":118,"tags":530,"title":531,"type":130,"updated":532},[136],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":171,"minutes":527,"time":528,"words":529},8.91,534600,1782,[283,284,146],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":534,"date":523,"description":485,"image":535,"path":536,"readingTime":537,"recommend":118,"tags":541,"title":542,"type":130,"updated":532},[108],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":429,"minutes":538,"time":539,"words":540},2.47,148200,494,[283,284,146],"【精简】测试老MAC性能",{"categories":544,"date":545,"description":485,"image":546,"path":547,"readingTime":548,"recommend":118,"tags":552,"title":553,"type":130,"updated":554},[108],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":171,"minutes":549,"time":550,"words":551},8.19,491400,1638,[283,284,146],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":556,"date":557,"description":485,"image":558,"path":559,"readingTime":560,"recommend":104,"tags":564,"title":565,"type":130,"updated":566},[108],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":185,"minutes":561,"time":562,"words":563},3.235,194100,647,[283,284,146],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":568,"date":569,"description":485,"image":558,"path":570,"readingTime":571,"recommend":100,"tags":576,"title":578,"type":130,"updated":579},[108],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":572,"minutes":573,"time":574,"words":575},"18 min read",17.265,1035900,3453,[283,577],"页面","游戏展示页面","2026-03-22 10:00:00",{"categories":581,"date":582,"description":485,"image":558,"path":583,"readingTime":584,"recommend":160,"tags":588,"title":589,"type":130,"updated":590},[108],"2026-04-11 14:00:00","\u002F2026\u002F04\u002Fessaynuxtpage",{"text":264,"minutes":585,"time":586,"words":587},5.93,355800,1186,[283,577],"说说页面（Nuxt版本）","2026-04-11 22:00:00",{"categories":592,"date":593,"description":485,"image":558,"path":594,"readingTime":595,"recommend":160,"tags":599,"title":600,"type":130,"updated":601},[108],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fhotnuxtpage",{"text":171,"minutes":596,"time":597,"words":598},8.985,539100,1797,[283,577],"热搜页面（Nuxt版本）","2026-04-13 22:00:00",{"categories":603,"date":605,"description":319,"image":606,"path":607,"readingTime":608,"recommend":118,"tags":612,"title":613,"type":330,"updated":614},[604],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":474,"minutes":609,"time":610,"words":611},1.31,78600,262,[327,328],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":616,"date":605,"description":319,"image":606,"path":617,"readingTime":618,"recommend":118,"tags":622,"title":623,"type":330,"updated":614},[604],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":446,"minutes":619,"time":620,"words":621},6.295,377700,1259,[327,328],"世界志：仙神界",{"categories":625,"date":605,"description":319,"image":606,"path":626,"readingTime":627,"recommend":118,"tags":631,"title":632,"type":330,"updated":614},[604],"\u002Fnovel\u002Fworld\u002Fdh",{"text":474,"minutes":628,"time":629,"words":630},1.65,99000,330,[327,328],"世界志：大荒",[634,636],{"title":203,"path":197,"stem":635,"date":194,"type":130,"children":-1},"posts\u002F2025\u002F03\u002FarchiveMougai",{"title":285,"path":276,"stem":637,"date":273,"type":130,"children":-1},"posts\u002F2025\u002F08\u002FlinkTop",1776745736580]