[{"data":1,"prerenderedAt":801},["ShallowReactive",2],{"\u002F2025\u002F08\u002Fnuxtaboutpage":3,"index_posts":297,"surround-\u002F2025\u002F08\u002Fnuxtaboutpage":796},{"id":4,"title":5,"body":6,"categories":269,"date":271,"description":272,"draft":273,"extension":274,"image":275,"meta":276,"navigation":278,"path":279,"permalink":280,"published":280,"readingTime":281,"recommend":286,"references":280,"seo":287,"sitemap":288,"stem":289,"subtitle":280,"tags":290,"type":294,"updated":295,"__hash__":296},"content\u002Fposts\u002F2025\u002F08\u002FnuxtAboutPage.md","关于页面(Nuxt)",{"type":7,"value":8,"toc":260},"minimark",[9,13,17,20,25,28,167,170,175,206,213,216],[10,11,12],"h2",{"id":12},"前言",[14,15,16],"p",{},"在将博客框架迁移至 Nuxt 的过程中，“关于”页面也一并迁移了过来。由于当时尚未掌握 Nuxt 的数据处理方式，我只能沿用原有结构，并暂未将其公开。后来，在理解了父组件与子组件之间的数据传递模式后，我重新编写了关于页面。尽管最终呈现的效果仍有改进空间，但已基本实现了预期功能。",[10,18,19],{"id":19},"效果展示",[21,22],"pic",{"caption":23,"src":24},"关于页面展示","https:\u002F\u002Fwww.myxz.top\u002Fassets\u002Fimg\u002Fpost\u002F2025\u002F08\u002Fabout_page.jpg",[10,26,27],{"id":27},"添加vue模块",[29,30,32,56,71,85,99,113,127,141,154],"tab",{":tabs":31},"[\"skillinfo.vue\", \"aboutsitetips.vue\", \"author.vue\", \"game.vue\", \"maxim.vue\", \"myInfoAndSayHello.vue\", \"single.vue\", \"social.vue\", \"technology.vue\"]",[33,34,36,44],"template",{"v-slot:tab1":35},"",[14,37,38,39,43],{},"在 ",[40,41,42],"span",{},"BlogRoot:","\u002Fapp\u002Fcomponents\u002Fabout 中添加 skillinfo.vue：",[45,46,53],"pre",{"className":47,"code":49,"filename":50,"language":51,"meta":52},[48],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\n\u002F\u002F 导入外部数据\nimport { creativityData } from '~\u002Fcreativity';\n\n\u002F\u002F 从 creativityData 中提取技能数据（假设取第一个分类）\nconst skills = computed(() => {\n  const firstCategory = creativityData?.[0];\n  if (!firstCategory?.creativity_list) return null;\n  \n  \u002F\u002F 补充原始代码中需要的字段（根据实际数据结构调整）\n  return {\n    ...firstCategory,\n    title: firstCategory.class_name,  \u002F\u002F 映射 class_name 到 title\n    subtitle: firstCategory.subtitle  \u002F\u002F 直接使用 subtitle\n  };\n});\n\n\u002F\u002F 计算属性：技能标签分组（每两个一组）- 使用 reduce 重构\nconst skillTagGroups = computed(() => {\n  if (!skills.value?.creativity_list) return [];\n  \n  return skills.value.creativity_list.reduce((groups, currentTag) => {\n    \u002F\u002F 取最后一个分组（可能未填满）\n    const lastGroup = groups[groups.length - 1];\n    \n    if (lastGroup?.length === 2) {\n      \u002F\u002F 当前分组已满，创建新分组\n      groups.push([currentTag]);\n    } else {\n      \u002F\u002F 当前分组未满，添加到最后一个分组\n      lastGroup ? lastGroup.push(currentTag) : groups.push([currentTag]);\n    }\n    \n    return groups;\n  }, []); \u002F\u002F 初始值为空数组\n});\n\u003C\u002Fscript>\n\u003Ctemplate>\n    \u003Cdiv v-if=\"skills\" class=\"author-content-item skills\">\n      \u003Cdiv class=\"card-content\">\n        \u003Cdiv class=\"author-content-item-tips\">{{ skills.class_name }}\u003C\u002Fdiv>\n        \u003Cspan class=\"author-content-item-title\">{{ skills.subtitle }}\u003C\u002Fspan>\n        \n        \u003Cdiv class=\"skills-style-group\">\n          \u003C!-- 标签分组展示（每两个一组） -->\n          \u003Cdiv class=\"tags-group-all\">\n            \u003Cdiv class=\"tags-group-wrapper\">\n              \u003Cdiv \n                v-for=\"(group, groupIdx) in skillTagGroups\" \n                :key=\"groupIdx\" \n                class=\"tags-group-icon-pair\"\n              >\n                \u003Cdiv \n                  v-for=\"(tag, tagIdx) in group\" \n                  :key=\"tagIdx\" \n                  class=\"tags-group-icon\" \n                  :style=\"{ background: tag.color }\"\n                >\n                  \u003Cimg \n                    class=\"entered loading\"\n                    :src=\"tag.icon\" \n                    :title=\"tag.name\"\n                    :style=\"{ color: tag.icon_color || '' }\"\n                    alt=\"\"\n                  >\n                \u003C\u002Fdiv>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n\n          \u003C!-- 全部技能列表 -->\n          \u003C!-- \u003Cdiv class=\"skills-list\">\n            \u003Cdiv \n              v-for=\"(tag, tagIdx) in skills.creativity_list\" \n              :key=\"tagIdx\" \n              class=\"skill-info\"\n            >\n              \u003Cdiv \n                class=\"skill-icon\" \n                :style=\"{ background: tag.color }\"\n              >\n                \u003Cimg \n                  v-if=\"tag.img\" \n                  :src=\"tag.icon\" \n                  :title=\"tag.name\"\n                  :style=\"{ color: tag.icon_color || '' }\"\n                  alt=\"\"\n                >\n              \u003C\u002Fdiv>\n              \u003Cdiv class=\"skill-name\">\n                \u003Cspan>{{ tag.name }}\u003C\u002Fspan>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"etc ...\">...\u003C\u002Fdiv>\n          \u003C\u002Fdiv> -->\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","skillinfo.vue","vue","wrap",[54,55,49],"code",{"__ignoreMap":35},[33,57,58,63],{"v-slot:tab2":35},[14,59,38,60,62],{},[40,61,42],{},"\u002Fapp\u002Fcomponents\u002Fabout 中添加 aboutsitetips.vue：",[45,64,69],{"className":65,"code":66,"filename":67,"language":51,"meta":68},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"aboutsiteTips author-content-item\" v-for=\"(myinfo, index) in about\" :key=\"index\">\n        \u003Cdiv v-for=\"(info, index) in myinfo.myinfo\" :key=\"index\">\n            \u003Cdiv v-for=\"card in info.card\" :key=\"card.tips\">\n                \u003Cdiv class=\"author-content-item-tips\">\n                    {{ card.tips }}\n                \u003C\u002Fdiv>\n                \u003Ch2>\n                    {{ card.conect1 }}\n                    \u003Cbr \u002F>\n                    {{ card.conect2 }}\n                    \u003Cspan class=\"inline-word\">\n                        {{ card.inlineword }}\n                    \u003C\u002Fspan>\n                    \u003Cdiv class=\"mask\" v-for=\"mask in card.mask\" :key=\"mask.firstTips\">\n                        \u003Cspan class=\"first-tips\">\n                            {{ mask.firstTips }}\n                        \u003C\u002Fspan>\n                        \u003Cspan>\n                            {{ mask.span }}\n                        \u003C\u002Fspan>\n                        \u003Cspan data-up=\"data-up\">\n                            {{ mask.up }}\n                        \u003C\u002Fspan>\n                        \u003Cspan data-show=\"data-show\">\n                            {{ mask.show }}\n                        \u003C\u002Fspan>\n                    \u003C\u002Fdiv>\n                \u003C\u002Fh2>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n\u002F* aboutsiteTips *\u002F\n.author-content-item.aboutsiteTips {\n    display: flex;\n    justify-content: center;\n    align-items: flex-start;\n    flex-direction: column;\n    flex: 3;\n}\n\n.author-content-item .author-content-item-tips {\n    opacity: .8;\n    font-size: .6rem;\n    margin-bottom: .5rem;\n}\n\n.aboutsiteTips h2 {\n    margin-right: auto;\n    font-size: 36px;\n    font-family: Helvetica;\n    line-height: 1.06;\n    letter-spacing: -.02em;\n    color: var(--heo-fontcolor);\n    margin-top: 0;\n}\n\n.aboutsiteTips .mask {\n    height: 36px;\n    position: relative;\n    overflow: hidden;\n    margin-top: 4px;\n}\n\n.aboutsiteTips .mask span {\n    display: block;\n    box-sizing: border-box;\n    position: absolute;\n    top: 36px;\n    padding-bottom: var(--offset);\n    background-size: 100% 100%;\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-repeat: no-repeat\n}\n\n.aboutsiteTips .mask span[data-show] {\n    transform: translateY(-100%);\n    transition: .5s transform ease-in-out\n}\n\n.aboutsiteTips .mask span[data-up] {\n    transform: translateY(-200%);\n    transition:.5s transform ease-in-out;\n}\n\n.aboutsiteTips .mask span:nth-child(1) {\n    background-image: linear-gradient(45deg,#0ecffe 50%,#07a6f1)\n}\n\n.aboutsiteTips .mask span:nth-child(2) {\n    background-image: linear-gradient(45deg,#18e198 50%,#0ec15d)\n}\n\n.aboutsiteTips .mask span:nth-child(3) {\n    background-image: linear-gradient(45deg,#8a7cfb 50%,#633e9c)\n}\n\n.aboutsiteTips .mask span:nth-child(4) {\n    background-image: linear-gradient(45deg,#fa7671 50%,#f45f7f)\n}\n\u003C\u002Fstyle>\n","aboutsitetips.vue","warp",[54,70,66],{"__ignoreMap":35},[33,72,73,78],{"v-slot:tab3":35},[14,74,38,75,77],{},[40,76,42],{},"\u002Fapp\u002Fcomponents\u002Fabout 中添加 author.vue：",[45,79,83],{"className":80,"code":81,"filename":82,"language":51,"meta":68},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\n\nconst appConfig = useAppConfig()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"author-main\" v-for=\"(aboutItem, aboutIndex) in about\" :key=\"aboutIndex\">\n        \u003Cdiv id=\"author-main\" v-for=\"(author, authorIndex) in aboutItem.author\":key=\"authorIndex\">\n            \u003Cdiv class=\"author-tag-left\" v-for=\"left in author.left\" :key=\"left.tag1\">\n                \u003Cspan class=\"author-tag\">{{ left.tag1 }}\u003C\u002Fspan>\n                \u003Cspan class=\"author-tag\">{{ left.tag2 }}\u003C\u002Fspan>\n                \u003Cspan class=\"author-tag\">{{ left.tag3 }}\u003C\u002Fspan>\n                \u003Cspan class=\"author-tag\">{{ left.tag4 }}\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003CNuxtImg :src=\"appConfig.header.avatarFrame\" class=\"avatarFrame\" alt=\"头像框占位\"\u002F>\n            \u003Cdiv class=\"author-box\" style=\"z-index:0\">\n                \u003Cdiv class=\"author-img\">\n                    \u003Cimg class=\"no-lightbox\" :src=\"author.logo\" style=\"width: 180px;\">\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"author-tag-right\" v-for=\"right in author.right\" :key=\"right.tag1\">\n                \u003Cspan class=\"author-tag\">{{ right.tag1 }}\u003C\u002Fspan>\n                \u003Cspan class=\"author-tag\">{{ right.tag2 }}\u003C\u002Fspan>\n                \u003Cspan class=\"author-tag\">{{ right.tag3 }}\u003C\u002Fspan>\n                \u003Cspan class=\"author-tag\">{{ right.tag4 }}\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n.avatarFrame {\n    position: absolute;\n    top: -18px;\n    transform: scale(1.3);\n    width: 180px;\n    z-index: 1;\n}\n\u002F* author *\u002F\n#author-main {\n    display: -webkit-box;\n    display: -moz-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: box;\n    display: flex;\n    -webkit-box-align: center;\n    -moz-box-align: center;\n    -o-box-align: center;\n    -ms-flex-align: center;\n    -webkit-align-items: center;\n    align-items: center;\n    -webkit-box-pack: center;\n    -moz-box-pack: center;\n    -o-box-pack: center;\n    -ms-flex-pack: center;\n    -webkit-justify-content: center;\n    justify-content: center;\n    margin: 0 0 16px 0;\n    user-select: none;\n}\n.author-box {\n    position: relative;\n    width: 180px;\n    height: 180px;\n    background: rgba(253, 253, 253, .8);\n    border-radius: 50%;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.author-box span {\n    position: absolute;\n    inset: 5px;\n    border-radius: 50%;\n    background: rgba(253, 253, 253, .8);\n    z-index: 1;\n}\n\n.author-info {\n    display: flex;\n    align-items: center;\n    margin: 0 0 16px 0;\n}\n\n.author-tag-left {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    margin-right: 18px;\n}\n\n.author-tag-left .author-tag:first-child, .author-tag-left .author-tag:last-child {\n    margin-right: -16px;\n}\n.author-tag-right {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 18px;\n}\n.author-tag:nth-child(1) {\n    animation-delay: 0s;\n}\n.author-tag:nth-child(2) {\n    animation-delay: .6s;\n}\n.author-tag:nth-child(3) {\n    animation-delay: 1.2s;\n}\n.author-tag:nth-child(4) {\n    animation-delay: 1.8s;\n}\n.author-tag {\n    transform: translate(0, -4px);\n    padding: 1px 8px;\n    background: var(--heo-card-bg);\n    border: var(--style-border-always);\n    border-radius: 40px;\n    margin-top: 6px;\n    font-size: 14px;\n    font-weight: 700;\n    box-shadow: var(--heo-shadow-lightblack);\n    animation: 6s ease-in-out 0s infinite normal none running floating;\n}\n.author-img {\n    margin: 0 30px;\n    border-radius: 50%;\n    width: 180px;\n    height: 180px;\n    position: relative;\n    background: var(--heo-secondbg);\n    user-select: none;\n    transition: .3s;\n}\n.author-img #lottie_avatar {\n    border-radius: 200px;\n    overflow: hidden;\n    width: 180px;\n    height: 180px;\n}\n\u003C\u002Fstyle>\n","author.vue",[54,84,81],{"__ignoreMap":35},[33,86,87,92],{"v-slot:tab4":35},[14,88,38,89,91],{},[40,90,42],{},"\u002Fapp\u002Fcomponents\u002Fabout 中添加 game.vue：",[45,93,97],{"className":94,"code":95,"filename":96,"language":51,"meta":68},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"author-content-item game\" v-for=\"(gameItem, index) in about\" :key=\"index\" style=\"width: 49%;\">\n        \u003Cdiv v-for=\"game in gameItem.game\" :key=\"game.tip\">\n            \u003Cdiv class=\"card-content\">\n                \u003Cdiv class=\"author-content-item-tips\">\n                    {{ game.tip }}\n                \u003C\u002Fdiv>\n                \u003Cspan class=\"author-content-item-title\">\n                    {{ game.title }}\n                \u003C\u002Fspan>\n                \u003Cdiv class=\"content-bottom\">\n                    \u003C!-- \u003Cdiv class=\"icon-group\">\n                        \u003Cdiv class=\"loading-bar\" role=\"presentation\" aria-hidden=\"true\">\n                            \u003Cimg class=\"no-lightbox\" :src=\"game.image\" alt=\"Loading...\" longdesc=\"https:\u002F\u002Fys.mihoyo.com\u002Fmain\u002F\" \u002F>\n                        \u003C\u002Fdiv>\n                    \u003C\u002Fdiv> -->\n                    \u003Cdiv class=\"tips game-yuanshen-uid\">\n                        {{ game.uid }}\n                    \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n\u002F* game *\u002F\n.author-content-item.game {\n    background: url(https:\u002F\u002Fbcjyn0fc8o7wifyp.public.blob.vercel-storage.com\u002Fimg\u002F1567427018126688.jpg) no-repeat top;\n    background-size: cover;\n    min-height: 300px;\n    overflow: hidden;\n    color: var(--heo-white);\n    width: 59%;\n}\n\u003C\u002Fstyle>\n","game.vue",[54,98,95],{"__ignoreMap":35},[33,100,101,106],{"v-slot:tab5":35},[14,102,38,103,105],{},[40,104,42],{},"\u002Fapp\u002Fcomponents\u002Fabout 中添加 maxim.vue：",[45,107,111],{"className":108,"code":109,"filename":110,"language":51,"meta":68},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"author-content-item maxim\" v-for=\"(maximItem, index) in about\" :key=\"index\">\n        \u003Cdiv v-for=\"maxim in maximItem.maxim\" :key=\"maxim.tip\">\n            \u003Cdiv class=\"author-content-item-tips\">\n                {{ maxim.tip }}\n            \u003C\u002Fdiv>\n            \u003Cspan class=\"maxim-title\">\n                \u003Cspan style=\"opacity:.6;margin-bottom:8px\">\n                    {{ maxim.title1 }}\n                \u003C\u002Fspan>\n                \u003Cspan>\n                    {{ maxim.title2 }}\n                \u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n\u002F* maxim *\u002F\n.author-content-item.maxim {\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.1;\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.author-content-item .author-content-item-tips {\n    opacity: .8;\n    font-size: .6rem;\n    margin-bottom: .5rem;\n}\n\n.author-content-item.maxim .maxim-title {\n    display: flex;\n    flex-direction: column;\n}\n\u003C\u002Fstyle>\n","maxim.vue",[54,112,109],{"__ignoreMap":35},[33,114,115,120],{"v-slot:tab6":35},[14,116,38,117,119],{},[40,118,42],{},"\u002Fapp\u002Fcomponents\u002Fabout 中添加 myInfoAndSayHello.vue：",[45,121,125],{"className":122,"code":123,"filename":124,"language":51,"meta":52},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"author-content-item myInfoAndSayHello\" v-for=\"(myinfo, index) in about\" :key=\"index\" style=\"text-align: center; width: 100%\">\n        \u003Cdiv v-for=\"info in myinfo.myinfo\" :key=\"info.title1\">\n            \u003Cdiv class=\"title1\">\n                {{ info.title1 }}\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"title2\">\n                {{ info.title2 }}\n                \u003Cspan class=\"inline-word\">\n                    {{ info.inlineword1 }}\n                \u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"title1\">\n                {{ info.title3 }}\n                \u003Cspan class=\"inline-word\">\n                    {{ info.inlineword2 }}\n                \u003C\u002Fspan>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n\u002F* myInfoAndSayHello *\u002F\n#about-page .myInfoAndSayHello {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    color: var(--heo-white);\n    background: linear-gradient(120deg, #9a79fa 0, #00d4ff 100%);\n    background-size: 200%;\n    min-height: 175px;\n}\n\n#about-page .myInfoAndSayHello .title1 {\n    opacity: .8;\n    line-height: 1.3;\n}\n\n#about-page .myInfoAndSayHello .title2 {\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1.1;\n    margin: .5rem 0;\n}\n\n.inline-word {\n    word-break: keep-all;\n    white-space: nowrap;\n}\n\n#about-page .myInfoAndSayHello .title1 {\n    opacity: .8;\n    line-height: 1.3;\n}\n\n.inline-word {\n    word-break: keep-all;\n    white-space: nowrap;\n}\n\u003C\u002Fstyle>\n","myInfoAndSayHello.vue",[54,126,123],{"__ignoreMap":35},[33,128,129,134],{"v-slot:tab7":35},[14,130,38,131,133],{},[40,132,42],{},"\u002Fapp\u002Fcomponents\u002Fabout 中添加 ：",[45,135,139],{"className":136,"code":137,"filename":138,"language":51,"meta":52},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\nconst { data: singlePost } = await useAsyncData('\u002Fabout', () => queryCollection('content').path('\u002Fabout').first())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"create-site-post author-content-item single\" v-for=\"(singleItem, index) in about\" :key=\"index\" style=\"width: 100%\">\n        \u003Cdiv v-for=\"single in singleItem.single\" :key=\"single.tip\">\n            \u003Cdiv class=\"author-content-item-tips\">\n                {{ single.tip }}\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"author-content-item-title\">\n                {{ single.title }}\n            \u003C\u002Fdiv>\n            \u003Cp class=\"author-content-item-content\">\n                {{ single.content }}\n            \u003C\u002Fp>\n            \u003Cdiv class=\"lishi\">\n                {{ single.lishi }}\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"singlePost\">\n                \u003CContentRenderer\n                v-if=\"singlePost\"\n                :value=\"singlePost\"\n                class=\"article\"\n                \u002F>\n                \u003Cp v-else class=\"text-center\">\n                    可于 about.md 配置补充说明。\n                \u003C\u002Fp>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n\u002F* single *\u002F\n.author-content-item.single {\n    width: 100%;\n}\n.author-content-item .author-content-item-tips {\n    opacity: .8;\n    font-size: 12px;\n    margin-bottom: .5rem;\n}\n.author-content-item-title {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n}\n.lishi {\n    font-size: 1.875rem;\n    line-height: 2.25rem;\n}\n.author-content-item-content {\n    margin-bottom: 1rem;\n    margin-top: .5rem;\n    vertical-align: middle;\n}   \n\u003C\u002Fstyle>\n","single.vue",[54,140,137],{"__ignoreMap":35},[33,142,143,147],{"v-slot:tab8":35},[14,144,38,145,133],{},[40,146,42],{},[45,148,152],{"className":149,"code":150,"filename":151,"language":51,"meta":52},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"author-content-item social\" style=\"width: 38%;\">\n        \u003Cdiv v-for=\"(page, index) in about\" :key=\"index\">\n            \u003Cdiv v-for=\"social in page.social\" :key=\"social.herf\" style=\"margin-bottom: 1rem;\">\n                \u003Ca :herf=\"social.herf\">\n                    \u003Cspan :class=\"social.class\" aria-hidden=\"true\" style=\"width: 25px; height: 25px; margin: 0 auto;\">\u003C\u002Fspan>\n                \u003C\u002Fa>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n\u002F* 社交 *\u002F\n.author-content-item.social{\n    display: flex;\n    -webkit-box-orient: horizontal;\n    flex-direction: row;\n    -webkit-box-pack: start;\n    justify-content: flex-start;\n    max-width: 39%;\n}\n.author-content-item.social a {\n    display: flex;\n    -webkit-box-align: center;\n    align-items: center;\n    height: 60px;\n    width: 60px;\n    border-radius: 12px;\n    background: rgb(153, 169, 191);\n}\n\u003C\u002Fstyle>\n","social.vue",[54,153,150],{"__ignoreMap":35},[33,155,156,160],{"v-slot:tab9":35},[14,157,38,158,133],{},[40,159,42],{},[45,161,165],{"className":162,"code":163,"filename":164,"language":51,"meta":52},[48],"\u003Cscript setup lang=\"ts\">\nimport { about } from '..\u002F..\u002Fabout'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"author-content-item like-technology\" v-for=\"(technologyItem, index) in about\" :key=\"index\" style=\"width: 49.9%;\">\n        \u003Cdiv v-for=\"technology in technologyItem.technology\" :key=\"technology.tip\">\n            \u003Cdiv class=\"card-content\">\n                \u003Cdiv class=\"author-content-item-tips\">\n                    {{ technology.tip }}\n                \u003C\u002Fdiv>\n                \u003Cspan class=\"author-content-item-title\">\n                    {{ technology.title }}\n                \u003C\u002Fspan>\n                \u003Cdiv class=\"content-bottom\">\n                    \u003Cdiv class=\"tips\">\n                        {{ technology.bottomTip }}\n                    \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n\u002F* technology *\u002F\n.author-content-item.like-technology {\n    background: url(https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_25.avif) no-repeat;\n    background-size: cover;\n    min-height: 230px;\n    \u002F* color: var(--heo-white); *\u002F\n}\n\n.author-content-item .author-content-item-tips {\n    opacity: .8;\n    font-size: .6rem;\n    margin-bottom: .5rem;\n}\n\n.author-content-item .card-content .author-content-item-title {\n    margin-bottom: .5rem;\n}\n.author-content-item .author-content-item-title {\n    font-size: 36px;\n    font-weight: 700;\n    line-height: 1;\n}\n\n.author-content-item .content-bottom {\n    margin-top: auto;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: relative;\n    min-height: 40px;\n}\n\n.author-content-item .content-bottom .tips {\n    max-width: calc(100% - 6rem);\n    line-height: 1.2;\n}\n\u003C\u002Fstyle>\n","technology.vue",[54,166,163],{"__ignoreMap":35},[10,168,169],{"id":169},"添加vue页面",[14,171,38,172,174],{},[40,173,42],{},"\u002Fapp\u002Fpages 中添加 about.vue",[176,177,179,184],"alert",{"type":178},"warning",[33,180,181],{"v-slot:title":35},[14,182,183],{},"注意事项",[185,186,187,191],"ol",{},[188,189,190],"li",{},"还未写完",[188,192,193,194,201],{},"基础内容精简，链接的文件可访问以下Github链接：\n",[195,196,200],"a",{"href":197,"rel":198},"https:\u002F\u002Fgithub.com\u002F661111\u002FMyxz_Blog_Nuxt\u002Fblob\u002Fmaster\u002Fpublic\u002Fassets\u002Fcss\u002Fabout.css",[199],"nofollow","CSS样式",[195,202,205],{"href":203,"rel":204},"https:\u002F\u002Fgithub.com\u002F661111\u002FMyxz_Blog_Nuxt\u002Fblob\u002Fmaster\u002Fpublic\u002Fassets\u002Fjs\u002Fabout.js",[199],"JS内容",[45,207,211],{"className":208,"code":209,"filename":210,"language":51,"meta":52},[48],"\u003Cscript setup lang=\"ts\">\nimport Skillinfo from '..\u002Fcomponents\u002Fabout\u002Fskillinfo.vue'\nimport Social from '..\u002Fcomponents\u002Fabout\u002Fsocial.vue'\nimport Technology from '..\u002Fcomponents\u002Fabout\u002Ftechnology.vue'\nimport Author from '..\u002Fcomponents\u002Fabout\u002Fauthor.vue'\nimport Game from '..\u002Fcomponents\u002Fabout\u002Fgame.vue'\nimport Aboutsitetips from '..\u002Fcomponents\u002Fabout\u002Faboutsitetips.vue'\nimport Maxim from '..\u002Fcomponents\u002Fabout\u002Fmaxim.vue'\nimport MyInfoAndSayHello from '..\u002Fcomponents\u002Fabout\u002FmyInfoAndSayHello.vue'\nimport Single from '..\u002Fcomponents\u002Fabout\u002Fsingle.vue'\n\nconst layoutstore = useLayoutstore()\nlayoutstore.setAside(['blog-stats', 'blog-tech', 'blog-log'])\n\n\u002F\u002F 动态加载外部 JS 脚本\n  const loadScript = (url: string, callback?: () => void) => {\n    return new Promise\u003Cvoid>((resolve, reject) => {\n      \u002F\u002F 检查是否已加载\n      if (document.querySelector(`script[src=\"${url}\"]`)) {\n        console.log('JS脚本已加载');\n        resolve();\n        return;\n      }\n\n      \u002F\u002F 创建 script 标签\n      const script = document.createElement('script');\n      script.src = url;\n      script.type = 'text\u002Fjavascript';\n      script.async = true; \u002F\u002F 异步加载（不阻塞页面渲染）\n\n      \u002F\u002F 加载成功回调\n      script.onload = () => {\n        console.log('脚本加载完成');\n        callback?.();\n        resolve();\n      };\n\n      \u002F\u002F 加载失败回调\n      script.onerror = (err) => {\n        console.error('脚本加载失败', err);\n        reject(err);\n      };\n\n      \u002F\u002F 添加到 DOM（推荐添加到 head 或 body 末尾）\n      document.head.appendChild(script);\n    });\n  };\n  \u002F\u002F 使用示例：加载百度统计脚本\n  loadScript('https:\u002F\u002Fwww.myxz.top\u002Fassets\u002Fjs\u002Fabout.js')\n    .then(() => {\n      console.log('友链顶部重要JS加载完毕');\n    })\n    .catch((err) => {\n      console.error('友链顶部重要JS加载完毕', err);\n    });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clink href=\"\u002Fassets\u002Fcss\u002Fabout.css\" rel=\"stylesheet\">\u003C\u002Flink>\n  \u003Cdiv id=\"about-page\" style=\"margin-top: 1rem;margin-left: 1rem;margin-right: 1rem;\">\n    \u003CAuthor \u002F>\n    \u003Cdiv class=\"author-page-content\">\n      \u003Cdiv class=\"author-content\">\n        \u003CMyInfoAndSayHello \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"author-content\">\n        \u003CAboutsitetips \u002F>\n        \u003CMaxim \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"author-content\">\n        \u003C!-- 来自于主流HEO主题的衍生版本 -->\n        \u003CSkillinfo \u002F>\n        \u003C!-- 来自于柳神的关于页面版本 -->\n        \u003CSocial \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"author-content\">\n        \u003CTechnology \u002F>\n        \u003CGame \u002F>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"author-content\">\n        \u003CSingle \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"css\" scoped>\n  \u002F* 1.基础架构 *\u002F\n  #about-page .author-main {\n    display: -webkit-box;\n    display: -moz-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: box;\n    display: flex;\n    -webkit-box-align: center;\n    -moz-box-align: center;\n    -o-box-align: center;\n    -ms-flex-align: center;\n    -webkit-align-items: center;\n    align-items: center;\n    -webkit-box-pack: center;\n    -moz-box-pack: center;\n    -o-box-pack: center;\n    -ms-flex-pack: center;\n    -webkit-justify-content: center;\n    justify-content: center;\n    margin: 0 0 16px 0;\n    user-select: none;\n  }\n  #about-page .author-box {\n    position: relative;\n    width: 189px;\n    height: 189px;\n    background: rgba(253, 253, 253, 0.8);\n    border-radius: 50%;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  #about-page .author-img {\n    margin: auto;\n    border-radius: 50%;\n    overflow: hidden;\n    width: 180px;\n    height: 180px;\n    z-index: 10;\n    background: var(--mj-card-bg);\n  }\n  .author-tag-left {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    margin-right: 30px;\n  }\n  .author-tag-right {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    margin-left: 30px;\n  }\n  \u002F* 2.头像美化 *\u002F\n  #about-page .author-box span {\n    position: absolute;\n    inset: 5px;\n    border-radius: 50%;\n    background: rgba(253, 253, 253, 0.8);\n    z-index: 1;\n  }\n  #about-page .author-box::before {\n    content: '';\n    position: absolute;\n    width: 500px;\n    height: 500px;\n    background-image: conic-gradient(transparent, transparent, transparent, #8758FF);\n    animation: animate 4s linear infinite;\n    animation-delay: -2s;\n  }\n  #about-page .author-box::after {\n    content: '';\n    position: absolute;\n    width: 500px;\n    height: 500px;\n    background-image: conic-gradient(transparent, transparent, transparent, #5CB8E4);\n    animation: animate 4s linear infinite;\n  }\n  \u002F* 3.列表卡片美化 *\u002F\n  .author-tag {\n    transform: translate(0, -4px);\n    padding: 1px 8px;\n    background: var(--heo-card-bg);\n    border: var(--style-border-always);\n    border-radius: 40px;\n    margin-top: 6px;\n    font-size: 14px;\n    font-weight: bold;\n    box-shadow: var(--heo-shadow-lightblack);\n    animation: 6s ease-in-out 0s infinite normal none running floating;\n  }\n  \u002F* 4.列表卡片美化以及动画 *\u002F\n  \u002F* 4.1.左序列 *\u002F\n  .author-tag-left .author-tag:first-child, .author-tag-left .author-tag:last-child {\n    margin-right: -16px;\n  }\n  \u002F* 4.2.右序列 *\u002F\n  .author-tag-right .author-tag:first-child, .author-tag-right .author-tag:last-child {\n    margin-left: -16px;\n  }\n  .author-tag:nth-child(1) {\n    animation-delay: 0s;\n  }\n  .author-tag:nth-child(2) {\n    animation-delay: 0.6s;\n  }\n  .author-tag:nth-child(3) {\n    animation-delay: 1.2s;\n  }\n  .author-tag:nth-child(4) {\n    animation-delay: 1.8s;\n  }\n  \u002F* 5.动画css *\u002F\n  @keyframes floating {\n    0% {\n      transform: translate(0, -4px);\n    }\n    50% {\n      transform: translate(0, 4px);\n    }\n    100% {\n      transform: translate(0, -4px);\n    }\n  }\n  @keyframes animate {\n    0% {\n      transform: rotate(0)\n    }\n    100% {\n      transform: rotate(360deg)\n    }\n  }\n  \u002F* 6.关于本站文字样式美化 *\u002F\n  [data-theme=dark] #about-page .author-title {\n    text-stroke: 1px #bccbe4;\n    -webkit-text-stroke: 1px #bccbe4;\n  }\n  #about-page .author-title {\n    font-size: 2.7rem;\n    font-weight: 700;\n    margin-top: 1px;\n    letter-spacing: 6px;\n    -webkit-background-clip: text;\n    background-image: linear-gradient(90deg, #2ca2b4, #5598de 24%, #7f87ff 45%, #f65aad 85%, #df80b4);\n    background-clip: text;\n    display: inline-block;\n    color: transparent;\n    text-stroke: 2px #3fdaee;\n    -webkit-text-stroke: 1px #3fdaee;\n  }\n\u003C\u002Fstyle>\n","about.vue",[54,212,209],{"__ignoreMap":35},[10,214,215],{"id":215},"添加ts数据",[29,217,219,246],{":tabs":218},"[\"页面ts数据\", \"组件ts数据\"]",[33,220,221,231,237],{"v-slot:tab1":35},[176,222,223,227],{"type":178},[33,224,225],{"v-slot:title":35},[14,226,183],{},[185,228,229],{},[188,230,190],{},[14,232,233,234,236],{},"在",[40,235,42],{},"\u002Fapp\u002F 中添加 about.ts：",[45,238,244],{"className":239,"code":241,"filename":242,"language":243,"meta":68},[240],"language-ts","export interface aboutConnect {\n    author: author[]; \u002F\u002F头像数据\n    large: string; \u002F\u002F标题数据\n    myinfo: myinfo[]; \u002F\u002F个人介绍数据\n    hello: string; \u002F\u002FHello there数据\n    maxim: maxim[]; \u002F\u002F左右铭数据\n    technology: technology[]; \u002F\u002F偏好数据\n    game: game[]; \u002F\u002F游戏数据\n    single: single[]; \u002F\u002F历程数据\n}\n\n\u002F\u002F 头像数据\nexport interface author {\n    left: left[];\n    logo: string;\n    \u002F\u002F box: box[];\n    right: right[];\n}\n\nexport interface left {\n    tag1: string;\n    tag2: string;\n    tag3: string;\n    tag4: string;\n}\n\nexport interface box {\n    logo: string;\n}\n\nexport interface right {\n    tag1: string;\n    tag2: string;\n    tag3: string;\n    tag4: string;\n}\n\n\u002F\u002F个人介绍数据\nexport interface myinfo {\n    title1: string;\n    title2: string;\n    inlineword1: string;\n    title3: string;\n    inlineword2: string;\n    card: card[];\n}\n\nexport interface card {\n    tips: string;\n    conect1: string;\n    conect2: string;\n    inlineword: string;\n    mask: mask[];\n}\n\nexport interface mask {\n    firstTips: string;\n    span: string;\n    up: string;\n    show: string;\n}\n\n\u002F\u002F左右铭数据\nexport interface maxim {\n    tip: string;\n    title1: string;\n    title2: string;\n}\n\n\u002F\u002F偏好数据\nexport interface technology {\n    tip: string;\n    title: string;\n    bottomTip: string;\n}\n\n\u002F\u002F游戏数据\nexport interface game {\n    tip: string;\n    title: string;\n    uid: string;\n    image: string;\n}\n\n\u002F\u002F历程数据\nexport interface single {\n    tip: string;\n    conect1: string;\n    strong1: string;\n    conect2: string;\n    strong2: string;\n    conect3: string\n}\n\nexport const aboutPage: aboutConnect[] = [\n    {\n        author: [\n            {\n                left: [{\n                    tag1: \"💻 Like数码科技\",\n                    tag2: \"🥣 干饭魂 干饭人\",\n                    tag3: \"🕊 咕咕咕咕咕咕~\",\n                    tag4: \"🧱 CV工程师\"\n                }],\n                logo: \"https:\u002F\u002Fblog.myxz.top\u002Fimg\u002Favatar.avif\",\n                right: [{\n                    tag1: \"吃饭不如碎觉 💤\",\n                    tag2: \"乐观 积极 向上 🤝\",\n                    tag3: \"专攻各种困难 🔨\",\n                    tag4: \"人不狠话超多 💢\"\n                }]\n            }\n        ],\n        large: \"关于本站\",\n        myinfo: [{\n            title1: \"你好，很高兴认识你👋\",\n            title2: \"我叫\",\n            inlineword1: \"渊\",\n            title3: \"是一名 前端工程师、学生、\",\n            inlineword2: \"博主\",\n            card: [{\n                tips: \"追求\",\n                conect1: \"源于\",\n                conect2: \"热爱而去\",\n                inlineword: \"感受\",\n                mask: [{\n                    firstTips: \"学习\",\n                    span: \"生活\",\n                    up: \"程序\",\n                    show: \"体验\"\n                }]\n            }]\n        }],\n        hello: \"Main Dis My Blogs\",\n        maxim: [{\n            tip: \"座右铭\",\n            title1: \"生活明朗，\",\n            title2: \"万物可爱。\",\n        }],\n        technology: [{\n            tip: \"关注偏好\",\n            title: \"数码科技\",\n            bottomTip: \"手机、电脑软硬件\"\n        }],\n        game: [{\n            tip: \"爱好游戏\",\n            title: \"暂时未公开\",\n            uid: \"暂时未公开\",\n            image: \"\"\n        }],\n        single: [{\n            tip: \"\",\n            conect1: \"\",\n            strong1: \"\",\n            conect2: \"\",\n            strong2: \"\",\n            conect3: \"\"\n        }]\n    }\n]\n","about.ts","ts",[54,245,241],{"__ignoreMap":35},[33,247,248,253],{"v-slot:tab2":35},[14,249,233,250,252],{},[40,251,42],{},"\u002Fapp\u002F 中添加 creativity.ts：",[45,254,258],{"className":255,"code":256,"filename":257,"language":243,"meta":68},[240],"\u002F\u002F 定义外层分类的类型接口\nexport interface CreativityData {\n  class_name: string;       \u002F\u002F 分类名称\n  subtitle: string;\n  creativity_list: CreativityItem[];  \u002F\u002F 创意项列表\n}\n\n\u002F\u002F 定义最内层创意项的类型接口\nexport interface CreativityItem {\n  name: string;       \u002F\u002F 技术名称\n  color: string;      \u002F\u002F 颜色值（十六进制\u002F关键字）\n  icon: string;       \u002F\u002F 图标 URL 地址\n}\n\n\u002F\u002F 具体数据（与 YAML 结构完全对应）\nexport const creativityData: CreativityData[] = [\n  {\n    class_name: \"开启创造力\",\n    subtitle: '技能',\n    creativity_list: [\n      {\n        name: \"vue\",\n        color: \"#b8f0ae\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fvue.webp\"\n      },\n      {\n        name: \"Java\",\n        color: \"#fff\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002FJava.webp\"\n      },\n      {\n        name: \"Docker\",\n        color: \"#57b6e6\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fdocker.webp\"\n      },\n      {\n        name: \"Webpack\",\n        color: \"#2e3a41\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fwebpack.webp\"\n      },\n      {\n        name: \"Photoshop\",\n        color: \"#4082c3\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002FPS.webp\"\n      },\n      {\n        name: \"Swift\",\n        color: \"#eb6840\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fswift.webp\"\n      },\n      {\n        name: \"Python\",\n        color: \"#fff\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fpython.webp\"\n      },\n      {\n        name: \"Node\",\n        color: \"#333\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fnode-logo.svg\"\n      },\n      {\n        name: \"Git\",\n        color: \"#df5b40\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fgit.webp\"\n      },\n      {\n        name: \"Css\",\n        color: \"#2c51db\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fcss.webp\"\n      },\n      {\n        name: \"Js\",\n        color: \"#f7cb4f\",\n        icon: \"https:\u002F\u002Fcdn.sxiaohe.top\u002Fimg\u002Fbanners\u002Fjs.webp\"\n      }\n    ],\n  },\n];\n","creativity.ts",[54,259,256],{"__ignoreMap":35},{"title":35,"searchDepth":261,"depth":261,"links":262},4,[263,265,266,267,268],{"id":12,"depth":264,"text":12},2,{"id":19,"depth":264,"text":19},{"id":27,"depth":264,"text":27},{"id":169,"depth":264,"text":169},{"id":215,"depth":264,"text":215},[270],"站点魔改","2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。",false,"md","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif",{"slots":277},{},true,"\u002F2025\u002F08\u002Fnuxtaboutpage",null,{"text":282,"minutes":283,"time":284,"words":285},"16 min read",15.92,955200,3184,10,{"title":5,"description":272},{"loc":279},"posts\u002F2025\u002F08\u002FnuxtAboutPage",[291,292,293],"Nuxt","魔改","美化","tech","2025-09-01 20:49:00","2d8YF1Sx6Bs1uPL3EdFbUKrYY6qmNLuZJH4tUcUZ6Zk",[298,314,329,343,357,370,383,395,409,421,432,446,460,464,477,494,508,523,538,553,568,584,601,617,629,643,657,669,683,695,705,717,730,743,754,765,778,787],{"categories":299,"date":301,"description":302,"image":280,"path":303,"readingTime":304,"recommend":280,"tags":309,"title":312,"type":294,"updated":313},[300],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":305,"minutes":306,"time":307,"words":308},"48 min read",47.34,2840400,9468,[310,311,293],"hexo","butterfly","即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":315,"date":316,"description":317,"image":318,"path":319,"readingTime":320,"recommend":325,"tags":326,"title":327,"type":294,"updated":328},[270],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":321,"minutes":322,"time":323,"words":324},"11 min read",10.8,648000,2160,1,[310,311],"友链魔改","2025-04-19 12:09:00",{"categories":330,"date":331,"description":332,"image":333,"path":334,"readingTime":335,"recommend":325,"tags":340,"title":341,"type":294,"updated":342},[270],"2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。","\u002Fimage\u002FPostCover\u002FnavMuogai.avif","\u002F2025\u002F02\u002Fbutterflynavadd",{"text":336,"minutes":337,"time":338,"words":339},"9 min read",8.585,515100,1717,[310,311],"butterfly导航栏修改方案","2025-03-05 10:00:00",{"categories":344,"date":345,"description":346,"image":347,"path":348,"readingTime":349,"recommend":325,"tags":354,"title":355,"type":294,"updated":356},[270],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":350,"minutes":351,"time":352,"words":353},"4 min read",3.31,198600,662,[310,311,293],"轻笑底部美化","2025-02-28 10:00:00",{"categories":358,"date":359,"description":360,"image":361,"path":362,"readingTime":363,"recommend":280,"tags":367,"title":368,"type":294,"updated":369},[270],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":350,"minutes":364,"time":365,"words":366},3.08,184800,616,[310,311],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":371,"date":372,"description":373,"image":374,"path":375,"readingTime":376,"recommend":280,"tags":380,"title":381,"type":294,"updated":382},[270],"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":350,"minutes":377,"time":378,"words":379},3.48,208800,696,[310,311],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":384,"date":372,"description":385,"image":386,"path":387,"readingTime":388,"recommend":280,"tags":393,"title":394,"type":294,"updated":382},[270],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":389,"minutes":390,"time":391,"words":392},"1 min read",0.71,42600,142,[310,311],"轻笑风格背景",{"categories":396,"date":397,"description":398,"image":399,"path":400,"readingTime":401,"recommend":280,"tags":406,"title":407,"type":294,"updated":408},[270],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":402,"minutes":403,"time":404,"words":405},"24 min read",23.275,1396500,4655,[310,311],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":410,"date":372,"description":411,"image":412,"path":413,"readingTime":414,"recommend":280,"tags":419,"title":420,"type":294,"updated":382},[270],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":415,"minutes":416,"time":417,"words":418},"5 min read",4.77,286200,954,[310,311],"卡片美化",{"categories":422,"date":372,"description":423,"image":424,"path":425,"readingTime":426,"recommend":280,"tags":430,"title":431,"type":294,"updated":382},[270],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":389,"minutes":427,"time":428,"words":429},0.345,20700,69,[310,311],"功能美化",{"categories":433,"date":434,"description":435,"image":436,"path":437,"readingTime":438,"recommend":280,"tags":443,"title":444,"type":294,"updated":445},[270],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":439,"minutes":440,"time":441,"words":442},"6 min read",5.595,335700,1119,[310,311,293],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":447,"date":448,"description":449,"image":450,"path":451,"readingTime":452,"recommend":456,"tags":457,"title":458,"type":294,"updated":459},[270],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":336,"minutes":453,"time":454,"words":455},8.88,532800,1776,11,[291,292,293],"在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":461,"date":271,"description":272,"image":275,"path":279,"readingTime":462,"recommend":286,"tags":463,"title":5,"type":294,"updated":295},[270],{"text":282,"minutes":283,"time":284,"words":285},[291,292,293],{"categories":465,"date":466,"description":467,"image":468,"path":469,"readingTime":470,"recommend":474,"tags":475,"title":476,"type":294,"updated":295},[270],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":415,"minutes":471,"time":472,"words":473},4.38,262800,876,9,[291,292,293],"添加站点详情页面",{"categories":478,"date":480,"description":481,"image":482,"path":483,"readingTime":484,"recommend":280,"tags":488,"title":491,"type":492,"updated":493},[479],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":350,"minutes":485,"time":486,"words":487},3.855,231300,771,[489,490],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":495,"date":496,"description":497,"image":498,"path":499,"readingTime":500,"recommend":474,"tags":505,"title":506,"type":294,"updated":507},[270],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":501,"minutes":502,"time":503,"words":504},"23 min read",22.175,1330500,4435,[291,292,293],"添加追更历史","2025-12-01 20:49:00",{"categories":509,"date":510,"description":511,"image":512,"path":513,"readingTime":514,"recommend":519,"tags":520,"title":521,"type":294,"updated":522},[270],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":515,"minutes":516,"time":517,"words":518},"32 min read",31.72,1903200,6344,8,[291,292,293],"评论优化","2026-03-01 20:49:00",{"categories":524,"date":525,"description":526,"image":527,"path":528,"readingTime":529,"recommend":534,"tags":535,"title":536,"type":294,"updated":537},[270],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":530,"minutes":531,"time":532,"words":533},"8 min read",7.28,436800,1456,7,[291,292,293],"添加装备页面","2025-12-03 20:49:09",{"categories":539,"date":540,"description":541,"image":542,"path":543,"readingTime":544,"recommend":549,"tags":550,"title":551,"type":294,"updated":552},[270],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":545,"minutes":546,"time":547,"words":548},"12 min read",11.165,669900,2233,6,[291,292,293],"文章美化","2025-12-09 20:49:00",{"categories":554,"date":555,"description":556,"image":557,"path":558,"readingTime":559,"recommend":564,"tags":565,"title":566,"type":294,"updated":567},[270],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":560,"minutes":561,"time":562,"words":563},"10 min read",9.745,584700,1949,5,[291,292,293],"侧边组件美化","2025-12-04 20:49:00",{"categories":569,"date":570,"description":571,"image":572,"path":573,"readingTime":574,"recommend":280,"tags":579,"title":582,"type":294,"updated":583},[270],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":575,"minutes":576,"time":577,"words":578},"14 min read",13.155,789300,2631,[580,581],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":585,"date":586,"description":587,"image":588,"path":589,"readingTime":590,"recommend":280,"tags":595,"title":599,"type":294,"updated":600},[300],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":591,"minutes":592,"time":593,"words":594},"3 min read",2.72,163200,544,[596,597,598],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":602,"date":603,"description":604,"image":605,"path":606,"readingTime":607,"recommend":280,"tags":612,"title":615,"type":294,"updated":616},[300],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":608,"minutes":609,"time":610,"words":611},"7 min read",6.86,411600,1372,[613,614],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":618,"date":619,"description":556,"image":620,"path":621,"readingTime":622,"recommend":261,"tags":626,"title":627,"type":294,"updated":628},[270],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":591,"minutes":623,"time":624,"words":625},2.15,129000,430,[291,292,293],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":630,"date":631,"description":632,"image":633,"path":634,"readingTime":635,"recommend":280,"tags":640,"title":641,"type":492,"updated":642},[270],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":636,"minutes":637,"time":638,"words":639},"2 min read",1.82,109200,364,[291,292,293],"站点资源优化","2026-01-07 20:49:00",{"categories":644,"date":646,"description":647,"image":648,"path":649,"readingTime":650,"recommend":280,"tags":654,"title":655,"type":294,"updated":656},[645],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":282,"minutes":651,"time":652,"words":653},15.545,932700,3109,[291,292,293],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":658,"date":659,"description":660,"image":648,"path":661,"readingTime":662,"recommend":280,"tags":666,"title":667,"type":294,"updated":668},[645],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":575,"minutes":663,"time":664,"words":665},13.965,837900,2793,[291,292,293],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":670,"date":671,"description":672,"image":673,"path":674,"readingTime":675,"recommend":325,"tags":680,"title":681,"type":294,"updated":682},[270],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":676,"minutes":677,"time":678,"words":679},"100 min read",99.23,5953800,19846,[291,292,293],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":684,"date":685,"description":647,"image":686,"path":687,"readingTime":688,"recommend":280,"tags":692,"title":693,"type":294,"updated":694},[300],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":336,"minutes":689,"time":690,"words":691},8.91,534600,1782,[291,292,293],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":696,"date":685,"description":647,"image":697,"path":698,"readingTime":699,"recommend":280,"tags":703,"title":704,"type":294,"updated":694},[270],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":591,"minutes":700,"time":701,"words":702},2.47,148200,494,[291,292,293],"【精简】测试老MAC性能",{"categories":706,"date":707,"description":647,"image":708,"path":709,"readingTime":710,"recommend":280,"tags":714,"title":715,"type":294,"updated":716},[270],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":336,"minutes":711,"time":712,"words":713},8.19,491400,1638,[291,292,293],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":718,"date":719,"description":647,"image":720,"path":721,"readingTime":722,"recommend":726,"tags":727,"title":728,"type":294,"updated":729},[270],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":350,"minutes":723,"time":724,"words":725},3.235,194100,647,3,[291,292,293],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":731,"date":732,"description":647,"image":720,"path":733,"readingTime":734,"recommend":264,"tags":739,"title":741,"type":294,"updated":742},[270],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":735,"minutes":736,"time":737,"words":738},"18 min read",17.265,1035900,3453,[291,740],"页面","游戏展示页面","2026-03-22 10:00:00",{"categories":744,"date":745,"description":647,"image":720,"path":746,"readingTime":747,"recommend":325,"tags":751,"title":752,"type":294,"updated":753},[270],"2026-04-11 14:00:00","\u002F2026\u002F04\u002Fessaynuxtpage",{"text":439,"minutes":748,"time":749,"words":750},5.93,355800,1186,[291,740],"说说页面（Nuxt版本）","2026-04-11 22:00:00",{"categories":755,"date":756,"description":647,"image":720,"path":757,"readingTime":758,"recommend":325,"tags":762,"title":763,"type":294,"updated":764},[270],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fhotnuxtpage",{"text":336,"minutes":759,"time":760,"words":761},8.985,539100,1797,[291,740],"热搜页面（Nuxt版本）","2026-04-13 22:00:00",{"categories":766,"date":768,"description":481,"image":769,"path":770,"readingTime":771,"recommend":280,"tags":775,"title":776,"type":492,"updated":777},[767],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":636,"minutes":772,"time":773,"words":774},1.31,78600,262,[489,490],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":779,"date":768,"description":481,"image":769,"path":780,"readingTime":781,"recommend":280,"tags":785,"title":786,"type":492,"updated":777},[767],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":608,"minutes":782,"time":783,"words":784},6.295,377700,1259,[489,490],"世界志：仙神界",{"categories":788,"date":768,"description":481,"image":769,"path":789,"readingTime":790,"recommend":280,"tags":794,"title":795,"type":492,"updated":777},[767],"\u002Fnovel\u002Fworld\u002Fdh",{"text":636,"minutes":791,"time":792,"words":793},1.65,99000,330,[489,490],"世界志：大荒",[797,799],{"title":458,"path":451,"stem":798,"date":448,"type":294,"children":-1},"posts\u002F2025\u002F08\u002FlinkTop",{"title":476,"path":469,"stem":800,"date":466,"type":294,"children":-1},"posts\u002F2025\u002F09\u002FsitelinkPageAdd",1776745734565]