[{"data":1,"prerenderedAt":785},["ShallowReactive",2],{"\u002F2026\u002F04\u002Fessaynuxtpage":3,"index_posts":258,"surround-\u002F2026\u002F04\u002Fessaynuxtpage":780},{"id":4,"title":5,"ModelAssets":6,"ModelName":6,"ModelPortrait":6,"ModelQuality":6,"body":7,"categories":232,"date":234,"description":235,"draft":236,"extension":237,"image":238,"meta":239,"navigation":241,"path":242,"permalink":6,"published":6,"readingTime":243,"recommend":248,"references":6,"seo":249,"sitemap":250,"stem":251,"subtitle":6,"tags":252,"type":255,"updated":256,"__hash__":257},"content\u002Fposts\u002F2026\u002F04\u002FessayNuxtPage.md","说说页面（Nuxt版本）",null,{"type":8,"value":9,"toc":220},"minimark",[10,14,27,30,40,52,116,119,123,126,135,138,141,189,192],[11,12,13],"h2",{"id":13},"前言",[15,16,17,18,22,23,26],"p",{},"对于自身来讲，在为了区分闲言和文章的过程中总会用到这个的，但是一直在本地部署->无服务器部署->云服务器部署这三环里面绕圈。如果给3种不同部署方式来进行单独页面配置会导致页面开销极大。而自己的博客相较之前的不同框架来讲易用性会更好，所以我就一直想着要不做模块拆分+嵌套引入的方式来完成这个操作，从而通过",[19,20,21],"code",{"code":21},"v-if","或者",[19,24,25],{"code":25},"v-else-if","来进行适配条件。那么话到此处，就先来上手吧。",[11,28,29],{"id":29},"魔改前的配置",[15,31,32,33,22,36,39],{},"既然要来实践了，在多模块的驱动下。如果每一个都需要单独配置，那就会导致后续重写的难度会逐步增加，这会导致整体易用性困难。那就需要我们来进行全局配置，通过调用",[19,34,35],{"code":35},"app.config.ts",[19,37,38],{"code":38},"blog.config.ts","中的自定义配置项来解决这个问题。\n如以下配置:",[41,42,49],"pre",{"className":43,"code":45,"filename":46,"language":47,"meta":48},[44],"language-ts","  essay: {\n    API: {\n      ISPEAK: 'https:\u002F\u002Fispeak.api.wxuyu.top\u002F',\n      MEMOS: '',\n    },\n    CONFIG: {\n      ISPEAK_CONFIG: {\n        author: '69d21e1f84a9d355ffe37d55',\n        error_image: 'https:\u002F\u002Flib.bsgun.cn\u002FHexo-static\u002Fimg\u002Favatar.256.avif'\n      },\n      LOCAL_ESSAY: {\n        page_size: 10\n      },\n    },\n    TYPE: 'local',\n  },\n","'blog.config.ts'","ts","lang=\"ts\"",[19,50,45],{"__ignoreMap":51},"",[53,54,55,68],"table",{},[56,57,58],"thead",{},[59,60,61,65],"tr",{},[62,63,64],"th",{},"配置项",[62,66,67],{},"功能",[69,70,71,87,101],"tbody",{},[59,72,73,77],{},[74,75,76],"td",{},"ESSAY_API",[74,78,79,80,83,84],{},"集合不同类别的API链接，通过在不同模块中调用该配置项中的特定内容来进行链接",[81,82],"br",{},"拼接的位置，例如：",[19,85,86],{"code":86},"${API.ISPEAK}\u002Fapi",[59,88,89,92],{},[74,90,91],{},"ESSAY_CONFIG",[74,93,94,95,97,98],{},"集合不同类别的配置项，通过在不同模块中调用配置项中的特定内容来进行拼合链接",[81,96],{},"或者作为显示多少数据量，例如：",[19,99,100],{"code":100},"${API.ISPEAK}\u002Fapi\u002F${test_config_post}?author${CONFIG.ISPEAK.author}",[59,102,103,106],{},[74,104,105],{},"TYPE",[74,107,108,109,111,112,115],{},"通过不同模块中的类别判定来驱动",[19,110,21],{"code":21}," 或者",[19,113,114],{"code":114},"v-else-is"," 来进行显示隐藏",[11,117,118],{"id":118},"核心代码",[120,121,122],"h3",{"id":122},"页面配置",[15,124,125],{},"以下为整体的显隐逻辑页面，因为博客框架是用到纸鹿的博客源码进行构造，其他博客框架按照如何实现来进行适配",[41,127,133],{"className":128,"code":130,"language":131,"meta":132},[129],"language-vue","\u003Cscript setup lang=\"ts\">\nimport Ispeak_Page_Main from '~\u002Fcomponents\u002Fyjluo\u002Fessay\u002Fispeak\u002FPage_Main.vue';\nimport Local_Page_Main from '~\u002Fcomponents\u002Fyjluo\u002Fessay\u002Flocal\u002FPageMain.vue';\n\u002F\u002F 全局配置\nconst appConfig = useAppConfig()\nconst layoutStore = useLayoutStore()\n\n\u002F\u002F 设置侧边栏组件\nlayoutStore.setAside(['blog-stats', 'blog-tech', 'blog-log'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"appConfig.essay.TYPE === 'ispeak'\">\n    \u003CIspeak_Page_Main \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv v-if=\"appConfig.essay.TYPE === 'memos'\">\n\n  \u003C\u002Fdiv>\n  \u003Ctemplate v-if=\"appConfig.essay.TYPE === 'local'\">\n    \u003CLocal_Page_Main \u002F>\n  \u003C\u002Ftemplate>\n  \n  \u003CPostComment \u002F>\n\u003C\u002Ftemplate>\n","vue","lang=\"vue\"",[19,134,130],{"__ignoreMap":51},[120,136,137],{"id":137},"数据源",[15,139,140],{},"整体的数据源其实很杂，所以这边我用直观的展示方式来给到需要的人。",[142,143,145,157],"tab",{":tabs":144},"[\"ispeak\", \"local\"]",[146,147,148,151],"template",{"v-slot:tab1":51},[15,149,150],{},"这个数据原版是采用了ispeak官方原版未构建成js时的源码来进行加入",[41,152,155],{"className":153,"code":154,"language":47,"meta":48},[44],"export interface TagType {\n  bgColor: string\n  createAt: Date\n  description: string\n  name: string\n  orderNo: number\n  user: string\n  _id: string\n}\nexport interface SpeakType {\n  author: { nickName: string; avatar: string }\n  content: string\n  createdAt: Date\n  showComment: '1' | '0'\n  tag: TagType\n  title: string\n  type: '0' | '1' | '2'\n  updatedAt: Date\n  _id: string\n}\n",[19,156,154],{"__ignoreMap":51},[146,158,159,170],{"v-slot:tab2":51},[15,160,161,162,169],{},"该版本采用了",[163,164,168],"a",{"href":165,"rel":166},"https:\u002F\u002Fblog.linux-qitong.top\u002F",[167],"nofollow","栖童の小站","的数据框架，也是依靠这个文件来进行重构。同时这个版本有两个文件，一个在types里面，另外一个是在你能引入到的地方。",[142,171,173,181],{":tabs":172},"[\"local.type\", \"local.data\"]",[146,174,175],{"v-slot:tab1":51},[41,176,179],{"className":177,"code":178,"language":47,"meta":48},[44],"export type TalkItem = {  \n  text?: string\n  date: string\n  images?: string[]\n  video?: {\n    type?: 'raw' | 'bilibili' | 'bilibili-nano' | 'youtube' | 'douyin' | 'douyin-wide' | 'tiktok'\n    id: string\n    ratio?: string | number\n    poster?: string\n  }\n  tags?: string[]\n  location?: string\n}\n",[19,180,178],{"__ignoreMap":51},[146,182,183],{"v-slot:tab2":51},[41,184,187],{"className":185,"code":186,"language":47,"meta":48},[44],"import type { TalkItem } from \"~\u002Ftypes\u002Flocal.essay\"\n\nexport default [{\n  text: 'cscscs',\n  date: '2026-04-10 14:33',\n  video: {\n    id: 'https:\u002F\u002Fmedia.w3.org\u002F2010\u002F05\u002Fsintel\u002Ftrailer.mp4',\n    poster: 'https:\u002F\u002Flf-package-cn.feishucdn.com\u002Fobj\u002Fatsx-throne\u002Fhire-fe-prod\u002Fportal\u002Fi18n\u002Fstatic\u002Fimage\u002Fvideo-poster.d9fdf4be.jpeg'\n  },\n  image: [\n  ],\n  tags: ['cs'],\n  location: 'cs'\n}]\n",[19,188,186],{"__ignoreMap":51},[120,190,191],{"id":191},"整体页面",[142,193,194,199],{":tabs":144},[146,195,196],{"v-slot:tab1":51},[15,197,198],{},"未写完，请勿使用",[146,200,201],{"v-slot:tab2":51},[142,202,204,212],{":tabs":203},"[\"页面\", \"卡片\"]",[146,205,206],{"v-slot:tab1":51},[41,207,210],{"className":208,"code":209,"language":131,"meta":132},[129],"\u003Cscript setup lang=\"ts\">\nimport Speak_Body_Card from '.\u002FBody\u002FSpeak_Body_Card.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"Speak_Main\" style=\"padding: 1rem;\">\n    \u003CSpeak_Body_Card \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[19,211,209],{"__ignoreMap":51},[146,213,214],{"v-slot:tab2":51},[41,215,218],{"className":216,"code":217,"language":131,"meta":132},[129],"\u003Cscript setup lang=\"ts\">\nimport appConfig from '~\u002Fapp.config';\nimport Button from '~\u002Fcomponents\u002Fpartial\u002FButton.vue';\nimport Speak from '~\u002Fdata\u002Fessay\u002Flocal\u002Fspeak';\n\nconst recentTalks = [...Speak]\n  .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())\n  .slice(0, appConfig.essay.CONFIG.LOCAL_ESSAY.page_size)\n\nfunction replyTalk(content: string): void {\n  const input = document.querySelector('#twikoo .tk-input textarea')\n  if (!(input instanceof HTMLTextAreaElement)) return\n\n  if (content.trim()) {\n    const quotes = content.split('\\n').map(str => `> ${str}`)\n    input.value = `${quotes}\\n\\n`\n  } else {\n    input.value = ''\n  }\n  input.dispatchEvent(new InputEvent('input'))\n\n  const length = input.value.length\n  input.setSelectionRange(length, length)\n  input.focus()\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"Speak_Card\" v-for=\"talk in Speak\" :key=\"talk.date\">\n    \u003Cdiv class=\"Speak_Card_Header\">\n      \u003Cdiv class=\"Card_Header_Left\">\n        \u003CNuxtImg class=\"Card_Header_Image\" :src=\"appConfig.author.avatar\" \u002F>\n        \u003Cdiv class=\"Card_Header_Warp\">\n          \u003Cspan>{{ appConfig.author.name }}\u003C\u002Fspan>\n          \u003Cdiv class=\"Header_Warp_Time\">{{ talk.date }}\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"Speak_Card_Content\">\n      \u003Cdiv class=\"Card_Content_Text\" v-if=\"talk.text\" v-html=\"talk.text\" \u002F>\n      \u003Cdiv v-if=\"talk.image\" class=\"zone_imgbox\">\n        \u003Cfigure v-for=\"(img, imgIndex) in talk.image\" :key=\"imgIndex\" class=\"img-item\">\n          \u003CPic :src=\"img\" zoom class=\"talk-img\" loading=\"lazy\" :fetchpriority=\"imgIndex === 0 ? 'high' : 'low'\" \u002F>\n        \u003C\u002Ffigure>\n      \u003C\u002Fdiv>\n      \u003CVideoEmbed class=\"video\" v-if=\"talk.video\" v-bind=\"talk.video\" height=\"\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"Speak_Card_Footer\">\n      \u003Cdiv class=\"tag\">\n        \u003CBadge class=\"tagCard\" v-for=\"tag in talk.tags\">\n          \u003CIcon name=\"i-tabler:tag\" \u002F>\n          {{ tag }}\n        \u003C\u002FBadge>        \n      \u003C\u002Fdiv>\n      \u003Cbutton class=\"comment-btn\" @click=\"replyTalk(talk.text)\" v-tip=\"`评论`\">\n          \u003CIcon name=\"ph:chats-bold\" class=\"icon\" \u002F>\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.Speak_Card {\n  animation: float-in .3s backwards;\n  animation-delay: var(--delay);\n  border-radius: 8px;\n  box-shadow: 0 0 0 1px var(--c-bg-soft);\n  display: flex;\n  flex-direction: column;\n  gap: .5rem;\n  margin-bottom: 1rem;\n  padding: 1rem;\n  .Speak_Card_Header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n    flex-wrap: wrap;\n    .Card_Header_Left {\n      align-items: center;\n      display: flex;\n      gap: 10px;\n      .Card_Header_Image {\n        border-radius: 50%;\n        box-shadow: 2px 4px 1rem var(--ld-shadow);\n        width: 3em;\n        @supports (corner-shape: squircle) {\n          corner-shape: superellipse(1.2);\n        }\n      }\n      .Card_Header_Warp {\n        .Header_Warp_Name {\n          align-items: center;\n          display: flex;\n          gap: 5px;\n        }\n        .Header_Warp_Time {\n          color: var(--c-text-3);\n          font-family: var(--font-monospace);\n          font-size: 0.8rem;\n        }\n      }\n    }\n  }\n  .Speak_Card_Content {\n    color: var(--c-text-2);\n    display: flex;\n    flex-direction: column;\n    gap: .5rem;\n    line-height: 1.6;\n\n:deep(a[href]) {\n  margin: -.1em -.2em;\n  padding: .1em .2em;\n  background: linear-gradient(var(--c-primary-soft), var(--c-primary-soft)) no-repeat center bottom \u002F 100% .1em;\n  color: var(--c-primary);\n  transition: all .2s;\n\n  &:hover {\n    border-radius: .3em;\n    background-size: 100% 100%;\n  }\n}\n\n:deep(.zone_imgbox) {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n\n  .img-item {\n    position: relative;\n    padding-bottom: 100%;\n    border-radius: 8px;\n    overflow: hidden;\n\n    img {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      cursor: zoom-in;\n      transition: transform .3s;\n\n      &:hover {\n        transform: scale(1.05);\n      }\n    }\n  }\n}\n}\n.Speak_Card_Footer {\nalign-items: center;\ncolor: var(--c-text-3);\ndisplay: flex;\njustify-content: space-between;\n.tag {\n  display: flex;\n  font-size: .7rem;\n  gap: 4px;\n  :deep(.tagCard) {\n    font-size: 12px;\n    font-weight: 700;\n  }\n}\n}\n}\n\u003C\u002Fstyle>\n",[19,219,217],{"__ignoreMap":51},{"title":51,"searchDepth":221,"depth":221,"links":222},4,[223,225,226],{"id":13,"depth":224,"text":13},2,{"id":29,"depth":224,"text":29},{"id":118,"depth":224,"text":118,"children":227},[228,230,231],{"id":122,"depth":229,"text":122},3,{"id":137,"depth":229,"text":137},{"id":191,"depth":229,"text":191},[233],"站点魔改","2026-04-11 14:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。",false,"md","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif",{"slots":240},{},true,"\u002F2026\u002F04\u002Fessaynuxtpage",{"text":244,"minutes":245,"time":246,"words":247},"6 min read",5.93,355800,1186,1,{"title":5,"description":235},{"loc":242},"posts\u002F2026\u002F04\u002FessayNuxtPage",[253,254],"Nuxt","页面","tech","2026-04-11 22:00:00","wi8kK5texVxFIJsbSLNLtBP1z4VPCTmwySHIFOU3uMY",[259,276,290,304,318,331,344,356,370,382,393,406,421,436,449,466,480,495,510,525,540,556,573,589,601,615,628,640,654,666,676,688,699,711,715,726,737,749,762,771],{"categories":260,"date":262,"description":263,"image":6,"path":264,"readingTime":265,"recommend":6,"tags":270,"title":274,"type":255,"updated":275},[261],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":266,"minutes":267,"time":268,"words":269},"48 min read",47.34,2840400,9468,[271,272,273],"hexo","butterfly","美化","即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":277,"date":278,"description":279,"image":280,"path":281,"readingTime":282,"recommend":248,"tags":287,"title":288,"type":255,"updated":289},[233],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":283,"minutes":284,"time":285,"words":286},"11 min read",10.8,648000,2160,[271,272],"友链魔改","2025-04-19 12:09:00",{"categories":291,"date":292,"description":293,"image":294,"path":295,"readingTime":296,"recommend":248,"tags":301,"title":302,"type":255,"updated":303},[233],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":297,"minutes":298,"time":299,"words":300},"9 min read",8.585,515100,1717,[271,272],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":305,"date":306,"description":307,"image":308,"path":309,"readingTime":310,"recommend":248,"tags":315,"title":316,"type":255,"updated":317},[233],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":311,"minutes":312,"time":313,"words":314},"4 min read",3.31,198600,662,[271,272,273],"轻笑底部美化","2025-02-28 10:00:00",{"categories":319,"date":320,"description":321,"image":322,"path":323,"readingTime":324,"recommend":6,"tags":328,"title":329,"type":255,"updated":330},[233],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":311,"minutes":325,"time":326,"words":327},3.08,184800,616,[271,272],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":332,"date":333,"description":334,"image":335,"path":336,"readingTime":337,"recommend":6,"tags":341,"title":342,"type":255,"updated":343},[233],"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":311,"minutes":338,"time":339,"words":340},3.48,208800,696,[271,272],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":345,"date":333,"description":346,"image":347,"path":348,"readingTime":349,"recommend":6,"tags":354,"title":355,"type":255,"updated":343},[233],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":350,"minutes":351,"time":352,"words":353},"1 min read",0.71,42600,142,[271,272],"轻笑风格背景",{"categories":357,"date":358,"description":359,"image":360,"path":361,"readingTime":362,"recommend":6,"tags":367,"title":368,"type":255,"updated":369},[233],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":363,"minutes":364,"time":365,"words":366},"24 min read",23.275,1396500,4655,[271,272],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":371,"date":333,"description":372,"image":373,"path":374,"readingTime":375,"recommend":6,"tags":380,"title":381,"type":255,"updated":343},[233],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":376,"minutes":377,"time":378,"words":379},"5 min read",4.77,286200,954,[271,272],"卡片美化",{"categories":383,"date":333,"description":384,"image":385,"path":386,"readingTime":387,"recommend":6,"tags":391,"title":392,"type":255,"updated":343},[233],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":350,"minutes":388,"time":389,"words":390},0.345,20700,69,[271,272],"功能美化",{"categories":394,"date":395,"description":396,"image":397,"path":398,"readingTime":399,"recommend":6,"tags":403,"title":404,"type":255,"updated":405},[233],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":244,"minutes":400,"time":401,"words":402},5.595,335700,1119,[271,272,273],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":407,"date":408,"description":409,"image":410,"path":411,"readingTime":412,"recommend":416,"tags":417,"title":419,"type":255,"updated":420},[233],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":297,"minutes":413,"time":414,"words":415},8.88,532800,1776,11,[253,418,273],"魔改","在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":422,"date":423,"description":424,"image":425,"path":426,"readingTime":427,"recommend":432,"tags":433,"title":434,"type":255,"updated":435},[233],"2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif","\u002F2025\u002F08\u002Fnuxtaboutpage",{"text":428,"minutes":429,"time":430,"words":431},"16 min read",15.92,955200,3184,10,[253,418,273],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":437,"date":438,"description":439,"image":440,"path":441,"readingTime":442,"recommend":446,"tags":447,"title":448,"type":255,"updated":435},[233],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":376,"minutes":443,"time":444,"words":445},4.38,262800,876,9,[253,418,273],"添加站点详情页面",{"categories":450,"date":452,"description":453,"image":454,"path":455,"readingTime":456,"recommend":6,"tags":460,"title":463,"type":464,"updated":465},[451],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":311,"minutes":457,"time":458,"words":459},3.855,231300,771,[461,462],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":467,"date":468,"description":469,"image":470,"path":471,"readingTime":472,"recommend":446,"tags":477,"title":478,"type":255,"updated":479},[233],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":473,"minutes":474,"time":475,"words":476},"23 min read",22.175,1330500,4435,[253,418,273],"添加追更历史","2025-12-01 20:49:00",{"categories":481,"date":482,"description":483,"image":484,"path":485,"readingTime":486,"recommend":491,"tags":492,"title":493,"type":255,"updated":494},[233],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":487,"minutes":488,"time":489,"words":490},"32 min read",31.72,1903200,6344,8,[253,418,273],"评论优化","2026-03-01 20:49:00",{"categories":496,"date":497,"description":498,"image":499,"path":500,"readingTime":501,"recommend":506,"tags":507,"title":508,"type":255,"updated":509},[233],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":502,"minutes":503,"time":504,"words":505},"8 min read",7.28,436800,1456,7,[253,418,273],"添加装备页面","2025-12-03 20:49:09",{"categories":511,"date":512,"description":513,"image":514,"path":515,"readingTime":516,"recommend":521,"tags":522,"title":523,"type":255,"updated":524},[233],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":517,"minutes":518,"time":519,"words":520},"12 min read",11.165,669900,2233,6,[253,418,273],"文章美化","2025-12-09 20:49:00",{"categories":526,"date":527,"description":528,"image":529,"path":530,"readingTime":531,"recommend":536,"tags":537,"title":538,"type":255,"updated":539},[233],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":532,"minutes":533,"time":534,"words":535},"10 min read",9.745,584700,1949,5,[253,418,273],"侧边组件美化","2025-12-04 20:49:00",{"categories":541,"date":542,"description":543,"image":544,"path":545,"readingTime":546,"recommend":6,"tags":551,"title":554,"type":255,"updated":555},[233],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":547,"minutes":548,"time":549,"words":550},"14 min read",13.155,789300,2631,[552,553],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":557,"date":558,"description":559,"image":560,"path":561,"readingTime":562,"recommend":6,"tags":567,"title":571,"type":255,"updated":572},[261],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":563,"minutes":564,"time":565,"words":566},"3 min read",2.72,163200,544,[568,569,570],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":574,"date":575,"description":576,"image":577,"path":578,"readingTime":579,"recommend":6,"tags":584,"title":587,"type":255,"updated":588},[261],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":580,"minutes":581,"time":582,"words":583},"7 min read",6.86,411600,1372,[585,586],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":590,"date":591,"description":528,"image":592,"path":593,"readingTime":594,"recommend":221,"tags":598,"title":599,"type":255,"updated":600},[233],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":563,"minutes":595,"time":596,"words":597},2.15,129000,430,[253,418,273],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":602,"date":603,"description":604,"image":605,"path":606,"readingTime":607,"recommend":6,"tags":612,"title":613,"type":464,"updated":614},[233],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":608,"minutes":609,"time":610,"words":611},"2 min read",1.82,109200,364,[253,418,273],"站点资源优化","2026-01-07 20:49:00",{"categories":616,"date":618,"description":235,"image":619,"path":620,"readingTime":621,"recommend":6,"tags":625,"title":626,"type":255,"updated":627},[617],"日常随笔","2026-01-12 10:00:00","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":428,"minutes":622,"time":623,"words":624},15.545,932700,3109,[253,418,273],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":629,"date":630,"description":631,"image":619,"path":632,"readingTime":633,"recommend":6,"tags":637,"title":638,"type":255,"updated":639},[617],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":547,"minutes":634,"time":635,"words":636},13.965,837900,2793,[253,418,273],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":641,"date":642,"description":643,"image":644,"path":645,"readingTime":646,"recommend":248,"tags":651,"title":652,"type":255,"updated":653},[233],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":647,"minutes":648,"time":649,"words":650},"100 min read",99.23,5953800,19846,[253,418,273],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":655,"date":656,"description":235,"image":657,"path":658,"readingTime":659,"recommend":6,"tags":663,"title":664,"type":255,"updated":665},[261],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":297,"minutes":660,"time":661,"words":662},8.91,534600,1782,[253,418,273],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":667,"date":656,"description":235,"image":668,"path":669,"readingTime":670,"recommend":6,"tags":674,"title":675,"type":255,"updated":665},[233],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":563,"minutes":671,"time":672,"words":673},2.47,148200,494,[253,418,273],"【精简】测试老MAC性能",{"categories":677,"date":678,"description":235,"image":679,"path":680,"readingTime":681,"recommend":6,"tags":685,"title":686,"type":255,"updated":687},[233],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":297,"minutes":682,"time":683,"words":684},8.19,491400,1638,[253,418,273],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":689,"date":690,"description":235,"image":238,"path":691,"readingTime":692,"recommend":229,"tags":696,"title":697,"type":255,"updated":698},[233],"2026-03-03 10:00:00","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":311,"minutes":693,"time":694,"words":695},3.235,194100,647,[253,418,273],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":700,"date":701,"description":235,"image":238,"path":702,"readingTime":703,"recommend":224,"tags":708,"title":709,"type":255,"updated":710},[233],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":704,"minutes":705,"time":706,"words":707},"18 min read",17.265,1035900,3453,[253,254],"游戏展示页面","2026-03-22 10:00:00",{"categories":712,"date":234,"description":235,"image":238,"path":242,"readingTime":713,"recommend":248,"tags":714,"title":5,"type":255,"updated":256},[233],{"text":244,"minutes":245,"time":246,"words":247},[253,254],{"categories":716,"date":717,"description":235,"image":6,"path":718,"readingTime":719,"recommend":6,"tags":723,"title":724,"type":255,"updated":725},[261],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fnuxthotpage",{"text":297,"minutes":720,"time":721,"words":722},8.985,539100,1797,[253,254],"用Codex写一个热搜页面","2026-04-13 22:00:00",{"categories":727,"date":728,"description":235,"image":6,"path":729,"readingTime":730,"recommend":6,"tags":734,"title":735,"type":255,"updated":736},[233],"2026-04-21 14:00:00","\u002F2026\u002F04\u002Fnuxtserviceworker",{"text":517,"minutes":731,"time":732,"words":733},11.735,704100,2347,[253,254],"用元宝写一个ServiceWorker","2026-04-21 22:00:00",{"categories":738,"date":739,"description":235,"image":740,"path":741,"readingTime":742,"recommend":248,"tags":746,"title":747,"type":255,"updated":748},[233],"2026-08-08 14:00:00","\u002Fimage\u002FPostCover\u002FcirclePage.avif","\u002F2026\u002F08\u002Fcirclepage",{"text":244,"minutes":743,"time":744,"words":745},5.42,325200,1084,[253,254],"朋友圈大改","2026-08-08 22:00:00",{"categories":750,"date":752,"description":453,"image":753,"path":754,"readingTime":755,"recommend":6,"tags":759,"title":760,"type":464,"updated":761},[751],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":608,"minutes":756,"time":757,"words":758},1.31,78600,262,[461,462],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":763,"date":752,"description":453,"image":753,"path":764,"readingTime":765,"recommend":6,"tags":769,"title":770,"type":464,"updated":761},[751],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":580,"minutes":766,"time":767,"words":768},6.295,377700,1259,[461,462],"世界志：仙神界",{"categories":772,"date":752,"description":453,"image":753,"path":773,"readingTime":774,"recommend":6,"tags":778,"title":779,"type":464,"updated":761},[751],"\u002Fnovel\u002Fworld\u002Fdh",{"text":608,"minutes":775,"time":776,"words":777},1.65,99000,330,[461,462],"世界志：大荒",[781,783],{"title":709,"path":702,"stem":782,"date":701,"type":255,"children":-1},"posts\u002F2026\u002F03\u002FsteamGamePage",{"title":724,"path":718,"stem":784,"date":717,"type":255,"children":-1},"posts\u002F2026\u002F04\u002FnuxtHotPage",1794064389045]