[{"data":1,"prerenderedAt":724},["ShallowReactive",2],{"\u002F2025\u002F12\u002Fpostpagexiugai":3,"index_posts":221,"surround-\u002F2025\u002F12\u002Fpostpagexiugai":719},{"id":4,"title":5,"body":6,"categories":193,"date":195,"description":196,"draft":197,"extension":198,"image":199,"meta":200,"navigation":202,"path":203,"permalink":204,"published":204,"readingTime":205,"recommend":210,"references":204,"seo":211,"sitemap":212,"stem":213,"subtitle":204,"tags":214,"type":218,"updated":219,"__hash__":220},"content\u002Fposts\u002F2025\u002F12\u002FpostPageXiuGai.md","文章美化",{"type":7,"value":8,"toc":180},"minimark",[9,13,18,22,35,39,41,61,64,113,116,119,137],[10,11,12],"h2",{"id":12},"功能增加与删减",[14,15,17],"h3",{"id":16},"v20251209-official","V20251209-OFFICIAL",[19,20,21],"p",{},"新增内容",[23,24,25,29,32],"ul",{},[26,27,28],"li",{},"增加打赏弹窗，可通过后期更换掉配置文件，内置移动到赞赏总览时触发效果",[26,30,31],{},"优化头部文章信息封面在移动端浏览时无法正常预览全部",[26,33,34],{},"增加版权图标虚化功能，增加打赏弹窗入口",[14,36,38],{"id":37},"v20251201-official","V20251201-OFFICIAL",[19,40,21],{},[23,42,43,51,58],{},[26,44,45,46,50],{},"将本地",[47,48,49],"code",{"code":49},"desc","的预览样式更换为ai摘要样式（核心功能未改变）",[26,52,53,54,57],{},"增加版权卡片，使用",[47,55,56],{"code":56},"v-if","进行部分展示",[26,59,60],{},"将头部文章信息进行样式更换",[10,62,63],{"id":63},"目录结构",[23,65,66,72,89,103],{},[26,67,68,71],{},[47,69,70],{"code":70},"\u002Fapp\u002Fcomponents\u002Fpost\u002FPostHeader.vue","：文章顶部信息卡片。",[26,73,74,77,78,81,82,85,86],{},[47,75,76],{"code":76},"\u002Fapp\u002Fcomponents\u002Fpost\u002FPostFooter.vue","：文章底部信息卡片，包含调用",[47,79,80],{"code":80},"打赏弹窗","的方式、复刻",[47,83,84],{"code":84},"Butterfly主题","的",[47,87,88],{"code":88},"版权模块",[26,90,91,94,95,98,99,102],{},[47,92,93],{"code":93},"\u002Fapp\u002Fcomponents\u002Fpopover\u002Freward.vue","：打赏弹窗的处理、调用方式、主界面、开关逻辑，使用了",[47,96,97],{"code":97},"MyDialog.vue","的处理逻辑，内置了",[47,100,101],{"code":101},"rewardCard.vue","的模块显示",[26,104,105,108,109,112],{},[47,106,107],{"code":107},"\u002Fapp\u002Fcomponents\u002Fcard\u002FrewardCard.vue","：打赏弹窗的卡片显示，使用了",[47,110,111],{"code":111},"张洪Heo","的样式。",[10,114,115],{"id":115},"教程开始",[14,117,118],{"id":118},"主要渲染的模块",[120,121,124,134],"alert",{":card":122,"type":123},"true","warning",[125,126,128],"template",{"v-slot:title":127},"",[19,129,130],{},[131,132,133],"strong",{},"注意",[19,135,136],{},"该文章在主题的3.4.9版本中可正常使用，若要进行适配可以按照该文章进行适配",[138,139,141,154,163,172],"tab",{":tabs":140},"[\"PostHeader.vue\", \"PostFooter.vue\", \"reward.vue\", \"rewardCard.vue\"]",[125,142,143],{"v-slot:tab1":127},[144,145,152],"pre",{"className":146,"code":148,"filename":149,"language":150,"meta":151},[147],"language-vue","\u003Cscript setup lang=\"ts\">\nimport type ArticleProps from '~\u002Ftypes\u002Farticle'\nimport { sort } from 'radash'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps\u003CArticleProps>()\n\nconst appConfig = useAppConfig()\n\nconst categoryLabel = computed(() => props.categories?.[0])\nconst categoryIcon = computed(() => getCategoryIcon(categoryLabel.value))\n\nconst shareText = `【${appConfig.title}】${props.title}\\n\\n${\n\tprops.description ? `${props.description}\\n\\n` : ''}${\n\tnew URL(props.path!, appConfig.url).href}`\n\nconst { copy, copied } = useCopy(shareText)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n\u003C!-- 💩夸克浏览器，桌面端只有IE不支持 :has() 了 -->\n\u003Cdiv class=\"post-header\" :class=\"{ 'has-cover': image, 'text-revert': meta?.coverRevert }\">\n\t\u003C!-- \u003CNuxtImg v-if=\"image\" class=\"post-cover\" :src=\"image\" :alt=\"title\" \u002F>\n\t\u003Cdiv class=\"post-nav\">\n\t\t\u003Cdiv class=\"operations\">\n\t\t\t\u003CZButton\n\t\t\t\t:icon=\"copied ? 'ph:check-bold' : 'ph:share-bold' \"\n\t\t\t\t@click=\"copy()\"\n\t\t\t>\n\t\t\t\t文字分享\n\t\t\t\u003C\u002FZButton>\n\t\t\u003C\u002Fdiv>\n\n\t\t\u003Cdiv v-if=\"!meta?.hideInfo\" class=\"post-info\">\n\t\t\t\u003Ctime\n\t\t\t\tv-if=\"date\"\n\t\t\t\tv-tip=\"`创建于 ${getLocaleDatetime(props.date)}`\"\n\t\t\t\t:datetime=\"getIsoDatetime(date)\"\n\t\t\t>\n\t\t\t\t\u003CIcon name=\"ph:calendar-dots-bold\" \u002F>\n\t\t\t\t{{ getPostDate(props.date) }}\n\t\t\t\u003C\u002Ftime>\n\n\t\t\t\u003Ctime\n\t\t\t\tv-if=\"isTimeDiffSignificant(date, updated, .999)\"\n\t\t\t\tv-tip=\"`修改于 ${getLocaleDatetime(props.updated)}`\"\n\t\t\t\t:datetime=\"getIsoDatetime(updated)\"\n\t\t\t>\n\t\t\t\t\u003CIcon name=\"ph:calendar-plus-bold\" \u002F>\n\t\t\t\t{{ getPostDate(props.updated) }}\n\t\t\t\u003C\u002Ftime>\n\n\t\t\t\u003Cspan v-if=\"categoryLabel\">\n\t\t\t\t\u003CIcon :name=\"categoryIcon\" \u002F>\n\t\t\t\t{{ categoryLabel }}\n\t\t\t\u003C\u002Fspan>\n\n\t\t\t\u003Cspan>\n\t\t\t\t\u003CIcon name=\"ph:paragraph-bold\" \u002F>\n\t\t\t\t{{ formatNumber(readingTime?.words) }} 字\n\t\t\t\u003C\u002Fspan>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fdiv>\n\n\t\u003Ch1 class=\"post-title\" :class=\"getPostTypeClassName(type)\">\n\t\t{{ title }}\n\t\u003C\u002Fh1> -->\n\t\u003Cdiv class=\"cover-wrapper\">\n\t\t\u003CNuxtImg v-if=\"image\" class=\"post-cover\" :src=\"image\" :alt=\"title\"\u002F>\n\t\u003C\u002Fdiv>\n\t\u003Cdiv class=\"cover-nav\">\n\t\t\u003Cdiv class=\"post-info\">\n\t\t\t\u003Cspan class=\"date\">\n\t\t\t\t\u003CIcon name=\"ph:calendar-dots-bold\" \u002F>\n\t\t\t\t\u003Ctime :datetime=\"getIsoDatetime(date)\">\n\t\t\t\t\t{{ getPostDate(props.date) }}\n\t\t\t\t\u003C\u002Ftime>\n\t\t\t\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"categroy\" v-if=\"categoryLabel\">\n\t\t\t\t\u003CIcon :name=\"categoryIcon\" \u002F>\n\t\t\t\t{{ categoryLabel }}\n\t\t\t\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"wordsCount\">\n\t\t\t\t\u003CIcon name=\"ph:paragraph-bold\" \u002F>\n\t\t\t\t{{ formatNumber(readingTime?.words) }} 字\n\t\t\t\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"update\">\n\t\t\t\t\u003CIcon name=\"ph:calendar-plus-bold\" \u002F>\n\t\t\t\t\u003Ctime time :datetime=\"getIsoDatetime(updated)\" >\n\t\t\t\t\t{{ getPostDate(props.updated) }}\n\t\t\t\t\u003C\u002Ftime>\n\t\t\t\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"tagItem\">\n\t\t\t\t\u003CIcon name=\"ph:tag-bold\" \u002F>\n\t\t\t\t\u003Cspan class=\"tag\" v-for=\"([key, value]) in Object.entries(tags ?? {})\" :key=\"key\">\n\t\t\t\t\t{{ value }}\n\t\t\t\t\u003C\u002Fspan>\n\t\t\t\u003C\u002Fspan>\n\t\t\u003C\u002Fdiv>\n\t\t\u003Cdiv class=\"post-title\" :class=\"getPostTypeClassName(type)\">\n\t\t\t{{ title }}\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.post-header.has-cover {\n\tbackground-color: var(--c-bg-2);\n  background-color: transparent;\n  border-radius: 1rem 1rem 0 0;\n  flex-direction: column;\n  gap: 0;\n  margin: .5rem;\n\t.cover-wrapper {\n    border-radius: 1rem 1rem 0 0;\n    height: 360px;\n    overflow: hidden;\n    overflow: clip;\n    position: relative;\n\t\t@media (max-width: 768px) {\n\t\t\theight: auto;\n\t\t}\n\t\t.post-cover {\n\t\t\theight: 100%;\n\t\t\t-o-object-fit: cover;\n\t\t\tobject-fit: cover;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\t.cover-nav {\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n    background: transparent;\n    border-radius: 0;\n    display: flex;\n    flex-direction: column;\n    gap: .3rem;\n    padding: 1.6rem 1.2rem;\n\t\t.post-info {\n\t\t\talign-items: center;\n\t\t\tcolor: var(--c-text-soft);\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tgap: .6em 1.2em;\n\t\t\t-moz-column-gap: clamp(1em, 3%, 1.5em);\n\t\t\tcolumn-gap: clamp(1em, 3%, 1.5em);\n\t\t\tfont-size: .85rem;\n\t\t\tline-height: 1.5;\n\t\t\tmargin: 0;\n\t\t\torder: -1;\n\t\t\tpadding: 0;\n\t\t\tspan {\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: .3em;\n\t\t\t}\n\t\t\t.tagItem {\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: .3em .6em;\n\t\t\t\t.tag {\n\t\t\t\t\tbackground-color: var(--c-bg-soft);\n\t\t\t\t\tborder-radius: .4em;\n\t\t\t\t\tcolor: var(--c-text-soft);\n\t\t\t\t\tfont-size: .9em;\n\t\t\t\t\tpadding: .25em .6em;\n\t\t\t\t\ttransition: all .2s;\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground-color: var(--c-primary-soft);\n\t\t\t\t\t\tcolor: var(--c-primary);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.post-title {\n\t\t\t-webkit-backdrop-filter: none;\n\t\t\tbackdrop-filter: none;\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tbox-shadow: none;\n\t\t\tcolor: var(--c-text);\n\t\t\tfont-size: 1.6rem;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 1.4;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n}\n\n.post-header {\n  border-radius: 1rem;\n  color: var(--c-text);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin: .5rem;\n\t.cover-wrapper {\n    overflow: hidden;\n    overflow: clip;\n    position: relative;\n\t}\n\t.cover-nav {\n    display: flex;\n    flex-direction: column;\n    gap: .3rem;\n    opacity: .9;\n    padding: 1.6rem 1.2rem;\n    position: relative;\n\t\t.post-info {\n\t\t\talign-items: center;\n\t\t\tcolor: var(--c-text-soft);\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tgap: .6em 1.2em;\n\t\t\t-moz-column-gap: clamp(1em, 3%, 1.5em);\n\t\t\tcolumn-gap: clamp(1em, 3%, 1.5em);\n\t\t\tfont-size: .85rem;\n\t\t\tline-height: 1.5;\n\t\t\tmargin: 0;\n\t\t\torder: -1;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n}\n\u003C\u002Fstyle>\n\n\u003C!-- 隐藏起来的样式 -->\n\u003C!-- \u003Cstyle lang=\"scss\" scoped>\n.post-header {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tgap: 1rem;\n\tmargin: 0.5rem;\n\tborder-radius: 1rem;\n\tbackground-color: var(--c-bg-2);\n\tcolor: var(--c-text);\n\n\t@media (max-width: $breakpoint-mobile) {\n\t\tmargin: 0;\n\t\tborder-radius: 0;\n\t}\n\n\t&:hover .operations {\n\t\topacity: 1;\n\t}\n\n\t&.has-cover {\n\t\taspect-ratio: 16 \u002F 9;\n    color: #fff;\n    min-height: 200px;\n    overflow: hidden;\n    overflow: clip;\n    position: relative;\n    transition: font-size .2s;\n\n\t\t&:hover {\n\t\t\tfont-size: 0.8em;\n\t\t}\n\n\t\t.post-info {\n\t\t\tfilter: drop-shadow(0 1px 2px #000);\n\t\t}\n\n\t\t.post-title {\n\t\t\tbackground-image: linear-gradient(transparent, #0003, #0005);\n\t\t\ttext-shadow: 0 1px 1px #0003, 0 1px 2px #0003;\n\n\t\t\t&.text-story {\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t}\n\n\t\t&.text-revert {\n\t\t\ttext-shadow: 0 0 2px #FFF, 0 1px 0.5em #FFF;\n\t\t\tcolor: #333;\n\n\t\t\t.post-title {\n\t\t\t\tbackground-image: linear-gradient(transparent, #FFF3, #FFF5);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.operations {\n\tposition: absolute;\n\topacity: 0;\n\tinset-inline-end: 1em;\n\tcolor: var(--c-text-1);\n\ttransition: opacity 0.2s;\n\tz-index: 1;\n}\n\n.post-cover {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.post-title {\n\tpadding: 0.8em 1rem;\n\tfont-size: 1.6em;\n\tline-height: 1.2;\n\tz-index: 1;\n}\n\n.post-nav {\n\tposition: relative;\n\topacity: 0.9;\n\tpadding: 0.8em 1rem;\n\n\t\u002F\u002F 如果在父级设置字体尺寸，会影响祖先字体尺寸改变的行为\n\t\u002F\u002F 并且设置相对尺寸会导致过渡\n\t>* {\n\t\tfont-size: 0.8rem;\n\t}\n\n\t.post-info {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em 1.2em;\n\t\tcolumn-gap: clamp(1em, 3%, 1.5em);\n\t}\n}\n\u003C\u002Fstyle> -->\n","PostHeader.vue","vue","lang=\"vue\"",[47,153,148],{"__ignoreMap":127},[125,155,156],{"v-slot:tab2":127},[144,157,161],{"className":158,"code":159,"filename":160,"language":150,"meta":151},[147],"\u003Cscript setup lang=\"ts\">\nimport { PostFooter } from '#components';\nimport type ArticleProps from '~\u002Ftypes\u002Farticle'\nconst { data: stats } = useFetch('\u002Fapi\u002Fstats')\n\nconst ReWardStore = useReWardStore()\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps\u003CArticleProps>()\n\nconst appConfig = useAppConfig()\n\nconst item = {\n\t作者: appConfig.author.name,\n\t发布时间: getLocalePostDatetime(props.date),\n\t更新时间: getLocalePostDatetime(props.updated),\n\t许可协议: \"CC BY-NC-SA 4.0\",\n}\n\nimport { sort } from 'radash'\n\nconst { data: listRaw } = await useAsyncData\u003CArticleProps[]>('index_posts', () => useArticleIndex().then(data => data.data.value))\n\nconst articlesByTag = computed(() => {\n\tconst result: Record\u003Cstring, any[]> = {}\n\tconst articles = sort(listRaw.value || [], a => new Date(a.date || 0).getTime(), true)\n\tfor (const article of articles) {\n\t\tif (article.tags) {\n\t\t\tfor (const tag of article.tags) {\n\t\t\t\tif (!result[tag]) {\n\t\t\t\t\tresult[tag] = []\n\t\t\t\t}\n\t\t\t\tresult[tag].push(article)\n\t\t\t}\n\t\t}\n\t}\n\treturn result\n})\n\nconst sortedTags = computed(() => {\n\treturn Object.keys(articlesByTag.value).sort((a, b) => {\n\t\tconst aCount = articlesByTag.value[a]?.length || 0\n\t\tconst bCount = articlesByTag.value[b]?.length || 0\n\t\treturn bCount - aCount\n\t})\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n\u003Cdiv class=\"post-footer\">\n\t\u003C!-- \u003Csection v-if=\"references\" class=\"reference\">\n\t\t\u003Cdiv id=\"references\" class=\"title text-creative\">\n\t\t\t参考链接\n\t\t\u003C\u002Fdiv>\n\n\t\t\u003Cdiv class=\"content\">\n\t\t\t\u003Cul>\n\t\t\t\t\u003Cli v-for=\"{ title, link }, i in references\" :key=\"i\">\n\t\t\t\t\t\u003CProseA :href=\"link || ''\">\n\t\t\t\t\t\t{{ title ?? link }}\n\t\t\t\t\t\u003C\u002FProseA>\n\t\t\t\t\u003C\u002Fli>\n\t\t\t\u003C\u002Ful>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fsection>\n\n\t\u003Csection class=\"license\">\n\t\t\u003Cdiv class=\"title text-creative\">\n\t\t\t许可协议\n\t\t\u003C\u002Fdiv>\n\n\t\t\u003Cdiv class=\"content\">\n\t\t\t\u003Cp>\n\t\t\t\t本文采用 \u003CProseA :href=\"appConfig.copyright.url\">\n\t\t\t\t\t{{ appConfig.copyright.name }}\n\t\t\t\t\u003C\u002FProseA>\n\t\t\t\t许可协议，转载请注明出处。\n\t\t\t\u003C\u002Fp>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fsection> -->\n\t\u003Csection class=\"authorCard\">\n\t\t\u003Cdiv class=\"header\">\n\t\t\t\u003Cspan class=\"authorInfo\">\n\t\t\t\t\u003Ch3 class=\"title\">{{ title }}\u003C\u002Fh3>\n\t\t\t\t\u003CZRawLink :to=\"appConfig.url + path\" class=\"url\">\n\t\t\t\t\t{{ appConfig.url }}{{ path }}\n\t\t\t\t\u003C\u002FZRawLink>\n\t\t\t\u003C\u002Fspan>\n\t\t\t\u003Cspan class=\"authorIcon\">\n\t\t\t\t\u003Cicon name=\"ph:copyright-bold\" \u002F>\n\t\t\t\u003C\u002Fspan>\n\t\t\u003C\u002Fdiv>\n\t\t\u003Cdiv class=\"meta\">\n      \u003Cdiv class=\"card-specs\">\n        \u003Cdiv class=\"spec-item\" v-for=\"([key, value]) in Object.entries(item ?? {})\" :key=\"key\">\n          \u003Ch3 class=\"spec-label\">\n            {{ key }}\n          \u003C\u002Fh3>\n          \u003Ch3 class=\"spec-value\" v-if=\"key === '作者' || key === '发布时间' || key === '更新时间'\">\n            {{ value }}\n          \u003C\u002Fh3>\n\t\t\t\t\t\u003CZRawLink class=\"spec-value\" to=\"https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby-nc-sa\u002F4.0\u002Fdeed.zh-hans\" v-if=\"key === '许可协议'\">\n\t\t\t\t\t\t{{ value }}\n\t\t\t\t\t\u003C\u002FZRawLink>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fsection>\n\t\u003Csection class=\"post-bottom\">\n\t\t\u003Cdiv class=\"left\">\n\t\t\t\u003Cdiv class=\"tagsItem\">\n\t\t\t\t\u003CZRawLink class=\"tags\" v-for=\"([key, value]) in Object.entries(tags ?? {})\" :key=\"key\" :to=\"'\u002F?tags=' + value\">\n\t\t\t\t\t{{ value }}\n\t\t\t\t\t\u003Cspan class=\"tagNumber\">{{ articlesByTag[value]?.length }}\u003C\u002Fspan>\n\t\t\t\t\u003C\u002FZRawLink>\n\t\t\t\u003C\u002Fdiv>\t\n\t\t\u003C\u002Fdiv>\n\t\t\u003Cdiv class=\"right\">\n\t\t\t\u003Cdiv class=\"post-reward\">\n\t\t\t\t\u003CZButton class=\"reward-button\" @click=\"ReWardStore.open()\">\n\t\t\t\t\t打赏\n\t\t\t\t\u003C\u002FZButton>\n\t\t\t\u003C\u002Fdiv>\n\t\t\u003C\u002Fdiv>\n\t\u003C\u002Fsection>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.post-footer {\n\tmargin: 2rem 0.5rem;\n\tborder: 1px solid var(--c-border);\n\tborder-radius: 1rem;\n\tbackground-color: var(--c-bg-2);\n}\n\nsection {\n\tpadding: 1rem;\n\n\t& + section {\n\t\tborder-top: 1px solid var(--c-border);\n\t}\n}\n\n.authorCard {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\tpadding: 1.5rem;\n\toverflow: hidden;\n\n\t.header {\n    align-items: flex-start;\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 1rem;\n\t\t.authorInfo {\n\t\t\tflex: 1;\n\t\t\t.title {\n\t\t\t\tfont-size: 1.1rem;\n\t\t\t\tline-height: 1.4;\n\t\t\t\tmargin: 0 0 .5rem;\n\t\t\t}\n\t\t\t.url {\n\t\t\t\tcolor: var(--c-text-soft);\n\t\t\t\tfont-size: .85rem;\n\t\t\t\tmargin: 0;\n\t\t\t\tword-break: break-all;\n\t\t\t}\n\t\t}\n\t\t.authorIcon {\n\t\t\tposition: absolute;\n\t\t\tfilter: blur(5px);\n\t\t\tright: -26px;\n\t\t\tfont-size: 200px;\n\t\t\topacity: .2;\n\t\t\tz-index: 2;\n\t\t\t-webkit-transition: all .3s ease-in-out;\n\t\t\t-moz-transition: all .3s ease-in-out;\n\t\t\t-o-transition: all .3s ease-in-out;\n\t\t\t-ms-transition: all .3s ease-in-out;\n\t\t\ttransition: all .3s ease-in-out;\n\t\t\ttop: -25%;\n\t\t\t&:hover {\n\t\t\t\tfilter: none;\n\t\t\t}\n\t\t}\n\t}\n\t.meta {\n\t\tflex: 1;\n    margin-bottom: 1rem;\n\n\t\t.card-specs {\n\t\t\tbackground: transparent;\n\t\t\tborder-radius: 0;\n\t\t\tdisplay: grid;\n\t\t\tfont-size: .8rem;\n\t\t\tgap: .8rem;\n\t\t\tgrid-template-columns: repeat(5, 1fr);\n\t\t\tpadding: 0;\n\t\t\t@media (max-width: 768px) {\n\t\t\t\tgrid-template-columns: repeat(3, 1fr);\n\t\t\t}\n\n\t\t\t.spec-item {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: .1rem;\n\t\t\t\t.spec-label {\n\t\t\t\t\tcolor: var(--c-text-2);\n\t\t\t\t\t\u002F\u002F font-size: .7rem;\n\t\t\t\t\tfont-weight: 500;\n\t\t\t\t}\n\t\t\t\t.spec-value {\n\t\t\t\t\tcolor: var(--c-text);\n\t\t\t\t\t\u002F\u002F font-size: .8rem;\n\t\t\t\t\tword-break: break-word;\n\t\t\t\t\tfont-size: .9rem;\n    \t\t\tfont-weight: 500;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n.post-bottom {\n\twidth: 100%;\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n\n\t.left {\n    white-space: nowrap;\n    display: flex;\n    text-overflow: ellipsis;\n    flex-wrap: wrap;\n\n\t\t.tagsItem {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t\tflex-wrap: wrap;\n\t\t\tflex-direction: row;\n\t\t\tgap: 8px;\n\n\t\t\t.tags {\n\t\t\t\tbackground: var(--heo-card-bg);\n\t\t\t\tborder: var(--style-border-always);\n\t\t\t\tcolor: var(--heo-fontcolor);\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tmargin: 0;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\twhite-space: nowrap;\n\t\t\t\theight: 32px;\n\t\t\t\tpadding: 0 .6rem;\n\t\t\t\twidth: fit-content;\n\t\t\t\tfont-size: .85em;\n\t\t\t\ttransition: all .2s ease-in-out 0s;\n\n\t\t\t\t.tagNumber {\n\t\t\t\t\tpadding: 2px;\n\t\t\t\t\tbackground: var(--heo-fontcolor);\n\t\t\t\t\tmin-width: 22.5px;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tfont-size: 0.7rem;\n\t\t\t\t\tcolor: var(--heo-card-bg);\n\t\t\t\t\tmargin-left: 4px;\n\t\t\t\t\tline-height: 1;\n\t\t\t\t\ttransition: .2s;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n\u002F\u002F .title {\n\u002F\u002F \tfont-weight: bold;\n\u002F\u002F \tcolor: var(--c-text);\n\u002F\u002F }\n\n\u002F\u002F .content {\n\u002F\u002F \tmargin-top: 0.5em;\n\u002F\u002F \tfont-size: 0.9rem;\n\n\u002F\u002F \tli {\n\u002F\u002F \t\tmargin: 0.5em 0;\n\u002F\u002F \t}\n\u002F\u002F }\n\u003C\u002Fstyle>\n","PostFooter.vue",[47,162,159],{"__ignoreMap":127},[125,164,165],{"v-slot:tab3":127},[144,166,170],{"className":167,"code":168,"filename":169,"language":150,"meta":151},[147],"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  show?: boolean\n  duration?: number\n  onClose?: () => void\n}>()\nconst emit = defineEmits\u003C{\n  close: []\n}>()\nfunction handleClose() {\n  props.onClose?.() || emit('close')\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTransition name=\"float-in\">\n    \u003Cdiv v-if=\"show\" class=\"popover-mask\" @click=\"handleClose\" \u002F>\n  \u003C\u002FTransition>\n\n  \u003CTransition name=\"float-in\">\n    \u003Cdiv v-if=\"show\" class=\"popover-panel\">\n      \u003Cdiv class=\"panel-header\">\n        \u003Ch2>\n          打赏中心\n        \u003C\u002Fh2>\n        \u003Cbutton class=\"close-btn\" aria-label=\"关闭\" @click=\"handleClose\">\n          \u003CIcon name=\"ph:x-bold\" \u002F>\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"panel-content\">\n        \u003Cul class=\"rewardMain\">\n          \u003CLazyCardRewardCard \u002F>\n        \u003C\u002Ful>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FTransition>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.popover-mask {\n  position: fixed;\n  inset: 0;\n  background-color: #0003;\n  backdrop-filter: blur(0.2em);\n  transition: opacity var(--delay, 200);\n  z-index: 100;\n  &.v-enter-from,\n  &.v-leave-to {\n    opacity: 0;\n  }\n}\n.popover-panel {\n  --float-distance: 20vh;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 95%;\n  max-height: 85vh;\n  max-height: 85dvh;\n  max-width: 500px;\n  border: 1px solid var(--c-primary);\n  border-radius: 1em;\n  box-shadow: 0 0.25em 0.5em var(--ld-shadow);\n  background-color: var(--ld-bg-card);\n  padding: 1.2em;\n  overflow-y: auto;\n  transition: all var(--delay, 200);\n  z-index: 1000;\n  .panel-header {\n    margin-bottom: 1em;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    h2 {\n      margin: 0;\n      font-size: 1.2em;\n      font-weight: 600;\n      color: var(--c-text);\n    }\n    .close-btn {\n      padding: 0.4em;\n      border: none;\n      border-radius: 0.5em;\n      background-color: transparent;\n      color: var(--c-text-2);\n      cursor: pointer;\n      transition: all 0.1s;\n      &:hover {\n        background-color: var(--c-bg-soft);\n        color: var(--c-text-1);\n      }\n    }\n  }\n  .panel-content {\n    font-size: 0.95em;\n    color: var(--c-text-1);\n    line-height: 1.6;\n    .rewardMain {\n      border-radius: 12px;\n      background-color: var(--ld-bg-card);\n      border: var(--style-border-always);\n      padding: .8rem;\n      display: flex;\n      box-shadow: var(--heo-shadow-border);\n      flex-direction: column;\n      align-items: center;\n    }\n  }\n}\n.float-in-enter-active,\n.float-in-leave-active {\n  transition: all var(--delay, 200);\n}\n.float-in-enter-from,\n.float-in-leave-to {\n  opacity: 0;\n  transform: translate(-50%, calc(-50% - 20vh));\n}\n@media (max-width: 768px) {\n  .popover-panel {\n    width: 95vw;\n    max-height: 75vh;\n    max-height: 75dvh;\n  }\n}\n\u003C\u002Fstyle>\n","reward.vue",[47,171,168],{"__ignoreMap":127},[125,173,174],{"v-slot:tab4":127},[144,175,178],{"className":176,"code":177,"filename":101,"language":150,"meta":151},[147],"\u003Cscript lang=\"ts\" setup>\nconst rewardInfo = ref({\n\ttitleInfo: \"感谢你赐予我前进的力量\",\n  shoukuan: {\n    微信: \"https:\u002F\u002Foss.hlcode.cn\u002Fserver\u002F2025\u002F12\u002F09\u002F8va1765275351031.png\",\n    支付宝: \"https:\u002F\u002Foss.hlcode.cn\u002Fserver\u002F2025\u002F12\u002F09\u002F8va1765275351031.png\",\n  },\n  link: \"\u002F\"\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cspan class=\"reward-title\">\n    {{ rewardInfo.titleInfo }}\n  \u003C\u002Fspan>\n  \u003Cul class=\"reward-group\">\n    \u003Cli class=\"reward-item\" v-for=\"([key, value]) in Object.entries(rewardInfo.shoukuan ?? {})\" :key=\"key\">\n      \u003CZRawLink :to=\"value\" target=\"_blank\" class=\"reward-image-url\">\n        \u003CNuxtImg :src=\"value\" class=\"reward-image\">\u003C\u002FNuxtImg>\n      \u003C\u002FZRawLink>\n      \u003Cdiv class=\"reward-desc\">\n        {{ key }}\n      \u003C\u002Fdiv>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003CZRawLink :to=\"rewardInfo.link\" target=\"_blank\" class=\"reward-all-info\">\n    \u003Cdiv class=\"reward-all-info-text\">赞赏者名单\u003C\u002Fdiv>\n    \u003Cdiv class=\"reward-all-info-desc\">因为你们的支持让我意识到写文章的价值🙏\u003C\u002Fdiv>\n  \u003C\u002FZRawLink>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\">\n.reward-title {\n  font-weight: 700;\n  color: var(--heo-red);\n}\n.reward-group {\n  display: flex;\n  margin-top: .5rem;\n  .reward-item {\n    display: inline-block;\n    padding: 0 8px;\n    list-style-type: none;\n    vertical-align: top;\n    :first-child {\n      .reward-image-url {\n        .reward-image {\n          border-color: var(--heo-green);\n          --heo-green: #3e9f50;\n          box-shadow: var(--heo-shadow-lightblack);\n          border-radius: 12px;\n          border: var(--style-border-always);\n        }\n      }\n    }\n    :first-child {\n      .reward-image-url {\n        .reward-image {\n          border-color: var(--heo-blue);\n          --heo-blue: #425AEF;\n          box-shadow: var(--heo-shadow-lightblack);\n          border-radius: 12px;\n          border: var(--style-border-always);\n        }\n      }\n    }\n\n    .reward-image-url {\n      background-color: transparent;\n      color: var(--heo-fontcolor);\n      text-decoration: none;\n      transition: all .3s ease-out 0s;\n      overflow-wrap: break-word;\n      -webkit-user-drag: none;\n      .reward-image {\n        width: 130px;\n        height: 130px;\n        border-radius: 8px;\n      }\n    }\n    .reward-desc {\n      padding-top: 0;\n      margin-top: -8px;\n      width: 130px;\n      color: #858585;\n      flex-direction: column;\n      display: flex;\n      align-items: center;\n    }\n  }\n}\n\n.reward-all-info {\n  background: var(--heo-secondbg);\n  color: var(--heo-fontcolor);\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  padding: 10px 30px;\n  border: var(--style-border-always);\n  margin: 8px;\n  width: calc(100% - 16px);\n  &:hover {\n    color: var(--heo-white);\n    background: var(--heo-red);\n    background-image: url(https:\u002F\u002Fmyxzblog.cn-nb1.rains3.com\u002FJgNrST23690481619450556342.avif);\n    box-shadow: var(--heo-shadow-red);\n    border-color: var(--heo-red);\n  }\n  .reward-all-info-text {\n    margin-bottom: 0;\n    font-weight: 700;\n    align-items: center;\n    flex-direction: column;\n    display: flex;\n    font-size: 1rem;\n  }\n  .reward-all-info-desc {\n    font-size: 0.78rem;\n    align-items: center;\n    flex-direction: column;\n    display: flex;\n  }\n}\n\u003C\u002Fstyle>\n",[47,179,177],{"__ignoreMap":127},{"title":127,"searchDepth":181,"depth":181,"links":182},4,[183,189,190],{"id":12,"depth":184,"text":12,"children":185},2,[186,188],{"id":16,"depth":187,"text":17},3,{"id":37,"depth":187,"text":38},{"id":63,"depth":184,"text":63},{"id":115,"depth":184,"text":115,"children":191},[192],{"id":118,"depth":187,"text":118},[194],"站点魔改","2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。",false,"md","\u002Fimage\u002FPostCover\u002FpostMeihua.avif",{"slots":201},{},true,"\u002F2025\u002F12\u002Fpostpagexiugai",null,{"text":206,"minutes":207,"time":208,"words":209},"12 min read",11.165,669900,2233,6,{"title":5,"description":196},{"loc":203},"posts\u002F2025\u002F12\u002FpostPageXiuGai",[215,216,217],"Nuxt","魔改","美化","tech","2025-12-09 20:49:00","aO94jSZLVAHLCexOK_7Dtjs2s38vpWVw1LmWKrbeLk8",[222,238,253,267,281,294,307,319,333,345,356,370,384,399,412,429,443,458,473,477,492,508,525,541,553,567,581,593,607,619,629,641,653,666,677,688,701,710],{"categories":223,"date":225,"description":226,"image":204,"path":227,"readingTime":228,"recommend":204,"tags":233,"title":236,"type":218,"updated":237},[224],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":229,"minutes":230,"time":231,"words":232},"48 min read",47.34,2840400,9468,[234,235,217],"hexo","butterfly","即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":239,"date":240,"description":241,"image":242,"path":243,"readingTime":244,"recommend":249,"tags":250,"title":251,"type":218,"updated":252},[194],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":245,"minutes":246,"time":247,"words":248},"11 min read",10.8,648000,2160,1,[234,235],"友链魔改","2025-04-19 12:09:00",{"categories":254,"date":255,"description":256,"image":257,"path":258,"readingTime":259,"recommend":249,"tags":264,"title":265,"type":218,"updated":266},[194],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":260,"minutes":261,"time":262,"words":263},"9 min read",8.585,515100,1717,[234,235],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":268,"date":269,"description":270,"image":271,"path":272,"readingTime":273,"recommend":249,"tags":278,"title":279,"type":218,"updated":280},[194],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":274,"minutes":275,"time":276,"words":277},"4 min read",3.31,198600,662,[234,235,217],"轻笑底部美化","2025-02-28 10:00:00",{"categories":282,"date":283,"description":284,"image":285,"path":286,"readingTime":287,"recommend":204,"tags":291,"title":292,"type":218,"updated":293},[194],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":274,"minutes":288,"time":289,"words":290},3.08,184800,616,[234,235],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":295,"date":296,"description":297,"image":298,"path":299,"readingTime":300,"recommend":204,"tags":304,"title":305,"type":218,"updated":306},[194],"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":274,"minutes":301,"time":302,"words":303},3.48,208800,696,[234,235],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":308,"date":296,"description":309,"image":310,"path":311,"readingTime":312,"recommend":204,"tags":317,"title":318,"type":218,"updated":306},[194],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":313,"minutes":314,"time":315,"words":316},"1 min read",0.71,42600,142,[234,235],"轻笑风格背景",{"categories":320,"date":321,"description":322,"image":323,"path":324,"readingTime":325,"recommend":204,"tags":330,"title":331,"type":218,"updated":332},[194],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":326,"minutes":327,"time":328,"words":329},"24 min read",23.275,1396500,4655,[234,235],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":334,"date":296,"description":335,"image":336,"path":337,"readingTime":338,"recommend":204,"tags":343,"title":344,"type":218,"updated":306},[194],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":339,"minutes":340,"time":341,"words":342},"5 min read",4.77,286200,954,[234,235],"卡片美化",{"categories":346,"date":296,"description":347,"image":348,"path":349,"readingTime":350,"recommend":204,"tags":354,"title":355,"type":218,"updated":306},[194],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":313,"minutes":351,"time":352,"words":353},0.345,20700,69,[234,235],"功能美化",{"categories":357,"date":358,"description":359,"image":360,"path":361,"readingTime":362,"recommend":204,"tags":367,"title":368,"type":218,"updated":369},[194],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":363,"minutes":364,"time":365,"words":366},"6 min read",5.595,335700,1119,[234,235,217],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":371,"date":372,"description":373,"image":374,"path":375,"readingTime":376,"recommend":380,"tags":381,"title":382,"type":218,"updated":383},[194],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":260,"minutes":377,"time":378,"words":379},8.88,532800,1776,11,[215,216,217],"在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":385,"date":386,"description":387,"image":388,"path":389,"readingTime":390,"recommend":395,"tags":396,"title":397,"type":218,"updated":398},[194],"2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif","\u002F2025\u002F08\u002Fnuxtaboutpage",{"text":391,"minutes":392,"time":393,"words":394},"16 min read",15.92,955200,3184,10,[215,216,217],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":400,"date":401,"description":402,"image":403,"path":404,"readingTime":405,"recommend":409,"tags":410,"title":411,"type":218,"updated":398},[194],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":339,"minutes":406,"time":407,"words":408},4.38,262800,876,9,[215,216,217],"添加站点详情页面",{"categories":413,"date":415,"description":416,"image":417,"path":418,"readingTime":419,"recommend":204,"tags":423,"title":426,"type":427,"updated":428},[414],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":274,"minutes":420,"time":421,"words":422},3.855,231300,771,[424,425],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":430,"date":431,"description":432,"image":433,"path":434,"readingTime":435,"recommend":409,"tags":440,"title":441,"type":218,"updated":442},[194],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":436,"minutes":437,"time":438,"words":439},"23 min read",22.175,1330500,4435,[215,216,217],"添加追更历史","2025-12-01 20:49:00",{"categories":444,"date":445,"description":446,"image":447,"path":448,"readingTime":449,"recommend":454,"tags":455,"title":456,"type":218,"updated":457},[194],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":450,"minutes":451,"time":452,"words":453},"32 min read",31.72,1903200,6344,8,[215,216,217],"评论优化","2026-03-01 20:49:00",{"categories":459,"date":460,"description":461,"image":462,"path":463,"readingTime":464,"recommend":469,"tags":470,"title":471,"type":218,"updated":472},[194],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":465,"minutes":466,"time":467,"words":468},"8 min read",7.28,436800,1456,7,[215,216,217],"添加装备页面","2025-12-03 20:49:09",{"categories":474,"date":195,"description":196,"image":199,"path":203,"readingTime":475,"recommend":210,"tags":476,"title":5,"type":218,"updated":219},[194],{"text":206,"minutes":207,"time":208,"words":209},[215,216,217],{"categories":478,"date":479,"description":480,"image":481,"path":482,"readingTime":483,"recommend":488,"tags":489,"title":490,"type":218,"updated":491},[194],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":484,"minutes":485,"time":486,"words":487},"10 min read",9.745,584700,1949,5,[215,216,217],"侧边组件美化","2025-12-04 20:49:00",{"categories":493,"date":494,"description":495,"image":496,"path":497,"readingTime":498,"recommend":204,"tags":503,"title":506,"type":218,"updated":507},[194],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":499,"minutes":500,"time":501,"words":502},"14 min read",13.155,789300,2631,[504,505],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":509,"date":510,"description":511,"image":512,"path":513,"readingTime":514,"recommend":204,"tags":519,"title":523,"type":218,"updated":524},[224],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":515,"minutes":516,"time":517,"words":518},"3 min read",2.72,163200,544,[520,521,522],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":526,"date":527,"description":528,"image":529,"path":530,"readingTime":531,"recommend":204,"tags":536,"title":539,"type":218,"updated":540},[224],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":532,"minutes":533,"time":534,"words":535},"7 min read",6.86,411600,1372,[537,538],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":542,"date":543,"description":480,"image":544,"path":545,"readingTime":546,"recommend":181,"tags":550,"title":551,"type":218,"updated":552},[194],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":515,"minutes":547,"time":548,"words":549},2.15,129000,430,[215,216,217],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":554,"date":555,"description":556,"image":557,"path":558,"readingTime":559,"recommend":204,"tags":564,"title":565,"type":427,"updated":566},[194],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":560,"minutes":561,"time":562,"words":563},"2 min read",1.82,109200,364,[215,216,217],"站点资源优化","2026-01-07 20:49:00",{"categories":568,"date":570,"description":571,"image":572,"path":573,"readingTime":574,"recommend":204,"tags":578,"title":579,"type":218,"updated":580},[569],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":391,"minutes":575,"time":576,"words":577},15.545,932700,3109,[215,216,217],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":582,"date":583,"description":584,"image":572,"path":585,"readingTime":586,"recommend":204,"tags":590,"title":591,"type":218,"updated":592},[569],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":499,"minutes":587,"time":588,"words":589},13.965,837900,2793,[215,216,217],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":594,"date":595,"description":596,"image":597,"path":598,"readingTime":599,"recommend":249,"tags":604,"title":605,"type":218,"updated":606},[194],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":600,"minutes":601,"time":602,"words":603},"100 min read",99.23,5953800,19846,[215,216,217],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":608,"date":609,"description":571,"image":610,"path":611,"readingTime":612,"recommend":204,"tags":616,"title":617,"type":218,"updated":618},[224],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":260,"minutes":613,"time":614,"words":615},8.91,534600,1782,[215,216,217],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":620,"date":609,"description":571,"image":621,"path":622,"readingTime":623,"recommend":204,"tags":627,"title":628,"type":218,"updated":618},[194],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":515,"minutes":624,"time":625,"words":626},2.47,148200,494,[215,216,217],"【精简】测试老MAC性能",{"categories":630,"date":631,"description":571,"image":632,"path":633,"readingTime":634,"recommend":204,"tags":638,"title":639,"type":218,"updated":640},[194],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":260,"minutes":635,"time":636,"words":637},8.19,491400,1638,[215,216,217],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":642,"date":643,"description":571,"image":644,"path":645,"readingTime":646,"recommend":187,"tags":650,"title":651,"type":218,"updated":652},[194],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":274,"minutes":647,"time":648,"words":649},3.235,194100,647,[215,216,217],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":654,"date":655,"description":571,"image":644,"path":656,"readingTime":657,"recommend":184,"tags":662,"title":664,"type":218,"updated":665},[194],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":658,"minutes":659,"time":660,"words":661},"18 min read",17.265,1035900,3453,[215,663],"页面","游戏展示页面","2026-03-22 10:00:00",{"categories":667,"date":668,"description":571,"image":644,"path":669,"readingTime":670,"recommend":249,"tags":674,"title":675,"type":218,"updated":676},[194],"2026-04-11 14:00:00","\u002F2026\u002F04\u002Fessaynuxtpage",{"text":363,"minutes":671,"time":672,"words":673},5.93,355800,1186,[215,663],"说说页面（Nuxt版本）","2026-04-11 22:00:00",{"categories":678,"date":679,"description":571,"image":644,"path":680,"readingTime":681,"recommend":249,"tags":685,"title":686,"type":218,"updated":687},[194],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fhotnuxtpage",{"text":260,"minutes":682,"time":683,"words":684},8.985,539100,1797,[215,663],"热搜页面（Nuxt版本）","2026-04-13 22:00:00",{"categories":689,"date":691,"description":416,"image":692,"path":693,"readingTime":694,"recommend":204,"tags":698,"title":699,"type":427,"updated":700},[690],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":560,"minutes":695,"time":696,"words":697},1.31,78600,262,[424,425],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":702,"date":691,"description":416,"image":692,"path":703,"readingTime":704,"recommend":204,"tags":708,"title":709,"type":427,"updated":700},[690],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":532,"minutes":705,"time":706,"words":707},6.295,377700,1259,[424,425],"世界志：仙神界",{"categories":711,"date":691,"description":416,"image":692,"path":712,"readingTime":713,"recommend":204,"tags":717,"title":718,"type":427,"updated":700},[690],"\u002Fnovel\u002Fworld\u002Fdh",{"text":560,"minutes":714,"time":715,"words":716},1.65,99000,330,[424,425],"世界志：大荒",[720,722],{"title":490,"path":482,"stem":721,"date":479,"type":218,"children":-1},"posts\u002F2025\u002F12\u002FsmallCardAdd",{"title":456,"path":448,"stem":723,"date":445,"type":218,"children":-1},"posts\u002F2025\u002F12\u002FcommentAdd",1776745734972]