[{"data":1,"prerenderedAt":653},["ShallowReactive",2],{"\u002F2025\u002F03\u002Frandompost":3,"index_posts":126,"surround-\u002F2025\u002F03\u002Frandompost":648},{"id":4,"title":5,"ModelAssets":6,"ModelName":6,"ModelPortrait":6,"ModelQuality":6,"body":7,"categories":100,"date":102,"description":103,"draft":104,"extension":105,"image":106,"meta":107,"navigation":109,"path":110,"permalink":6,"published":6,"readingTime":111,"recommend":6,"references":6,"seo":116,"sitemap":117,"stem":118,"subtitle":6,"tags":119,"type":123,"updated":124,"__hash__":125},"content\u002Fposts\u002F2025\u002F03\u002FrandomPost.md","Banner随机文章展示(轻笑同款)",null,{"type":8,"value":9,"toc":86},"minimark",[10,15,19,23,33,44,51,58,67,71,79,83],[11,12,14],"h2",{"id":13},"_1前言","1.前言",[16,17,18],"p",{},"为了把lighthouse的性能优化到极致，所以采用了这种轻笑方案的随机banner来优化",[11,20,22],{"id":21},"_2添加hometop","2.添加hometop",[24,25,27,28,32],"h3",{"id":26},"_1在-blogrootthemessxiaohescriptshelpers中新建home_random_postjs","1.在 ",[29,30,31],"span",{},"BlogRoot","\\themes\\sxiaohe\\scripts\\helpers中新建home_random_post.js:",[34,35,41],"pre",{"className":36,"code":38,"language":39,"meta":40},[37],"language-JS","hexo.extend.generator.register('thePosts', function (locals) {\n    const jsonData = locals.posts\n      .filter(post => post.random !== false)\n      .map(post => {\n        return {\n          title: post.title || \"暂无标题\",\n          abbrlink: post.abbrlink,\n          image: post.cover,\n          description: post.description || \"暂无简介\"\n        };\n      });\n  \n    return {\n      path: 'random.json',\n      data: JSON.stringify(jsonData)\n    };\n  });\n  \n","JS","",[42,43,38],"code",{"__ignoreMap":40},[24,45,47,48,50],{"id":46},"_2在-blogrootthemesbutterflylayoutincludes中新建hometoppug","2.在 ",[29,49,31],{},"\\themes\\butterfly\\layout\\includes中新建hometop.pug：",[52,53,55],"alert",{"type":54},"question",[16,56,57],{},"提示：如果在页面中添加js文件，会导致浏览器一直读取js，从而让用户无法看到页面内容，所以这里采用pug内嵌js文件展示出来",[34,59,65],{"className":60,"code":62,"filename":63,"language":64,"meta":40},[61],"language-pug","#home_top\n  .home_top_group\n    #homeTopGroup.homeTopGroup\n      .left-arrow-tip\n      .right-arrow-tip\n      .category_group\n          .category_item\n            a.category_button(href=\"\u002Farchives\u002F\",style=\"background:linear-gradient(to right,#00868Bdb,#3fc1c9db)\")\n              span.category_button_text 归档\n              i.fas.fa-laptop-code\n          .category_item\n            a.category_button(href=\"\u002Farchives\u002F2022\u002F\",style=\"background:linear-gradient(to right, #0A5ABEdb, #2fcbffdb)\")\n              span.category_button_text 2022\n              i.fas.fa-lightbulb\n      .top_post_group\n        \u002F\u002F- 这下面是原来固定的写法\n        \u002F\u002F- if site.data.slider\n        \u002F\u002F-   each i in site.data.slider\n        \u002F\u002F-     .top_post_item\n        \u002F\u002F-       .post_cover\n        \u002F\u002F-         a(href=url_for(i.link) title=i.title)\n        \u002F\u002F-           img.post_bg.entered.loaded(src=url_for(i.cover))\n        \u002F\u002F-           .post_cover_info\n        \u002F\u002F-             p.post_cover_text= i.description\n        \u002F\u002F-       .post_info(onclick=`\"window.open(`+url_for(i.link)+`,\"_self\")\"`)\n        \u002F\u002F-         a.article-title(href=url_for(i.link) title=i.title)= i.title\n      script(type='text\u002Fjavascript')\n        | function getRandomElementsFromArray(arr, num) {\n        |   const totalElements = arr.length;\n        |   const selectedElements = new Set();\n        |   while (selectedElements.size \u003C num) {\n        |     const randomIndex = Math.floor(Math.random() * totalElements);\n        |     selectedElements.add(arr[randomIndex]);\n        |   }\n        |   return Array.from(selectedElements);\n        | }\n        | function renderingPosts(data){\n        |   const randomElements = getRandomElementsFromArray(data, 6);\n        |   const postsHtml = randomElements.map((i) => `\n        |     \u003Cdiv class=\"top_post_item\">\n        |       \u003Cdiv class=\"post_cover\">\n        |         \u003Ca href=\"\u002Farticle\u002F${i.abbrlink}.html\" title=\"${i.title}\">\n        |           \u003Cimg srcset class=\"post_bg entered loaded\" src=\"${i.cover}\" alt=\"${i.title}\" data-no-lazy>\n        |           \u003Cdiv class=\"post_cover_info\">\n        |             \u003Cp class=\"post_cover_text\">${i.description}\u003C\u002Fp>\n        |           \u003C\u002Fdiv>\n        |         \u003C\u002Fa>\n        |       \u003C\u002Fdiv>\n        |       \u003Cdiv class=\"post_info\" onclick=\"window.open('\u002Farticle\u002F${i.abbrlink}.html', '_self')\">\n        |         \u003Ca class=\"article-title\" href=\"\u002Farticle\u002F${i.abbrlink}.html\" title=\"${i.title}\">${i.title}\u003C\u002Fa>\n        |       \u003C\u002Fdiv>\n        |     \u003C\u002Fdiv>`).join('');\n        |   document.querySelector(\"#homeTopGroup>.top_post_group\").innerHTML = postsHtml\n        | }\n        | if(!sessionStorage.getItem(\"postsInfo\")){\n        |   fetch(\"\u002Frandom.json\")\n        |   .then(res=>res.json())\n        |   .then(data=>{\n        |     console.log(1);\n        |     sessionStorage.setItem(\"postsInfo\", JSON.stringify(data));\n        |     renderingPosts(data);\n        |   })\n        | }else{\n        |   renderingPosts(JSON.parse(sessionStorage.getItem(\"postsInfo\")));\n        | }\n        | if(true){\n        |   const leftArrowTip = document.querySelector(\".left-arrow-tip\");\n        |   const rightArrowTip = document.querySelector(\".right-arrow-tip\");\n        |   const xscroll = document.getElementById(\"homeTopGroup\");\n        |   leftArrowTip.addEventListener(\"click\", function () {\n        |     xscroll.scrollTo({ left: 0, behavior: \"smooth\" }); \u002F\u002F 回到最左边\n        |   });\n        |   rightArrowTip.addEventListener(\"click\", function () {\n        |     xscroll.scrollTo({ left: xscroll.scrollWidth, behavior: \"smooth\" }); \u002F\u002F 回到最右边\n        |   });\n        |   function toggleArrowVisibility() {\n        |     \u002F\u002F 计算滚动位置与容器宽度的差值\n        |     const scrollDiff = xscroll.scrollWidth - xscroll.scrollLeft - xscroll.clientWidth;\n        |     if (xscroll.scrollLeft === 0) {\n        |       \u002F\u002F 在最左边，隐藏左箭头，显示右箭头\n        |       leftArrowTip.style.opacity = \"0\";\n        |       rightArrowTip.style.opacity = \"1\";\n        |       rightArrowTip.style.zIndex = \"1\";\n        |       leftArrowTip.style.zIndex = \"-1\";\n        |     } else if (scrollDiff \u003C= 1) {\n        |       \u002F\u002F 在最右边，隐藏右箭头，显示左箭头\n        |       rightArrowTip.style.opacity = \"0\";\n        |       leftArrowTip.style.opacity = \"1\";\n        |       leftArrowTip.style.zIndex = \"1\";\n        |       rightArrowTip.style.zIndex = \"-1\";\n        |     } else {\n        |       \u002F\u002F 既不在最右边又不在最左边，显示两个箭头\n        |       leftArrowTip.style.opacity = \"1\";\n        |       rightArrowTip.style.opacity = \"1\";\n        |       leftArrowTip.style.zIndex = \"1\";\n        |       rightArrowTip.style.zIndex = \"1\";\n        |     }\n        |   }\n        |   function topPostScroll() {\n        |     if (document.getElementById(\"homeTopGroup\")) {\n        |       xscroll.addEventListener(\"mousewheel\", function (e) {\n        |         let v = -e.wheelDelta \u002F 2;\n        |         xscroll.scrollLeft += v;\n        |         e.preventDefault();\n        |       }, false);\n        |       let isScrolling = false;\n        |       xscroll.addEventListener(\"scroll\", function scrollHandler() {\n        |         if (!isScrolling) {\n        |           isScrolling = true;\n        |           setTimeout(function () {\n        |             isScrolling = false;\n        |             toggleArrowVisibility();\n        |           }, 100);\n        |         }\n        |       });\n        |     }\n        |   }\n        |   toggleArrowVisibility();\n        |   topPostScroll();\n        | }\n        | try{\n        |   document.removeEventListener('pjax:complete', catalogActive);\n        |   document.addEventListener('pjax:complete', catalogActive);\n        | }catch(e){}\n","hometop.pug","pug",[42,66,62],{"__ignoreMap":40},[24,68,70],{"id":69},"_3在自定义css文件中添加","3.在自定义css文件中添加：",[34,72,77],{"className":73,"code":75,"language":76,"meta":40},[74],"language-CSS",":root{\n    --mj-white: #fff;\n    --mj-card-bg: rgba(255,255,255,0.67);\n    --mj-theme: #128adadb;\n    --mj-secondbg: #ededed;\n    --mj-card-border: #e3e8f7;\n    --style-border: 2px solid rgba(0, 255, 255, 0.6);\n    --anchor-border: 1px solid rgba(21, 158, 208, 0.8);\n    --style-hover-border: 2px solid var(--mj-theme);\n}\n[data-theme=dark] {\n    --mj-card-bg: rgba(0,0,0,0.6);\n    --style-border: 2px solid rgba(56,211,203,0.8);\n}\n\u002F* home top *\u002F\n#home_top {\n    width: 100%;\n    margin-bottom: 20px;\n}\n.home_top_group {\n    border-radius: 11px;\n    overflow: auto;\n    width: 100%;\n    margin-bottom: 0;\n}\n.homeTopGroup {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    width: 100%;\n    overflow: hidden;\n    overflow-x: score;\n    border-radius: 11px;\n}\n.homeTopGroup::-webkit-scrollbar {\n    display: none;\n}\n\n.homeTopGroup .category_group{\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    min-width: 200px;\n    min-height: 166px;\n}\n.top_post_item>.post_cover>a{\n    display: block;\n}\n.homeTopGroup .category_item {\n    overflow: hidden;\n    transform: scale(1);\n    transition: .3s;\n    height: 48%;\n    border-radius: 12px;\n}\n.homeTopGroup .category_item a.category_button {\n    height: 100%;\n    width: 100%;\n    background: var(--mj-card-bg);\n    border-radius: 12px;\n    display: inline-block;\n    text-align: left;\n    line-height: 4em;\n    font-weight: 800;\n    font-size: 16px;\n    color: var(--mj-white);\n    transition: all .4s cubic-bezier(.39,.575,.565,1);\n    transform: scale(1);\n    overflow: hidden;\n}\n.category_button_text {\n    padding-left: 25px;\n}\na.category_button i {\n    font-size: 3rem;\n    opacity: .3;\n    position: absolute;\n    right: 15px;\n    top: 10%;\n    transition: .3s;\n    transform: rotate(-10deg);\n    \u002F*width: 100px;\n    text-align: center;*\u002F\n}\na.category_button:hover i {\n    opacity: .8;\n    transition: .8s;\n    transition-delay: .15s;\n    transform: scale(1.1)\n}\na.category_button:hover:after{\n    width: 3rem;\n    transition: .8s;\n}\na.category_button:after {\n    top: 45px;\n    width: 1rem;\n    left: 25px;\n    height: 2.5px;\n    background: var(--mj-white);\n    content: \"\";\n    border-radius: 1px;\n    position: absolute;\n    transition: .8s;\n}\n@media screen and (max-width: 1245px){\n  .homeTopGroup,.home_top_group {\n      border-radius: 0px;\n  }\n}\n@media screen and (max-width: 768px){\n  .homeTopGroup .category_group {\n    min-width: 130px!important;\n  }\n  #home_top {\n    width: calc(100% + 17px);\n  }\n  .home_top_group {\n      overflow: visible;\n  }\n  .homeTopGroup {\n      margin-left: -17px;\n      scrollbar-width: none;\n      width: calc(100% + 17px);\n  }\n  .homeTopGroup .category_group{\n      margin-left: 17px;\n  }\n}\n.top_post_group{\n    display: flex;\n    position: relative;\n}\n.top_post_group .top_post_item {\n    display: flex;\n    width: 200px;\n    height: 166px;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 8px;\n    background: var(--mj-card-bg);\n    border-radius: 12px;\n    overflow: hidden;\n    border: var(--style-border);\n    color: var(--text-highlight-color);\n    transition: 0.3s;\n}\n\u002F* .top_post_group .top_post_item:first-child{\n    right: 0px;\n} *\u002F\n.top_post_group .top_post_item:hover {\n    border: var(--style-hover-border);\n    background: #128adadb;\n}\n.top_post_group .top_post_item .post_cover {\n    width: 100%;\n    height: 110px;\n    position: relative;\n}\n.top_post_group .top_post_item .post_cover img {\n    object-fit: cover;\n    width: 100%;\n    height: 110px;\n    background: var(--mj-secondbg);\n}\n.top_post_group .top_post_item .post_cover .post_cover_info {\n    position: absolute;\n    top: 0;\n    width: 101%;\n    height: 100%;\n    opacity: 0;\n    background-color: rgba(0,0,0,0.7) !important;\n    transition: all 0.3s ease;\n    display: flex;\n} \n.top_post_group .top_post_item:hover .post_cover .post_cover_info{\n    opacity: 1;\n}\n.top_post_group .top_post_item .post_cover .post_cover_info .post_cover_text{\n    color: #fff;\n    padding: 13px 14px;\n    font-size: 15px;\n    font-weight: 400;\n    margin: 0;\n    -webkit-line-clamp: 3;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n}\n.top_post_group .top_post_item .post_info a{\n    color: var(--mj-fontcolor) !important;\n    transition: 0;\n}\n.top_post_group .top_post_item:hover .post_info a{\n    color: var(--mj-white) !important;\n}\n.top_post_group .top_post_item .post_info {\n    padding: 6px 9px!important;\n    transition: .3s;\n    width: 100%;\n    height: 100%;\n}\n.top_post_group .top_post_item .post_info .article-title {\n    -webkit-line-clamp: 2;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    line-height: 1.4;\n    justify-content: center;\n    align-items: flex-end;\n    align-content: center;\n    font-weight: 800;\n    font-size: 14px!important;\n    padding: 0!important;\n}\n","CSS",[42,78,75],{"__ignoreMap":40},[11,80,82],{"id":81},"_3后记","3.后记",[16,84,85],{},"对于一些需要这种方案的以及想要简洁风格的可以根据这篇文章进行修改。",{"title":40,"searchDepth":87,"depth":87,"links":88},4,[89,91,99],{"id":13,"depth":90,"text":14},2,{"id":21,"depth":90,"text":22,"children":92},[93,96,98],{"id":26,"depth":94,"text":95},3,"1.在 BlogRoot\\themes\\sxiaohe\\scripts\\helpers中新建home_random_post.js:",{"id":46,"depth":94,"text":97},"2.在 BlogRoot\\themes\\butterfly\\layout\\includes中新建hometop.pug：",{"id":69,"depth":94,"text":70},{"id":81,"depth":90,"text":82},[101],"站点魔改","2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。",false,"md","\u002Fimage\u002FPostCover\u002FrandomPost.avif",{"slots":108},{},true,"\u002F2025\u002F03\u002Frandompost",{"text":112,"minutes":113,"time":114,"words":115},"6 min read",5.595,335700,1119,{"title":5,"description":103},{"loc":110},"posts\u002F2025\u002F03\u002FrandomPost",[120,121,122],"hexo","butterfly","美化","tech","2025-03-05 12:09:00","w_Pvb-v30zoyUN-qlvOiHkih0tP_v2wM6_y-P7dCDhs",[127,141,156,170,184,197,210,222,236,248,259,263,279,294,307,324,338,353,368,383,398,414,431,447,459,473,487,499,513,525,535,547,559,572,583,594,605,617,630,639],{"categories":128,"date":130,"description":131,"image":6,"path":132,"readingTime":133,"recommend":6,"tags":138,"title":139,"type":123,"updated":140},[129],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":134,"minutes":135,"time":136,"words":137},"48 min read",47.34,2840400,9468,[120,121,122],"即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":142,"date":143,"description":144,"image":145,"path":146,"readingTime":147,"recommend":152,"tags":153,"title":154,"type":123,"updated":155},[101],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":148,"minutes":149,"time":150,"words":151},"11 min read",10.8,648000,2160,1,[120,121],"友链魔改","2025-04-19 12:09:00",{"categories":157,"date":158,"description":159,"image":160,"path":161,"readingTime":162,"recommend":152,"tags":167,"title":168,"type":123,"updated":169},[101],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":163,"minutes":164,"time":165,"words":166},"9 min read",8.585,515100,1717,[120,121],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":171,"date":172,"description":173,"image":174,"path":175,"readingTime":176,"recommend":152,"tags":181,"title":182,"type":123,"updated":183},[101],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":177,"minutes":178,"time":179,"words":180},"4 min read",3.31,198600,662,[120,121,122],"轻笑底部美化","2025-02-28 10:00:00",{"categories":185,"date":186,"description":187,"image":188,"path":189,"readingTime":190,"recommend":6,"tags":194,"title":195,"type":123,"updated":196},[101],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":177,"minutes":191,"time":192,"words":193},3.08,184800,616,[120,121],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":198,"date":199,"description":200,"image":201,"path":202,"readingTime":203,"recommend":6,"tags":207,"title":208,"type":123,"updated":209},[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":177,"minutes":204,"time":205,"words":206},3.48,208800,696,[120,121],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":211,"date":199,"description":212,"image":213,"path":214,"readingTime":215,"recommend":6,"tags":220,"title":221,"type":123,"updated":209},[101],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":216,"minutes":217,"time":218,"words":219},"1 min read",0.71,42600,142,[120,121],"轻笑风格背景",{"categories":223,"date":224,"description":225,"image":226,"path":227,"readingTime":228,"recommend":6,"tags":233,"title":234,"type":123,"updated":235},[101],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":229,"minutes":230,"time":231,"words":232},"24 min read",23.275,1396500,4655,[120,121],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":237,"date":199,"description":238,"image":239,"path":240,"readingTime":241,"recommend":6,"tags":246,"title":247,"type":123,"updated":209},[101],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":242,"minutes":243,"time":244,"words":245},"5 min read",4.77,286200,954,[120,121],"卡片美化",{"categories":249,"date":199,"description":250,"image":251,"path":252,"readingTime":253,"recommend":6,"tags":257,"title":258,"type":123,"updated":209},[101],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":216,"minutes":254,"time":255,"words":256},0.345,20700,69,[120,121],"功能美化",{"categories":260,"date":102,"description":103,"image":106,"path":110,"readingTime":261,"recommend":6,"tags":262,"title":5,"type":123,"updated":124},[101],{"text":112,"minutes":113,"time":114,"words":115},[120,121,122],{"categories":264,"date":265,"description":266,"image":267,"path":268,"readingTime":269,"recommend":273,"tags":274,"title":277,"type":123,"updated":278},[101],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":163,"minutes":270,"time":271,"words":272},8.88,532800,1776,11,[275,276,122],"Nuxt","魔改","在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":280,"date":281,"description":282,"image":283,"path":284,"readingTime":285,"recommend":290,"tags":291,"title":292,"type":123,"updated":293},[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":286,"minutes":287,"time":288,"words":289},"16 min read",15.92,955200,3184,10,[275,276,122],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":295,"date":296,"description":297,"image":298,"path":299,"readingTime":300,"recommend":304,"tags":305,"title":306,"type":123,"updated":293},[101],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":242,"minutes":301,"time":302,"words":303},4.38,262800,876,9,[275,276,122],"添加站点详情页面",{"categories":308,"date":310,"description":311,"image":312,"path":313,"readingTime":314,"recommend":6,"tags":318,"title":321,"type":322,"updated":323},[309],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":177,"minutes":315,"time":316,"words":317},3.855,231300,771,[319,320],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":325,"date":326,"description":327,"image":328,"path":329,"readingTime":330,"recommend":304,"tags":335,"title":336,"type":123,"updated":337},[101],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":331,"minutes":332,"time":333,"words":334},"23 min read",22.175,1330500,4435,[275,276,122],"添加追更历史","2025-12-01 20:49:00",{"categories":339,"date":340,"description":341,"image":342,"path":343,"readingTime":344,"recommend":349,"tags":350,"title":351,"type":123,"updated":352},[101],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":345,"minutes":346,"time":347,"words":348},"32 min read",31.72,1903200,6344,8,[275,276,122],"评论优化","2026-03-01 20:49:00",{"categories":354,"date":355,"description":356,"image":357,"path":358,"readingTime":359,"recommend":364,"tags":365,"title":366,"type":123,"updated":367},[101],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":360,"minutes":361,"time":362,"words":363},"8 min read",7.28,436800,1456,7,[275,276,122],"添加装备页面","2025-12-03 20:49:09",{"categories":369,"date":370,"description":371,"image":372,"path":373,"readingTime":374,"recommend":379,"tags":380,"title":381,"type":123,"updated":382},[101],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":375,"minutes":376,"time":377,"words":378},"12 min read",11.165,669900,2233,6,[275,276,122],"文章美化","2025-12-09 20:49:00",{"categories":384,"date":385,"description":386,"image":387,"path":388,"readingTime":389,"recommend":394,"tags":395,"title":396,"type":123,"updated":397},[101],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":390,"minutes":391,"time":392,"words":393},"10 min read",9.745,584700,1949,5,[275,276,122],"侧边组件美化","2025-12-04 20:49:00",{"categories":399,"date":400,"description":401,"image":402,"path":403,"readingTime":404,"recommend":6,"tags":409,"title":412,"type":123,"updated":413},[101],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":405,"minutes":406,"time":407,"words":408},"14 min read",13.155,789300,2631,[410,411],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":415,"date":416,"description":417,"image":418,"path":419,"readingTime":420,"recommend":6,"tags":425,"title":429,"type":123,"updated":430},[129],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":421,"minutes":422,"time":423,"words":424},"3 min read",2.72,163200,544,[426,427,428],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":432,"date":433,"description":434,"image":435,"path":436,"readingTime":437,"recommend":6,"tags":442,"title":445,"type":123,"updated":446},[129],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":438,"minutes":439,"time":440,"words":441},"7 min read",6.86,411600,1372,[443,444],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":448,"date":449,"description":386,"image":450,"path":451,"readingTime":452,"recommend":87,"tags":456,"title":457,"type":123,"updated":458},[101],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":421,"minutes":453,"time":454,"words":455},2.15,129000,430,[275,276,122],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":460,"date":461,"description":462,"image":463,"path":464,"readingTime":465,"recommend":6,"tags":470,"title":471,"type":322,"updated":472},[101],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":466,"minutes":467,"time":468,"words":469},"2 min read",1.82,109200,364,[275,276,122],"站点资源优化","2026-01-07 20:49:00",{"categories":474,"date":476,"description":477,"image":478,"path":479,"readingTime":480,"recommend":6,"tags":484,"title":485,"type":123,"updated":486},[475],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":286,"minutes":481,"time":482,"words":483},15.545,932700,3109,[275,276,122],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":488,"date":489,"description":490,"image":478,"path":491,"readingTime":492,"recommend":6,"tags":496,"title":497,"type":123,"updated":498},[475],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":405,"minutes":493,"time":494,"words":495},13.965,837900,2793,[275,276,122],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":500,"date":501,"description":502,"image":503,"path":504,"readingTime":505,"recommend":152,"tags":510,"title":511,"type":123,"updated":512},[101],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":506,"minutes":507,"time":508,"words":509},"100 min read",99.23,5953800,19846,[275,276,122],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":514,"date":515,"description":477,"image":516,"path":517,"readingTime":518,"recommend":6,"tags":522,"title":523,"type":123,"updated":524},[129],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":163,"minutes":519,"time":520,"words":521},8.91,534600,1782,[275,276,122],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":526,"date":515,"description":477,"image":527,"path":528,"readingTime":529,"recommend":6,"tags":533,"title":534,"type":123,"updated":524},[101],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":421,"minutes":530,"time":531,"words":532},2.47,148200,494,[275,276,122],"【精简】测试老MAC性能",{"categories":536,"date":537,"description":477,"image":538,"path":539,"readingTime":540,"recommend":6,"tags":544,"title":545,"type":123,"updated":546},[101],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":163,"minutes":541,"time":542,"words":543},8.19,491400,1638,[275,276,122],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":548,"date":549,"description":477,"image":550,"path":551,"readingTime":552,"recommend":94,"tags":556,"title":557,"type":123,"updated":558},[101],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":177,"minutes":553,"time":554,"words":555},3.235,194100,647,[275,276,122],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":560,"date":561,"description":477,"image":550,"path":562,"readingTime":563,"recommend":90,"tags":568,"title":570,"type":123,"updated":571},[101],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":564,"minutes":565,"time":566,"words":567},"18 min read",17.265,1035900,3453,[275,569],"页面","游戏展示页面","2026-03-22 10:00:00",{"categories":573,"date":574,"description":477,"image":550,"path":575,"readingTime":576,"recommend":152,"tags":580,"title":581,"type":123,"updated":582},[101],"2026-04-11 14:00:00","\u002F2026\u002F04\u002Fessaynuxtpage",{"text":112,"minutes":577,"time":578,"words":579},5.93,355800,1186,[275,569],"说说页面（Nuxt版本）","2026-04-11 22:00:00",{"categories":584,"date":585,"description":477,"image":6,"path":586,"readingTime":587,"recommend":6,"tags":591,"title":592,"type":123,"updated":593},[129],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fnuxthotpage",{"text":163,"minutes":588,"time":589,"words":590},8.985,539100,1797,[275,569],"用Codex写一个热搜页面","2026-04-13 22:00:00",{"categories":595,"date":596,"description":477,"image":6,"path":597,"readingTime":598,"recommend":6,"tags":602,"title":603,"type":123,"updated":604},[101],"2026-04-21 14:00:00","\u002F2026\u002F04\u002Fnuxtserviceworker",{"text":375,"minutes":599,"time":600,"words":601},11.735,704100,2347,[275,569],"用元宝写一个ServiceWorker","2026-04-21 22:00:00",{"categories":606,"date":607,"description":477,"image":608,"path":609,"readingTime":610,"recommend":152,"tags":614,"title":615,"type":123,"updated":616},[101],"2026-08-08 14:00:00","\u002Fimage\u002FPostCover\u002FcirclePage.avif","\u002F2026\u002F08\u002Fcirclepage",{"text":112,"minutes":611,"time":612,"words":613},5.42,325200,1084,[275,569],"朋友圈大改","2026-08-08 22:00:00",{"categories":618,"date":620,"description":311,"image":621,"path":622,"readingTime":623,"recommend":6,"tags":627,"title":628,"type":322,"updated":629},[619],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":466,"minutes":624,"time":625,"words":626},1.31,78600,262,[319,320],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":631,"date":620,"description":311,"image":621,"path":632,"readingTime":633,"recommend":6,"tags":637,"title":638,"type":322,"updated":629},[619],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":438,"minutes":634,"time":635,"words":636},6.295,377700,1259,[319,320],"世界志：仙神界",{"categories":640,"date":620,"description":311,"image":621,"path":641,"readingTime":642,"recommend":6,"tags":646,"title":647,"type":322,"updated":629},[619],"\u002Fnovel\u002Fworld\u002Fdh",{"text":466,"minutes":643,"time":644,"words":645},1.65,99000,330,[319,320],"世界志：大荒",[649,651],{"title":182,"path":175,"stem":650,"date":172,"type":123,"children":-1},"posts\u002F2025\u002F02\u002FfooterQcqxStyle",{"title":208,"path":202,"stem":652,"date":199,"type":123,"children":-1},"posts\u002F2025\u002F03\u002Fartice sort",1794064390619]