[{"data":1,"prerenderedAt":631},["ShallowReactive",2],{"\u002F2025\u002F12\u002Fequipmentpageadd":3,"index_posts":128,"surround-\u002F2025\u002F12\u002Fequipmentpageadd":626},{"id":4,"title":5,"body":6,"categories":100,"date":102,"description":103,"draft":104,"extension":105,"image":106,"meta":107,"navigation":109,"path":110,"permalink":111,"published":111,"readingTime":112,"recommend":117,"references":111,"seo":118,"sitemap":119,"stem":120,"subtitle":111,"tags":121,"type":125,"updated":126,"__hash__":127},"content\u002Fposts\u002F2025\u002F12\u002FequipmentPageAdd.md","添加装备页面",{"type":7,"value":8,"toc":89},"minimark",[9,13,37,40,58,61,65,77,80],[10,11,12],"h2",{"id":12},"功能解析",[14,15,16,25,31],"ul",{},[17,18,19,20,24],"li",{},"通过",[21,22,23],"code",{"code":23},"equipment.categroy","的指定内容进行计算，而后映射出颜色与图标，无需通过写死分类来进行切换",[17,26,19,27,30],{},[21,28,29],{"code":29},"equipment.info","中进行自定义芯片、内存、显卡等等字段进行显示",[17,32,19,33,36],{},[21,34,35],{"code":35},"equipment.tag","中的自定义标签进行显示出装备所属标签",[10,38,39],{"id":39},"目录结构",[14,41,42,52],{},[17,43,44,47,48,51],{},[21,45,46],{"code":46},"\u002Fapp\u002Fpage\u002Fequipment.vue","：装备页面中的主界面渲染模块，传递",[21,49,50],{"code":50},"equipment.ts","的模块请求数据（模块来源于喵落阁，经过本人重新二开）",[17,53,54,57],{},[21,55,56],{"code":56},"\u002Fapp\u002Fequipment.ts","：追更页面全局数据类型，本身作为数据加载以及页面引用（模块来源于喵落阁）",[10,59,60],{"id":60},"核心代码",[62,63,64],"h3",{"id":64},"主界面渲染",[66,67,74],"pre",{"className":68,"code":70,"filename":71,"language":72,"meta":73},[69],"language-vue","\u003Cscript lang=\"ts\" setup>\nimport { ref, computed } from 'vue'\nimport { equipment } from '~\u002Fequipment'\nimport { useLayoutStore } from '~\u002Fstores\u002Flayout'\n\nconst layoutStore = useLayoutStore()\nlayoutStore.setAside(['blog-stats', 'blog-tech', 'blog-site-info', 'blog-archive', 'blog-log'])\n\nuseSeoMeta({\n  title: '我的装备',\n})\n\n\u002F\u002F 新增状态管理\nconst activeCategory = ref('硬件')\n\n\u002F\u002F 计算属性过滤设备\nconst filteredEquipment = computed(() => \n  equipment.filter(item => item.categroy === activeCategory.value)\n)\n\nfunction handleTabClick(category: string) {\n  activeCategory.value = category\n}\n\nfunction goComment(content: string) {\n  const textarea = document.querySelector('.atk-textarea') as HTMLTextAreaElement\n  if (textarea) {\n    textarea.value = `> ${content.replace(\u002F\u003C[^>]+>\u002Fg, '')}\\n\\n`\n    textarea.focus()\n    textarea.scrollIntoView({ behavior: 'smooth', block: 'center' })\n  }\n}\n\nconst getCategoryCount = computed(() => (category: string) => {\n  return equipment.filter(item => item.categroy === category).length\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv id=\"icat-equipment\">\n    \u003Cdiv class=\"equipment-category\">\n      \u003C!-- 顶部导航栏 -->\n      \u003Cdiv class=\"categories-tabs\">\n        \u003Cdiv class=\"tabs-container\">\n          \u003Cdiv \n            v-for=\"category in ['硬件','外设']\" \n            :key=\"category\"\n            class=\"category-tab\"\n            :class=\"{ active: activeCategory === category }\"\n            @click=\"handleTabClick(category)\"\n            :style=\"{'--tab-color': category === '硬件' ? '#3af' : category === '外设' ? '#3ba': '' }\"\n          >\n            \u003Cicon :name=\"category === '硬件' ? 'ph-laptop-bold' : (category === '外设' ? 'ph-package-bold' : '')\" >\u003C\u002Ficon>\n            \u003Cspan>{{ category }}\u003C\u002Fspan>\n            \u003Cspan>{{ getCategoryCount(category) }}\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003C!-- 设备展示区 -->\n      \u003Cdiv class=\"equipment-list\">\n        \u003Cdiv v-for=\"(item, index) in filteredEquipment\" :key=\"item.name + index\" class=\"equipment-card\">\n          \u003Cdiv class=\"equipment-image\">\n            \u003Cimg\n              :src=\"item.image\"\n              :alt=\"item.name\"\n              loading=\"lazy\"\n            >\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"equipment-content\">\n            \u003Cdiv class=\"equipment-header\">\n              \u003Ch3 class=\"card-name\">\n                {{ item.name }}\n              \u003C\u002Fh3>\n              \u003Cdiv class=\"card-category\" v-if=\"item.categroy === '硬件'\" style=\"--category-color: #3af\">\n                {{ item.categroy }}\n              \u003C\u002Fdiv>\n              \u003Cdiv class=\"card-category\" v-if=\"item.categroy === '外设'\" style=\"--category-color: #3ba\">\n                {{ item.categroy }}\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"equipment-opinion\">\n              {{ item.desc }}\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"card-specs\">\n              \u003Cdiv class=\"spec-item\" v-for=\"([key, value]) in Object.entries(item.info ?? {})\" :key=\"key\">\n                \u003Cdiv class=\"spec-label\">\n                  {{ key }}\n                \u003C\u002Fdiv>\n                \u003Cdiv class=\"spec-value\">\n                  {{ value }}\n                \u003C\u002Fdiv>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"card-tags\">\n              \u003Cspan class=\"tag\" v-for=\"([key, value]) in Object.entries(item.tag ?? {})\" :key=\"key\" style=\"----category-color: #3af\">\n                {{ value }}\n              \u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"card-footer\">\n              \u003Cdiv class=\"purchase-info\">\n                \u003Cicon name=\"ph:calendar-bold\" style=\"font-size: 16px;\"\u002F>\n                {{ item.date }}\n              \u003C\u002Fdiv>\n              \u003Cdiv class=\"price-info\">\n                ￥{{ item.money }}\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"equipment-actions\">\n              \u003Ca class=\"equipment-link\" :href=\"item.src\" :title=\"`跳转到${item.name}的产品详情`\" target=\"_blank\" el=\"noopener noreferrer\">\n                详情\n              \u003C\u002Fa>\n              \u003Cbutton class=\"comment-btn\" type=\"button\" @click=\"goComment(item.desc)\" aria-label=\"快速评论\">\n                \u003Cicon name=\"ph:chats-bold icon\" \u002F>\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003CPostComment key=\"\u002Fequipment\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n\u002F\u002F 装备页面样式优化 (苏晓河编写，2025年2月5日)\n\u002F\u002F 优化重点：提升加载性能，使用SCSS嵌套结构，语义化类名\n\n#icat-equipment {\n  padding-bottom: 12px;\n  --category-color-one: #3af;\n  --category-color-two: #3ba;\n  \n  .equipment-category {\n    margin: 1rem;\n    padding-top: 1rem;\n\n    .categories-tabs {\n      display: flex;\n      justify-content: center;\n      margin-bottom: 2rem;\n      overflow-x: auto;\n      -webkit-overflow-scrolling: touch;\n\n      .tabs-container {\n        display: flex;\n        flex-wrap: wrap;\n        gap: .5rem;\n        justify-content: center;\n        padding: .5rem;\n        \n        .category-tab {\n          align-items: center;\n          background: transparent;\n          border: 2px solid var(--c-border);\n          border-radius: .6rem;\n          color: var(--c-text-2);\n          cursor: pointer;\n          display: flex;\n          font-size: .95rem;\n          gap: .5rem;\n          padding: .6rem 1.2rem;\n          transition: all .3s ease;\n          white-space: nowrap;\n        }\n        .active {\n          background: color-mix(in srgb, var(--tab-color) 10%, transparent);\n          font-weight: 600;\n        }\n        .active, :hover {\n          border-color: var(--tab-color);\n          color: var(--tab-color);\n        }\n      }\n    }\n    .category-title {\n      margin: 20px 7px 0;\n      font-size: 1.5rem;\n      font-weight: 600;\n      color: var(--icat-fontcolor);\n    }\n    \n    .category-desc {\n      margin: 0.5rem 7px 1rem;\n      color: var(--icat-secondtext);\n      font-size: 0.9rem;\n      line-height: 1.4;\n    }\n    \n    .equipment-list {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 16px;\n      padding: 10px 0 0;\n      \n      .equipment-card {\n        border: 1px solid var(--icat-secondbg);\n        background: var(--icat-card-bg);\n        border-radius: 12px;\n        overflow: hidden;\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\n        \n        &:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n        }\n        \n        .equipment-image {\n          align-items: center;\n          display: flex;\n          height: 240px;\n          justify-content: center;\n          position: relative;\n          width: 100%;\n          background: rgb(255, 255, 255);\n          overflow: hidden;\n          \n          img {\n            height: 100%;\n            object-fit: contain;\n            width: 100%;\n            padding: 0.8rem;\n            transition: transform 0.3s;\n            \n            &::before {\n              background-color: var(--c-border);\n              color: var(--c-bg-soft);\n              content: attr(alt);\n              display: grid;\n              position: absolute;\n              text-align: center;\n              text-shadow: none;\n              word-break: normal;\n              font: 700 1.5rem \u002F 1.2 var(--font-serif);\n              inset: 0px;\n              overflow: visible;\n              padding: 0.5em;\n              place-content: center;\n            }\n          }\n        }\n        \n        .equipment-content {\n          padding: 16px;\n          flex: 1;\n          flex-direction: column;\n          gap: .8rem;\n          min-width: 0;\n          padding: 1rem;\n          display: flex;\n          \n          .equipment-header {\n            align-items: flex-start;\n            gap: .8rem;\n            display: flex;\n            justify-content: space-between;\n\n            .card-name {\n              color: var(--icat-fontcolor);\n              font-size: 1.125rem;\n              font-weight: 700;\n              line-height: 1.2;\n              margin-bottom: 8px;\n              white-space: nowrap;\n              overflow: hidden;\n              text-overflow: ellipsis;\n            }\n            .card-category {\n              background: color-mix(in srgb, var(--category-color) 10%, transparent);\n              border-radius: .4rem;\n              color: var(--category-color);\n              flex-shrink: 0;\n              font-size: .75rem;\n              font-weight: 600;\n              padding: .3rem .8rem;\n              white-space: nowrap;\n            }\n          }\n          \n          .card-specs {\n            background: transparent;\n            border-radius: 0;\n            display: grid;\n            font-size: .8rem;\n            gap: .4rem;\n            grid-template-columns: repeat(2, 1fr);\n            padding: 0;\n\n            .spec-item {\n              display: flex;\n              flex-direction: column;\n              gap: .1rem;\n              .spec-label {\n                color: var(--c-text-2);\n                font-size: .7rem;\n                font-weight: 500;\n              }\n              .spec-value {\n                color: var(--c-text);\n                font-size: .8rem;\n                word-break: break-word;\n              }\n            }\n          }\n          \n          .equipment-opinion {\n            color: var(--c-text-2);\n            display: -webkit-box;\n            font-size: .9rem;\n            -webkit-line-clamp: 2;\n            line-clamp: 2;\n            line-height: 1.4;\n            margin: 0;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            word-break: break-word;\n          }\n          .card-tags {\n            display: flex;\n            flex-wrap: wrap;\n            gap: .3rem;\n\n            .tag {\n              background: color-mix(in srgb, var(--c-primary) 10%, transparent);\n              border-radius: .3rem;\n              color: var(--c-primary);\n              display: inline-block;\n              font-size: .7rem;\n              padding: .15rem .5rem;\n              white-space: nowrap;\n            }\n          }\n          .card-footer, .card-footer div {\n            align-items: center;\n            display: flex;\n          }\n          .card-footer {\n            border-top: 1px solid var(--c-border);\n            color: var(--c-text-2);\n            flex-wrap: wrap;\n            font-size: .75rem;\n            gap: .8rem;\n            padding-top: .6rem;\n            div {\n              gap: .3rem;\n            }\n          }\n          .equipment-actions {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            \n            .equipment-link {\n              font-size: 0.75rem;\n              background: var(--icat-gray-op);\n              color: var(--icat-fontcolor);\n              padding: 6px 12px;\n              border-radius: 6px;\n              letter-spacing: 0.5px;\n              text-decoration: none;\n              transition: all 0.3s ease;\n              \n              &:hover {\n                color: var(--icat-white);\n                background: var(--icat-blue);\n                box-shadow: 0 8px 16px -4px var(--icat-black-op);\n              }\n            }\n            \n            .comment-btn {\n              background: var(--icat-gray-op);\n              color: var(--icat-fontcolor);\n              border: none;\n              border-radius: 6px;\n              padding: 6px 10px;\n              cursor: pointer;\n              transition: all 0.3s ease;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              \n              &:hover {\n                color: var(--icat-white);\n                background: var(--icat-blue);\n                box-shadow: 0 8px 16px -4px var(--icat-black-op);\n              }\n              \n              .icon {\n                font-size: 1rem;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n\u002F\u002F 动画定义\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n\u002F\u002F 响应式设计\n@media screen and (max-width: 1024px) {\n  #icat-equipment .equipment-category .equipment-list {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  #icat-equipment .equipment-category {\n    margin: 0.5rem;\n    \n    .equipment-list {\n      grid-template-columns: 1fr;\n      gap: 10px;\n      \n      .equipment-item .equipment-card .equipment-image img {\n        height: 180px;\n      }\n    }\n  }\n}\n\n@media screen and (max-width: 480px) {\n  #icat-equipment .equipment-category {\n    margin: 0.25rem;\n    \n    .category-title {\n      margin: 10px 7px 0;\n      font-size: 1.25rem;\n    }\n    \n    .equipment-list .equipment-item .equipment-card .equipment-image img {\n      height: 160px;\n    }\n  }\n}\n\u003C\u002Fstyle>\n","equipment.vue","vue","lang=\"vue\"",[21,75,70],{"__ignoreMap":76},"",[62,78,79],{"id":79},"全局数据类型及数据存储库",[66,81,87],{"className":82,"code":84,"filename":50,"language":85,"meta":86},[83],"language-ts","export interface item {\n  name: string\n  categroy: '硬件' | '外设'\n  categroy_color?: '#3af;' | '#3ba;'\n  desc: string\n  info?: Record\u003Cstring, string>\n  厂商?: Record\u003Cstring, string>\n  tag?: string[]\n  image?: string\n  date?: string\n  src?: string\n  money?: number\n}\nexport type manufacturers = {\n  cpu_info: 'AMD' | 'INTEL'\n  memory_info: 'LPDDR5' | 'LPDDR4' | 'LPDDR3'\n  graphics_card_info: 'AMD' | 'NVIDA'\n  ssd_info: 'SSD' | 'NVME SSD'\n}\nexport const equipment: item[] = [\n  {\n    name: \"天选4\",\n    image: \"\u002Fassets\u002Fimg\u002Fequipment\u002Ftianxuan.svg\",\n    src: \"https:\u002F\u002Fwww.myxz.top\",\n    categroy: '硬件',\n    desc: \"测试测试\",\n    info: {\n      芯片: \"AMD Ryzen™ 5 7640HS\",\n      内存: \"16G LPDDR5 4800MHz\",\n      显卡: \"NVIDIA® GeForce RTX™ 4050\",\n      存储: \"512G PCIE4 SSD\",\n      机器版本: \"锐龙版\",\n      机器颜色: \"Mecha\"\n    },\n    tag: ['轻薄本', 'AMD'],\n    date: \"2023-09-01\",\n    money: 2344,\n  }, {\n    name: \"iPhone XR\",\n    image: \"https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F06\u002F07\u002FpCiB3vD.jpg\",\n    src: \"https:\u002F\u002Fwww.myxz.top\",\n    categroy: '外设',\n    desc: \"测试测试\",\n    info: {\n      芯片: \"Ryzen™ 5 7640HS\",\n      内存: \"Ryzen™ 5 7640HS\",\n      显卡: \"Ryzen™ 5 7640HS\",\n      存储: \"Ryzen™ 5 7640HS\",\n    },\n    tag: ['轻薄本', 'AMD'],\n    date: \"2023-09-01\",\n    money: 2344,\n  }, {\n    name: \"iPhone XR\",\n    image: \"https:\u002F\u002Fs11.ax1x.com\u002F2023\u002F06\u002F07\u002FpCiB3vD.jpg\",\n    src: \"https:\u002F\u002Fwww.myxz.top\",\n    categroy: '硬件',\n    desc: \"测试测试\",\n    info: {\n      芯片: \"Ryzen™ 5 7640HS\",\n      内存: \"Ryzen™ 5 7640HS\",\n      显卡: \"Ryzen™ 5 7640HS\",\n      存储: \"Ryzen™ 5 7640HS\",\n    },\n    tag: ['轻薄本', 'AMD'],\n    date: \"2023-09-01\",\n    money: 2344,\n  }\n]\n","ts","lang=\"ts\"",[21,88,84],{"__ignoreMap":76},{"title":76,"searchDepth":90,"depth":90,"links":91},4,[92,94,95],{"id":12,"depth":93,"text":12},2,{"id":39,"depth":93,"text":39},{"id":60,"depth":93,"text":60,"children":96},[97,99],{"id":64,"depth":98,"text":64},3,{"id":79,"depth":98,"text":79},[101],"站点魔改","2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。",false,"md","\u002Fimage\u002FPostCover\u002FequipmentPage.avif",{"slots":108},{},true,"\u002F2025\u002F12\u002Fequipmentpageadd",null,{"text":113,"minutes":114,"time":115,"words":116},"8 min read",7.28,436800,1456,7,{"title":5,"description":103},{"loc":110},"posts\u002F2025\u002F12\u002FequipmentPageAdd",[122,123,124],"Nuxt","魔改","美化","tech","2025-12-03 20:49:09","UlXdj1BezGfvfMC2pt4TlpFhP3PS-9dMmUAKXK3AlbQ",[129,145,160,174,188,201,214,226,240,252,263,277,291,306,319,336,350,365,369,384,399,415,432,448,460,474,488,500,514,526,536,548,560,573,584,595,608,617],{"categories":130,"date":132,"description":133,"image":111,"path":134,"readingTime":135,"recommend":111,"tags":140,"title":143,"type":125,"updated":144},[131],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":136,"minutes":137,"time":138,"words":139},"48 min read",47.34,2840400,9468,[141,142,124],"hexo","butterfly","即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":146,"date":147,"description":148,"image":149,"path":150,"readingTime":151,"recommend":156,"tags":157,"title":158,"type":125,"updated":159},[101],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":152,"minutes":153,"time":154,"words":155},"11 min read",10.8,648000,2160,1,[141,142],"友链魔改","2025-04-19 12:09:00",{"categories":161,"date":162,"description":163,"image":164,"path":165,"readingTime":166,"recommend":156,"tags":171,"title":172,"type":125,"updated":173},[101],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":167,"minutes":168,"time":169,"words":170},"9 min read",8.585,515100,1717,[141,142],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":175,"date":176,"description":177,"image":178,"path":179,"readingTime":180,"recommend":156,"tags":185,"title":186,"type":125,"updated":187},[101],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":181,"minutes":182,"time":183,"words":184},"4 min read",3.31,198600,662,[141,142,124],"轻笑底部美化","2025-02-28 10:00:00",{"categories":189,"date":190,"description":191,"image":192,"path":193,"readingTime":194,"recommend":111,"tags":198,"title":199,"type":125,"updated":200},[101],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":181,"minutes":195,"time":196,"words":197},3.08,184800,616,[141,142],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":202,"date":203,"description":204,"image":205,"path":206,"readingTime":207,"recommend":111,"tags":211,"title":212,"type":125,"updated":213},[101],"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":181,"minutes":208,"time":209,"words":210},3.48,208800,696,[141,142],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":215,"date":203,"description":216,"image":217,"path":218,"readingTime":219,"recommend":111,"tags":224,"title":225,"type":125,"updated":213},[101],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":220,"minutes":221,"time":222,"words":223},"1 min read",0.71,42600,142,[141,142],"轻笑风格背景",{"categories":227,"date":228,"description":229,"image":230,"path":231,"readingTime":232,"recommend":111,"tags":237,"title":238,"type":125,"updated":239},[101],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":233,"minutes":234,"time":235,"words":236},"24 min read",23.275,1396500,4655,[141,142],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":241,"date":203,"description":242,"image":243,"path":244,"readingTime":245,"recommend":111,"tags":250,"title":251,"type":125,"updated":213},[101],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":246,"minutes":247,"time":248,"words":249},"5 min read",4.77,286200,954,[141,142],"卡片美化",{"categories":253,"date":203,"description":254,"image":255,"path":256,"readingTime":257,"recommend":111,"tags":261,"title":262,"type":125,"updated":213},[101],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":220,"minutes":258,"time":259,"words":260},0.345,20700,69,[141,142],"功能美化",{"categories":264,"date":265,"description":266,"image":267,"path":268,"readingTime":269,"recommend":111,"tags":274,"title":275,"type":125,"updated":276},[101],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":270,"minutes":271,"time":272,"words":273},"6 min read",5.595,335700,1119,[141,142,124],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":278,"date":279,"description":280,"image":281,"path":282,"readingTime":283,"recommend":287,"tags":288,"title":289,"type":125,"updated":290},[101],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":167,"minutes":284,"time":285,"words":286},8.88,532800,1776,11,[122,123,124],"在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":292,"date":293,"description":294,"image":295,"path":296,"readingTime":297,"recommend":302,"tags":303,"title":304,"type":125,"updated":305},[101],"2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif","\u002F2025\u002F08\u002Fnuxtaboutpage",{"text":298,"minutes":299,"time":300,"words":301},"16 min read",15.92,955200,3184,10,[122,123,124],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":307,"date":308,"description":309,"image":310,"path":311,"readingTime":312,"recommend":316,"tags":317,"title":318,"type":125,"updated":305},[101],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":246,"minutes":313,"time":314,"words":315},4.38,262800,876,9,[122,123,124],"添加站点详情页面",{"categories":320,"date":322,"description":323,"image":324,"path":325,"readingTime":326,"recommend":111,"tags":330,"title":333,"type":334,"updated":335},[321],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":181,"minutes":327,"time":328,"words":329},3.855,231300,771,[331,332],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":337,"date":338,"description":339,"image":340,"path":341,"readingTime":342,"recommend":316,"tags":347,"title":348,"type":125,"updated":349},[101],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":343,"minutes":344,"time":345,"words":346},"23 min read",22.175,1330500,4435,[122,123,124],"添加追更历史","2025-12-01 20:49:00",{"categories":351,"date":352,"description":353,"image":354,"path":355,"readingTime":356,"recommend":361,"tags":362,"title":363,"type":125,"updated":364},[101],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":357,"minutes":358,"time":359,"words":360},"32 min read",31.72,1903200,6344,8,[122,123,124],"评论优化","2026-03-01 20:49:00",{"categories":366,"date":102,"description":103,"image":106,"path":110,"readingTime":367,"recommend":117,"tags":368,"title":5,"type":125,"updated":126},[101],{"text":113,"minutes":114,"time":115,"words":116},[122,123,124],{"categories":370,"date":371,"description":372,"image":373,"path":374,"readingTime":375,"recommend":380,"tags":381,"title":382,"type":125,"updated":383},[101],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":376,"minutes":377,"time":378,"words":379},"12 min read",11.165,669900,2233,6,[122,123,124],"文章美化","2025-12-09 20:49:00",{"categories":385,"date":386,"description":387,"image":388,"path":389,"readingTime":390,"recommend":395,"tags":396,"title":397,"type":125,"updated":398},[101],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":391,"minutes":392,"time":393,"words":394},"10 min read",9.745,584700,1949,5,[122,123,124],"侧边组件美化","2025-12-04 20:49:00",{"categories":400,"date":401,"description":402,"image":403,"path":404,"readingTime":405,"recommend":111,"tags":410,"title":413,"type":125,"updated":414},[101],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":406,"minutes":407,"time":408,"words":409},"14 min read",13.155,789300,2631,[411,412],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":416,"date":417,"description":418,"image":419,"path":420,"readingTime":421,"recommend":111,"tags":426,"title":430,"type":125,"updated":431},[131],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":422,"minutes":423,"time":424,"words":425},"3 min read",2.72,163200,544,[427,428,429],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":433,"date":434,"description":435,"image":436,"path":437,"readingTime":438,"recommend":111,"tags":443,"title":446,"type":125,"updated":447},[131],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":439,"minutes":440,"time":441,"words":442},"7 min read",6.86,411600,1372,[444,445],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":449,"date":450,"description":387,"image":451,"path":452,"readingTime":453,"recommend":90,"tags":457,"title":458,"type":125,"updated":459},[101],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":422,"minutes":454,"time":455,"words":456},2.15,129000,430,[122,123,124],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":461,"date":462,"description":463,"image":464,"path":465,"readingTime":466,"recommend":111,"tags":471,"title":472,"type":334,"updated":473},[101],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":467,"minutes":468,"time":469,"words":470},"2 min read",1.82,109200,364,[122,123,124],"站点资源优化","2026-01-07 20:49:00",{"categories":475,"date":477,"description":478,"image":479,"path":480,"readingTime":481,"recommend":111,"tags":485,"title":486,"type":125,"updated":487},[476],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":298,"minutes":482,"time":483,"words":484},15.545,932700,3109,[122,123,124],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":489,"date":490,"description":491,"image":479,"path":492,"readingTime":493,"recommend":111,"tags":497,"title":498,"type":125,"updated":499},[476],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":406,"minutes":494,"time":495,"words":496},13.965,837900,2793,[122,123,124],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":501,"date":502,"description":503,"image":504,"path":505,"readingTime":506,"recommend":156,"tags":511,"title":512,"type":125,"updated":513},[101],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":507,"minutes":508,"time":509,"words":510},"100 min read",99.23,5953800,19846,[122,123,124],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":515,"date":516,"description":478,"image":517,"path":518,"readingTime":519,"recommend":111,"tags":523,"title":524,"type":125,"updated":525},[131],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":167,"minutes":520,"time":521,"words":522},8.91,534600,1782,[122,123,124],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":527,"date":516,"description":478,"image":528,"path":529,"readingTime":530,"recommend":111,"tags":534,"title":535,"type":125,"updated":525},[101],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":422,"minutes":531,"time":532,"words":533},2.47,148200,494,[122,123,124],"【精简】测试老MAC性能",{"categories":537,"date":538,"description":478,"image":539,"path":540,"readingTime":541,"recommend":111,"tags":545,"title":546,"type":125,"updated":547},[101],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":167,"minutes":542,"time":543,"words":544},8.19,491400,1638,[122,123,124],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":549,"date":550,"description":478,"image":551,"path":552,"readingTime":553,"recommend":98,"tags":557,"title":558,"type":125,"updated":559},[101],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":181,"minutes":554,"time":555,"words":556},3.235,194100,647,[122,123,124],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":561,"date":562,"description":478,"image":551,"path":563,"readingTime":564,"recommend":93,"tags":569,"title":571,"type":125,"updated":572},[101],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":565,"minutes":566,"time":567,"words":568},"18 min read",17.265,1035900,3453,[122,570],"页面","游戏展示页面","2026-03-22 10:00:00",{"categories":574,"date":575,"description":478,"image":551,"path":576,"readingTime":577,"recommend":156,"tags":581,"title":582,"type":125,"updated":583},[101],"2026-04-11 14:00:00","\u002F2026\u002F04\u002Fessaynuxtpage",{"text":270,"minutes":578,"time":579,"words":580},5.93,355800,1186,[122,570],"说说页面（Nuxt版本）","2026-04-11 22:00:00",{"categories":585,"date":586,"description":478,"image":551,"path":587,"readingTime":588,"recommend":156,"tags":592,"title":593,"type":125,"updated":594},[101],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fhotnuxtpage",{"text":167,"minutes":589,"time":590,"words":591},8.985,539100,1797,[122,570],"热搜页面（Nuxt版本）","2026-04-13 22:00:00",{"categories":596,"date":598,"description":323,"image":599,"path":600,"readingTime":601,"recommend":111,"tags":605,"title":606,"type":334,"updated":607},[597],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":467,"minutes":602,"time":603,"words":604},1.31,78600,262,[331,332],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":609,"date":598,"description":323,"image":599,"path":610,"readingTime":611,"recommend":111,"tags":615,"title":616,"type":334,"updated":607},[597],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":439,"minutes":612,"time":613,"words":614},6.295,377700,1259,[331,332],"世界志：仙神界",{"categories":618,"date":598,"description":323,"image":599,"path":619,"readingTime":620,"recommend":111,"tags":624,"title":625,"type":334,"updated":607},[597],"\u002Fnovel\u002Fworld\u002Fdh",{"text":467,"minutes":621,"time":622,"words":623},1.65,99000,330,[331,332],"世界志：大荒",[627,629],{"title":348,"path":341,"stem":628,"date":338,"type":125,"children":-1},"posts\u002F2025\u002F12\u002FbanguimPageAdd",{"title":397,"path":389,"stem":630,"date":386,"type":125,"children":-1},"posts\u002F2025\u002F12\u002FsmallCardAdd",1776745734764]