[{"data":1,"prerenderedAt":749},["ShallowReactive",2],{"\u002F2026\u002F04\u002Fessaynuxtpage":3,"index_posts":258,"surround-\u002F2026\u002F04\u002Fessaynuxtpage":746},{"id":4,"title":5,"body":6,"categories":231,"date":233,"description":234,"draft":235,"extension":236,"image":237,"meta":238,"navigation":240,"path":241,"permalink":242,"published":242,"readingTime":243,"recommend":248,"references":242,"seo":249,"sitemap":250,"stem":251,"subtitle":242,"tags":252,"type":255,"updated":256,"__hash__":257},"content\u002Fposts\u002F2026\u002F04\u002FessayNuxtPage.md","说说页面（Nuxt版本）",{"type":7,"value":8,"toc":219},"minimark",[9,13,26,29,39,51,115,118,122,125,134,137,140,188,191],[10,11,12],"h2",{"id":12},"前言",[14,15,16,17,21,22,25],"p",{},"对于自身来讲，在为了区分闲言和文章的过程中总会用到这个的，但是一直在本地部署->无服务器部署->云服务器部署这三环里面绕圈。如果给3种不同部署方式来进行单独页面配置会导致页面开销极大。而自己的博客相较之前的不同框架来讲易用性会更好，所以我就一直想着要不做模块拆分+嵌套引入的方式来完成这个操作，从而通过",[18,19,20],"code",{"code":20},"v-if","或者",[18,23,24],{"code":24},"v-else-if","来进行适配条件。那么话到此处，就先来上手吧。",[10,27,28],{"id":28},"魔改前的配置",[14,30,31,32,21,35,38],{},"既然要来实践了，在多模块的驱动下。如果每一个都需要单独配置，那就会导致后续重写的难度会逐步增加，这会导致整体易用性困难。那就需要我们来进行全局配置，通过调用",[18,33,34],{"code":34},"app.config.ts",[18,36,37],{"code":37},"blog.config.ts","中的自定义配置项来解决这个问题。\n如以下配置:",[40,41,48],"pre",{"className":42,"code":44,"filename":45,"language":46,"meta":47},[43],"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\"",[18,49,44],{"__ignoreMap":50},"",[52,53,54,67],"table",{},[55,56,57],"thead",{},[58,59,60,64],"tr",{},[61,62,63],"th",{},"配置项",[61,65,66],{},"功能",[68,69,70,86,100],"tbody",{},[58,71,72,76],{},[73,74,75],"td",{},"ESSAY_API",[73,77,78,79,82,83],{},"集合不同类别的API链接，通过在不同模块中调用该配置项中的特定内容来进行链接",[80,81],"br",{},"拼接的位置，例如：",[18,84,85],{"code":85},"${API.ISPEAK}\u002Fapi",[58,87,88,91],{},[73,89,90],{},"ESSAY_CONFIG",[73,92,93,94,96,97],{},"集合不同类别的配置项，通过在不同模块中调用配置项中的特定内容来进行拼合链接",[80,95],{},"或者作为显示多少数据量，例如：",[18,98,99],{"code":99},"${API.ISPEAK}\u002Fapi\u002F${test_config_post}?author${CONFIG.ISPEAK.author}",[58,101,102,105],{},[73,103,104],{},"TYPE",[73,106,107,108,110,111,114],{},"通过不同模块中的类别判定来驱动",[18,109,20],{"code":20}," 或者",[18,112,113],{"code":113},"v-else-is"," 来进行显示隐藏",[10,116,117],{"id":117},"核心代码",[119,120,121],"h3",{"id":121},"页面配置",[14,123,124],{},"以下为整体的显隐逻辑页面，因为博客框架是用到纸鹿的博客源码进行构造，其他博客框架按照如何实现来进行适配",[40,126,132],{"className":127,"code":129,"language":130,"meta":131},[128],"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\"",[18,133,129],{"__ignoreMap":50},[119,135,136],{"id":136},"数据源",[14,138,139],{},"整体的数据源其实很杂，所以这边我用直观的展示方式来给到需要的人。",[141,142,144,156],"tab",{":tabs":143},"[\"ispeak\", \"local\"]",[145,146,147,150],"template",{"v-slot:tab1":50},[14,148,149],{},"这个数据原版是采用了ispeak官方原版未构建成js时的源码来进行加入",[40,151,154],{"className":152,"code":153,"language":46,"meta":47},[43],"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",[18,155,153],{"__ignoreMap":50},[145,157,158,169],{"v-slot:tab2":50},[14,159,160,161,168],{},"该版本采用了",[162,163,167],"a",{"href":164,"rel":165},"https:\u002F\u002Fblog.linux-qitong.top\u002F",[166],"nofollow","栖童の小站","的数据框架，也是依靠这个文件来进行重构。同时这个版本有两个文件，一个在types里面，另外一个是在你能引入到的地方。",[141,170,172,180],{":tabs":171},"[\"local.type\", \"local.data\"]",[145,173,174],{"v-slot:tab1":50},[40,175,178],{"className":176,"code":177,"language":46,"meta":47},[43],"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",[18,179,177],{"__ignoreMap":50},[145,181,182],{"v-slot:tab2":50},[40,183,186],{"className":184,"code":185,"language":46,"meta":47},[43],"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",[18,187,185],{"__ignoreMap":50},[119,189,190],{"id":190},"整体页面",[141,192,193,198],{":tabs":143},[145,194,195],{"v-slot:tab1":50},[14,196,197],{},"未写完，请勿使用",[145,199,200],{"v-slot:tab2":50},[141,201,203,211],{":tabs":202},"[\"页面\", \"卡片\"]",[145,204,205],{"v-slot:tab1":50},[40,206,209],{"className":207,"code":208,"language":130,"meta":131},[128],"\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",[18,210,208],{"__ignoreMap":50},[145,212,213],{"v-slot:tab2":50},[40,214,217],{"className":215,"code":216,"language":130,"meta":131},[128],"\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",[18,218,216],{"__ignoreMap":50},{"title":50,"searchDepth":220,"depth":220,"links":221},4,[222,224,225],{"id":12,"depth":223,"text":12},2,{"id":28,"depth":223,"text":28},{"id":117,"depth":223,"text":117,"children":226},[227,229,230],{"id":121,"depth":228,"text":121},3,{"id":136,"depth":228,"text":136},{"id":190,"depth":228,"text":190},[232],"站点魔改","2026-04-11 14:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。",false,"md","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif",{"slots":239},{},true,"\u002F2026\u002F04\u002Fessaynuxtpage",null,{"text":244,"minutes":245,"time":246,"words":247},"6 min read",5.93,355800,1186,1,{"title":5,"description":234},{"loc":241},"posts\u002F2026\u002F04\u002FessayNuxtPage",[253,254],"Nuxt","页面","tech","2026-04-11 22:00:00","-111Py1Q5uyL6Q3ZA-R17LJaRhCJ3RGEpTpRFEPafLg",[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,728,737],{"categories":260,"date":262,"description":263,"image":242,"path":264,"readingTime":265,"recommend":242,"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},[232],"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},[232],"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},[232],"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":242,"tags":328,"title":329,"type":255,"updated":330},[232],"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":242,"tags":341,"title":342,"type":255,"updated":343},[232],"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":242,"tags":354,"title":355,"type":255,"updated":343},[232],"这篇文章讲述如何在页面中添加模块以及使用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":242,"tags":367,"title":368,"type":255,"updated":369},[232],"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":242,"tags":380,"title":381,"type":255,"updated":343},[232],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\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":242,"tags":391,"title":392,"type":255,"updated":343},[232],"从零开始魔改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":242,"tags":403,"title":404,"type":255,"updated":405},[232],"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},[232],"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},[232],"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},[232],"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":242,"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},[232],"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},[232],"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},[232],"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},[232],"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},[232],"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":242,"tags":551,"title":554,"type":255,"updated":555},[232],"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":242,"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":242,"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":220,"tags":598,"title":599,"type":255,"updated":600},[232],"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":242,"tags":612,"title":613,"type":464,"updated":614},[232],"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":234,"image":619,"path":620,"readingTime":621,"recommend":242,"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":242,"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},[232],"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":234,"image":657,"path":658,"readingTime":659,"recommend":242,"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":234,"image":668,"path":669,"readingTime":670,"recommend":242,"tags":674,"title":675,"type":255,"updated":665},[232],"\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":234,"image":679,"path":680,"readingTime":681,"recommend":242,"tags":685,"title":686,"type":255,"updated":687},[232],"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":234,"image":237,"path":691,"readingTime":692,"recommend":228,"tags":696,"title":697,"type":255,"updated":698},[232],"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":234,"image":237,"path":702,"readingTime":703,"recommend":223,"tags":708,"title":709,"type":255,"updated":710},[232],"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":233,"description":234,"image":237,"path":241,"readingTime":713,"recommend":248,"tags":714,"title":5,"type":255,"updated":256},[232],{"text":244,"minutes":245,"time":246,"words":247},[253,254],{"categories":716,"date":718,"description":453,"image":719,"path":720,"readingTime":721,"recommend":242,"tags":725,"title":726,"type":464,"updated":727},[717],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":608,"minutes":722,"time":723,"words":724},1.31,78600,262,[461,462],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":729,"date":718,"description":453,"image":719,"path":730,"readingTime":731,"recommend":242,"tags":735,"title":736,"type":464,"updated":727},[717],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":580,"minutes":732,"time":733,"words":734},6.295,377700,1259,[461,462],"世界志：仙神界",{"categories":738,"date":718,"description":453,"image":719,"path":739,"readingTime":740,"recommend":242,"tags":744,"title":745,"type":464,"updated":727},[717],"\u002Fnovel\u002Fworld\u002Fdh",{"text":608,"minutes":741,"time":742,"words":743},1.65,99000,330,[461,462],"世界志：大荒",[747,242],{"title":709,"path":702,"stem":748,"date":701,"type":255,"children":-1},"posts\u002F2026\u002F03\u002FsteamGamePage",1776057629656]