[{"data":1,"prerenderedAt":644},["ShallowReactive",2],{"\u002F2025\u002F02\u002Fbutterflynavadd":3,"index_posts":139,"surround-\u002F2025\u002F02\u002Fbutterflynavadd":639},{"id":4,"title":5,"body":6,"categories":112,"date":114,"description":115,"draft":116,"extension":117,"image":118,"meta":119,"navigation":121,"path":122,"permalink":123,"published":123,"readingTime":124,"recommend":129,"references":123,"seo":130,"sitemap":131,"stem":132,"subtitle":123,"tags":133,"type":136,"updated":137,"__hash__":138},"content\u002Fposts\u002F2025\u002F02\u002FbutterflyNavAdd.md","butterfly导航栏修改方案",{"type":7,"value":8,"toc":104},"minimark",[9,14,18,22,30,35,46,49,54,65,73,80,86,90,97,101],[10,11,13],"h2",{"id":12},"一前言","一.前言",[15,16,17],"p",{},"由于我想要修改一下导航栏，对一些功能进行优化，所以有了这篇文章，那么就来修改吧",[10,19,21],{"id":20},"二教程开始","二.教程开始",[15,23,24,25,29],{},"因为我们要先对导航栏修改为居中，把搜索以及其他功能分离到右侧，增加导航其他网站的区域，并且对魔改内容的一部分按钮进行兼容，",[26,27,28],"strong",{},"剔除返回内容","，防止不兼容\n那么就是以下整个文件内容了",[15,31,32],{},[26,33,34],{},"主体内容修改",[36,37,43],"pre",{"className":38,"code":40,"language":41,"meta":42},[39],"language-pug","- const { darkmode } = theme\nnav#nav\n  span#blog_name\n    .back-home-button(tabindex='-1')\n      i.back-home-button-icon.fas.fa-grip-vertical\n      .back-menu-list-groups\n        .back-menu-list-group\n          .back-menu-list-title 网页\n          .back-menu-list\n            a.back-menu-item(href='\u002F', title='前往博客主页', target='_blank', one-link-mark='yes')\n              img.back-menu-item-icon(src='\u002Fimg\u002Favatar.jpg')\n              span.back-menu-item-text 博客\n            a.back-menu-item(href='https:\u002F\u002Fwww.cloud.anheyu.com\u002F', rel='external nofollow', title='前往云盘主页', target='_blank', one-link-mark='yes')\n              img.back-menu-item-icon(src='https:\u002F\u002Fnpm.elemecdn.com\u002Fanzhiyu-blog-static@1.0.4\u002Fimg\u002Favatar.jpg')\n              span.back-menu-item-text 云盘主页\n\n    a#site-name(href=url_for('\u002F'))\n      .title #[=config.title]\n      i.fa-solid.fa-house\n\n  #menus\n    if (theme.algolia_search.enable || theme.local_search.enable)\n      div.nav-button#search-button\n        a.site-page.social-icon.search\n          i.fas.fa-search.fa-fw\n          span=' '+_p('search.title')\n\n      div.nav-button#search-button\n        a.nav-rightbutton.site-page.darkmode_switchbutton(onclick=\"switchDarkMode()\")\n          i.fas.fa-adjust\n\n    div.nav-button#nav-totop\n      a.totopbtn\n        i.fas.fa-arrow-up\n        span#percent(onclick=\"btf.scrollToDest(0,500)\") 0\n\n\n    !=partial('includes\u002Fheader\u002Fmenu_item', {}, {cache: true})\n\n    #toggle-menu\n      a.site-page\n        i.fas.fa-bars.fa-fw\n","pug","",[44,45,40],"code",{"__ignoreMap":42},[15,47,48],{},"那么如果先要修改左侧的导航内容，只需要把9到15行内容修改即可\ncss也是进行一部分的魔改，去除一部分的颜色和样式更新以支持部分内容",[15,50,51],{},[26,52,53],{},"css内容",[15,55,56,57,60,61,64],{},"第一个:",[26,58,59],{},"菜单主体样式","，放到自定义css内容，也可以在主题内搞一个文件夹来存放",[26,62,63],{},"不太建议","，如果想要以后会发布并引用到整套魔改文章中。",[36,66,71],{"className":67,"code":69,"language":70,"meta":42},[68],"language-CSS","#nav a:hover {\n  background: var(--anzhiyu-main);\n  transition: 0.3s;\n}\n\n#nav-totop:hover .totopbtn i {\n  opacity: 1;\n}\n#nav-totop #percent {\n  font-size: 12px;\n  background: var(--anzhiyu-white);\n  color: var(--anzhiyu-main);\n  width: 25px;\n  height: 25px;\n  border-radius: 35px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: 0.3s;\n}\n.nav-fixed #nav-totop #percent,\n.page #nav-totop #percent {\n  background: var(--font-color);\n  color: var(--card-bg);\n  font-size: 13px;\n}\n\n#nav-totop {\n  width: 35px;\n}\n#page-header:not(.is-top-bar) #percent {\n  transition: 0.3s;\n}\n#page-header:not(.is-top-bar) #nav-totop {\n  width: 0;\n  opacity: 0;\n  transition: width 0.3s, opacity 0.2s;\n  margin-left: 0 !important;\n}\n#nav-totop #percent {\n  font-weight: 700;\n}\n#nav-totop:hover #percent {\n  opacity: 0;\n  transform: scale(1.5);\n  font-weight: 700;\n}\n#page-header #nav #nav-right div {\n  margin-left: 0.5rem;\n  padding: 0;\n}\n\n#nav-totop {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: 0.3s;\n}\n.nav-button {\n  cursor: pointer;\n}\ndiv#menus {\n  display: flex;\n  align-items: center;\n}\n#page-header #nav .nav-button a {\n  height: 35px;\n  width: 35px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n#nav .site-page {\n  padding-bottom: 0px;\n}\n#nav *::after {\n  background-color: transparent !important;\n}\n\n\u002F* 顶栏修改 *\u002F\n#nav .menus_items .menus_item .menus_item_child li a {\n  padding: 2px 16px;\n}\n#nav .menus_items .menus_item .menus_item_child li:hover a {\n  color: white !important;\n}\n\n#nav .menus_items .menus_item .menus_item_child li {\n  margin: 6px;\n  border-radius: 5px;\n  transition: all 0.3s;\n  display: inline-block;\n  margin: 0 3px;\n}\n#nav .menus_items .menus_item .menus_item_child:before {\n  top: -19px;\n}\n#site-name,\n.shuoshuo {\n  white-space: nowrap;\n  overflow: hidden;\n}\n#site-name {\n  padding: 0 8px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: 0.3s;\n}\n\n#blog_name #site-name i {\n  opacity: 0;\n  position: absolute;\n}\n\n#blog_name #site-name:hover .title {\n  opacity: 0;\n}\n\n#blog_name #site-name:hover i {\n  opacity: 1;\n  transform: scale(1.01);\n  color: white;\n}\n\u002F* 圆角隐藏 *\u002F\nul.menus_item_child {\n  border-radius: 5px;\n}\n\n\u002F* 一级菜单居中 *\u002F\n#nav .menus_items {\n  position: absolute;\n  width: fit-content;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: 60px;\n}\n\n#nav .menus_items .menus_item:hover .menus_item_child {\n  display: block;\n  transform: translateX(-50%);\n  right: auto;\n  left: auto !important;\n  padding: 6px 4px;\n  box-sizing: content-box;\n  line-height: 35px;\n}\n#nav .menus_items .menus_item:hover {\n  padding: 0 5px 27px 5px !important;\n  margin-bottom: -14.5px !important;\n}\n\n#nav .menus_items .menus_item .menus_item_child {\n  top: 44px;\n}\n\n@media screen and (min-width: 768px) {\n  .page .menus_item:hover > a.site-page {\n    color: var(--anzhiyu-white) !important;\n    background: var(--anzhiyu-main);\n    transition: 0.3s;\n    box-shadow: var(--anzhiyu-shadow-main);\n  }\n}\n\n.nav-fixed #nav {\n  transform: translateY(58px) !important;\n}\n#nav {\n  padding: 0 calc((100% - 1420px) \u002F 2);\n}\n\n#nav a {\n  border-radius: 8px;\n  color: var(--font-color);\n}\n.page #nav a:hover {\n  color: var(--anzhiyu-white) !important;\n  background: var(--anzhiyu-main);\n  transition: 0.3s;\n  box-shadow: var(--anzhiyu-shadow-main);\n}\n\n#menus > div.menus_items > div > a {\n  letter-spacing: 0.3rem;\n  font-weight: 700;\n  padding: 0em 0.3em 0em 0.5em;\n  height: 35px;\n  line-height: 35px;\n}\n#nav .menus_items .menus_item {\n  padding: 0 5px;\n  display: flex;\n  flex-direction: column;\n  margin: auto;\n  align-items: center;\n}\n\n#nav div#toggle-menu {\n  padding: 2px 0 4px 6px;\n}\n\n#nav-totop .totopbtn i {\n  position: absolute;\n  display: flex;\n  opacity: 0;\n}\n#page-name::before {\n  font-size: 18px;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  color: white !important;\n  top: 0;\n  left: 0;\n  content: \"回到顶部\";\n  background-color: var(--anzhiyu-theme);\n  transition: all 0.3s;\n  -webkit-transition: all 0.3s;\n  -moz-transition: all 0.3s;\n  -ms-transition: all 0.3s;\n  -o-transition: all 0.3s;\n  opacity: 0;\n  box-shadow: 0 0 3px var(--anzhiyu-theme);\n  line-height: 45px; \u002F*如果垂直位置不居中可以微调此值，也可以删了*\u002F\n}\n#page-name:hover:before {\n  opacity: 1;\n}\n#name-container {\n  transition: all 0.3s;\n  -webkit-transition: all 0.3s;\n  -moz-transition: all 0.3s;\n  -ms-transition: all 0.3s;\n  -o-transition: all 0.3s;\n}\n#name-container:hover {\n  transform: translateX(-50%) scale(1.03);\n}\n#page-name {\n  position: relative;\n  padding: 10px 30px;\n  -webkit-animation-timing-function: ease-out;\n}\n\ncenter#name-container {\n  position: absolute;\n  width: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  font-family: \"ZhuZiAYuanJWD\";\n}\n.nav-fixed.nav-visible #name-container {\n  transition: 0.3s;\n  transform: translate(-50%, 60px);\n}\n.nav-fixed.nav-visible #menus .menus_items {\n  transform: translate(-50%);\n  transition: 0.3s;\n  line-height: 60px;\n}\n.nav-fixed #name-container {\n  top: 15%;\n  transition: 0.3s;\n}\n#name-container {\n  bottom: 60px;\n}\n\n.mask-name-container {\n  max-width: 1200px;\n  width: 50%;\n  height: 100%;\n  position: absolute;\n  overflow: hidden;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media screen and (max-width: 992px) {\n  .mask-name-container {\n    width: 65%;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .mask-name-container {\n    display: none;\n  }\n}\n#sidebar #sidebar-menus .menus_items .site-page:hover {\n  color: var(--anzhiyu-white);\n  border-radius: var(--anzhiyu-border-radius);\n}\n#nav .menus_items .menus_item > a > i:last-child {\n  display: none;\n}\n#nav #search-button {\n  font-size: 1.3em;\n}\n\n@media screen and (min-width: 900px) {\n  #nav .back-home-button:hover {\n    box-shadow: var(--anzhiyu-shadow-main);\n  }\n}\n\n.back-home-button:hover {\n  background: var(--anzhiyu-main);\n  color: var(--anzhiyu-white) !important;\n}\n.back-home-button {\n  display: flex;\n  width: 35px;\n  height: 35px;\n  align-items: center;\n  justify-content: center;\n  font-size: 120%;\n  margin-top: 1.1px;\n  margin-right: .5rem;\n  transition: .2s;\n  border-radius: 8px;\n  padding: 0 !important;\n}\n\n.back-home-button:hover .back-menu-list-groups {\n  display: flex;\n  opacity: 1;\n  transition: 0.3s;\n  top: 55px;\n  pointer-events: auto;\n  left: 0;\n}\n.back-home-button .back-menu-list-groups {\n  position: absolute;\n  top: 65px;\n  left: 0;\n  background: var(--anzhiyu-card-bg);\n  border-radius: 12px;\n  border: var(--style-border);\n  flex-direction: column;\n  font-size: 12px;\n  color: var(--anzhiyu-secondtext);\n  box-shadow: var(--anzhiyu-shadow-border);\n  transition: 0s;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.back-home-button .back-menu-list-group {\n  display: flex;\n  flex-direction: column;\n}\n.back-home-button .back-menu-list-group .back-menu-list-title {\n  margin: 8px 0 0 16px;\n  transition: 0.3s;\n}\n.back-home-button .back-menu-list {\n  display: flex;\n  flex-direction: column;\n}\n.back-home-button .back-menu-list::before {\n  position: absolute;\n  top: -22px;\n  left: 0px;\n  width: 100%;\n  height: 25px;\n  content: \"\";\n}\n\n.back-home-button .back-menu-list-group:hover .back-menu-list-title {\n  color: var(--anzhiyu-main);\n}\n.back-home-button .back-menu-list-groups:hover {\n  border: var(--style-border-hover);\n}\n.back-home-button .back-menu-list .back-menu-item {\n  display: flex;\n  align-items: center;\n  margin: 4px 8px;\n  padding: 4px 8px !important;\n  transition: 0.3s;\n  border-radius: 8px;\n}\n.back-home-button .back-menu-list .back-menu-item .back-menu-item-text {\n  font-size: var(--global-font-size);\n  margin-left: 0.5rem;\n  color: var(--anzhiyu-fontcolor);\n  white-space: nowrap;\n}\n#nav #blog_name {\n  flex-wrap: nowrap;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  \u002F* z-index: 102; *\u002F\n  transition: 0.3s;\n}\n.back-home-button .back-menu-list .back-menu-item .back-menu-item-icon {\n  width: 24px;\n  height: 24px;\n  border-radius: 24px;\n  background: var(--anzhiyu-secondbg);\n}\n#page-header #nav .back-home-button {\n  cursor: pointer;\n  position: relative;\n}\n\n@media screen and (min-width: 1300px) {\n  #nav a:hover {\n    transform: scale(1.03);\n  }\n}\n.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text {\n  color: var(--anzhiyu-white);\n}\n.back-menu-item-icon.loading img {\n  width: 25px;\n}\n\n#page-header #nav #menus .nav-button.long a.totopbtn,\n#page-header #nav #menus .nav-button.long,\n#page-header #nav #menus .nav-button.long a.totopbtn span {\n  width: 70px;\n}\n#page-header #nav #menus .nav-button.long a.totopbtn span {\n  border-radius: 35px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: 0.3s;\n  white-space: nowrap;\n}\n\n#page-header #nav #menus .nav-button.long a.totopbtn:hover {\n  border-radius: 35px;\n  height: 30px;\n}\n\n#nav #search-button {\n  padding-left: 0;\n}\n#page-header #nav .nav-button {\n  margin-left: 0.5rem;\n  padding: 0;\n}\n#page-header:not(.is-top-bar) #nav-totop a {\n  display: none;\n}\n#search-button a.site-page.social-icon.search span {\n  display: none;\n}\n","CSS",[44,72,69],{"__ignoreMap":42},[15,74,75,76,79],{},"第二个:",[26,77,78],{},"整体的颜色样式表","，还是那句话不建议放在主题内，除非有解决这个问题的方式，否则放到自定义文件",[36,81,84],{"className":82,"code":83,"language":70,"meta":42},[68],"\u002F* 颜色 *\u002F\n:root {\n    --anzhiyu-theme-op: #4259ef23;\n    --anzhiyu-white: #fff;\n    --anzhiyu-black: #000;\n    --anzhiyu-none: rgba(0, 0, 0, 0);\n    --anzhiyu-gray: #999999;\n    --anzhiyu-yellow: #ffc93e;\n    --anzhiyu-border-radius: 8px;\n    --anzhiyu-main: var(--anzhiyu-theme);\n    --anzhiyu-main-op: var(--anzhiyu-theme-op);\n    --anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);\n    --anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);\n    --anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);\n    --anzhiyu-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);\n    --anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);\n    --anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);\n    --anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;\n    --anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;\n    --anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;\n    --anzhiyu-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);\n    --style-border: 1px solid var(--anzhiyu-card-border);\n    --anzhiyu-blue-main: #3b70fc;\n    --style-border-hover: 1px solid var(--anzhiyu-main);\n    --style-border-dashed: 1px dashed var(--anzhiyu-theme-op);\n    --style-border-avatar: 4px solid var(--anzhiyu-background);\n    --style-border-always: 1px solid var(--anzhiyu-card-border);\n    --anzhiyu-white-acrylic1: #fefeff !important;\n    --anzhiyu-white-acrylic2: #fcfdff !important;\n    --anzhiyu-black-acrylic2: #08080a !important;\n    --anzhiyu-black-acrylic1: #0b0b0e !important;\n  }\n  \n  [data-theme=\"light\"] {\n    --anzhiyu-theme: #3b70fc;\n    --anzhiyu-theme-op: #4259ef23;\n    --anzhiyu-blue: #3b70fc;\n    --anzhiyu-red: #d8213c;\n    --anzhiyu-pink: #ff7c7c;\n    --anzhiyu-green: #57bd6a;\n    --anzhiyu-fontcolor: #363636;\n    --anzhiyu-background: #f7f9fe;\n    --anzhiyu-reverse: #000;\n    --anzhiyu-maskbg: rgba(255, 255, 255, 0.6);\n    --anzhiyu-maskbgdeep: rgba(255, 255, 255, 0.85);\n    --anzhiyu-hovertext: var(--anzhiyu-theme);\n    --anzhiyu-ahoverbg: #f7f7fa;\n    --anzhiyu-lighttext: var(--anzhiyu-main);\n    --anzhiyu-secondtext: rgba(60, 60, 67, 0.6);\n    --anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);\n    --anzhiyu-card-btn-bg: #edf0f7;\n    --anzhiyu-post-blockquote-bg: #fafcff;\n    --anzhiyu-post-tabs-bg: #f2f5f8;\n    --anzhiyu-secondbg: #edf0f7;\n    --anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);\n    --anzhiyu-card-bg: #fff;\n    --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);\n    --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);\n    --anzhiyu-card-border: #c0c6d8;\n  }\n  \n  [data-theme=\"dark\"] {\n    --anzhiyu-theme: #0084ff;\n    --anzhiyu-theme-op: #0084ff23;\n    --anzhiyu-blue: #0084ff;\n    --anzhiyu-red: #ff3842;\n    --anzhiyu-pink: #ff7c7c;\n    --anzhiyu-green: #57bd6a;\n    --anzhiyu-fontcolor: #f7f7fa;\n    --anzhiyu-background: #18171d;\n    --anzhiyu-reverse: #fff;\n    --anzhiyu-maskbg: rgba(0, 0, 0, 0.6);\n    --anzhiyu-maskbgdeep: rgba(0, 0, 0, 0.85);\n    --anzhiyu-hovertext: #0a84ff;\n    --anzhiyu-ahoverbg: #fff;\n    --anzhiyu-lighttext: #f2b94b;\n    --anzhiyu-secondtext: #a1a2b8;\n    --anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);\n    --anzhiyu-card-btn-bg: #30343f;\n    --anzhiyu-post-blockquote-bg: #000;\n    --anzhiyu-post-tabs-bg: #121212;\n    --anzhiyu-secondbg: #30343f;\n    --anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);\n    --anzhiyu-card-bg: #1d1b26;\n    --anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);\n    --anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);\n    --anzhiyu-card-border: #42444a;\n  }\n",[44,85,83],{"__ignoreMap":42},[10,87,89],{"id":88},"三原教程","三.原教程",[91,92],"link-card",{"description":93,"icon":94,"link":95,"title":96},"安知鱼","https:\u002F\u002Fblog.anheyu.com\u002Fposts\u002Fe62b.html","#link-card","butterfly魔改关于页面",[10,98,100],{"id":99},"四声明","四.声明",[15,102,103],{},"我这篇文章主要是用于自己的美化。",{"title":42,"searchDepth":105,"depth":105,"links":106},4,[107,109,110,111],{"id":12,"depth":108,"text":13},2,{"id":20,"depth":108,"text":21},{"id":88,"depth":108,"text":89},{"id":99,"depth":108,"text":100},[113],"站点魔改","2025-02-05 09:00:00","这篇文章讲述在博客中对导航栏进行修改，并添加多个产品页面地址，且采用安知鱼的导航栏CSS样式表。",false,"md","\u002Fimage\u002FPostCover\u002FnavMuogai.avif",{"top_img":116,"slots":120},{},true,"\u002F2025\u002F02\u002Fbutterflynavadd",null,{"text":125,"minutes":126,"time":127,"words":128},"9 min read",8.585,515100,1717,1,{"title":5,"description":115},{"loc":122},"posts\u002F2025\u002F02\u002FbutterflyNavAdd",[134,135],"hexo","butterfly","tech","2025-03-05 10:00:00","TBqVLtNSp76qCDjNkcpplAx6vp9tJSgX-04WIruoKCg",[140,155,169,173,187,200,213,225,239,251,262,276,292,307,320,337,351,366,381,396,411,427,444,460,472,486,500,512,526,538,548,560,573,586,597,608,621,630],{"categories":141,"date":143,"description":144,"image":123,"path":145,"readingTime":146,"recommend":123,"tags":151,"title":153,"type":136,"updated":154},[142],"技术探索","2023-12-06 12:45:00","本篇转载三种不同方案（已经放好原文章链接）","\u002F2023\u002F03\u002Fessaythree",{"text":147,"minutes":148,"time":149,"words":150},"48 min read",47.34,2840400,9468,[134,135,152],"美化","即刻短文的三种部署方案","2023-12-07 14:09:00",{"categories":156,"date":157,"description":158,"image":159,"path":160,"readingTime":161,"recommend":129,"tags":166,"title":167,"type":136,"updated":168},[113],"2024-04-19 10:00:00","友链页面美化以及添加功能","\u002Fimage\u002FPostCover\u002FflinkPage.avif","\u002F2024\u002F04\u002Fflinkpagemeihua",{"text":162,"minutes":163,"time":164,"words":165},"11 min read",10.8,648000,2160,[134,135],"友链魔改","2025-04-19 12:09:00",{"categories":170,"date":114,"description":115,"image":118,"path":122,"readingTime":171,"recommend":129,"tags":172,"title":5,"type":136,"updated":137},[113],{"text":125,"minutes":126,"time":127,"words":128},[134,135],{"categories":174,"date":175,"description":176,"image":177,"path":178,"readingTime":179,"recommend":129,"tags":184,"title":185,"type":136,"updated":186},[113],"2025-02-27 10:10:55","本篇文章讲述了如何在博客的底部模块进行魔改添加图标、来源图片、返回顶部以及建站时间，对建站时间进行js内联到模块中。","\u002Fimage\u002FPostCover\u002FfooterMeihua.avif","\u002F2025\u002F02\u002Ffooterqcqxstyle",{"text":180,"minutes":181,"time":182,"words":183},"4 min read",3.31,198600,662,[134,135,152],"轻笑底部美化","2025-02-28 10:00:00",{"categories":188,"date":189,"description":190,"image":191,"path":192,"readingTime":193,"recommend":123,"tags":197,"title":198,"type":136,"updated":199},[113],"2025-03-24 08:00:09","这篇简述如何给自己博客中的归档、分类、标签页三个页面的文章卡片加上所属分类和标签，并说明了具体的实践环境，以最大限度的方式进行CSS美化。但也请注意要经常备份以免出现大量错误。","\u002Fimage\u002FPostCover\u002FarchiveMougai.avif","\u002F2025\u002F03\u002Farchivemougai",{"text":180,"minutes":194,"time":195,"words":196},3.08,184800,616,[134,135],"给页面加上所属分类和标签以及美化","2025-03-24 10:56:09",{"categories":201,"date":202,"description":203,"image":204,"path":205,"readingTime":206,"recommend":123,"tags":210,"title":211,"type":136,"updated":212},[113],"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":180,"minutes":207,"time":208,"words":209},3.48,208800,696,[134,135],"美化文章卡片显示数字","2025-03-06 18:00:00",{"categories":214,"date":202,"description":215,"image":216,"path":217,"readingTime":218,"recommend":123,"tags":223,"title":224,"type":136,"updated":212},[113],"这篇文章讲述如何在页面中添加模块以及使用CSS添加颜色以及背景图片。","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fimg\u002Fdefault_cover_21.avif","\u002F2025\u002F03\u002Fbackgroud-qcqx",{"text":219,"minutes":220,"time":221,"words":222},"1 min read",0.71,42600,142,[134,135],"轻笑风格背景",{"categories":226,"date":227,"description":228,"image":229,"path":230,"readingTime":231,"recommend":123,"tags":236,"title":237,"type":136,"updated":238},[113],"2025-03-24 09:00:00","本文章以安知鱼的页面文件为模版进行大幅度修改，仿轻笑的关于页面的模块摆放以及调整CSS样式来进行细致魔改。","\u002Fimage\u002FPostCover\u002FbtfAboutPage.avif","\u002F2025\u002F03\u002Fbtfaboutpage",{"text":232,"minutes":233,"time":234,"words":235},"24 min read",23.275,1396500,4655,[134,135],"关于页面(butterfly)","2025-03-25 11:20:00",{"categories":240,"date":202,"description":241,"image":242,"path":243,"readingTime":244,"recommend":123,"tags":249,"title":250,"type":136,"updated":212},[113],"这篇文章讲述了如何美化博客侧边栏，并调整各个卡片内容的样式表。","\u002Fimage\u002FPostCover\u002FcardMeihua.avif","\u002F2025\u002F03\u002Fcardmeihua",{"text":245,"minutes":246,"time":247,"words":248},"5 min read",4.77,286200,954,[134,135],"卡片美化",{"categories":252,"date":202,"description":253,"image":254,"path":255,"readingTime":256,"recommend":123,"tags":260,"title":261,"type":136,"updated":212},[113],"从零开始魔改butterfly","\u002Fimage\u002FPostCover\u002FfunctionMeihua.avif","\u002F2025\u002F03\u002Ffunctionmeihua",{"text":219,"minutes":257,"time":258,"words":259},0.345,20700,69,[134,135],"功能美化",{"categories":263,"date":264,"description":265,"image":266,"path":267,"readingTime":268,"recommend":123,"tags":273,"title":274,"type":136,"updated":275},[113],"2025-03-01 10:00:00","本文依照轻笑的部分内容，参考首页banner写法以及对首页banner添加鼠标滚动以及移动端滑动，通过CSS样式进行美化整个首页banner，此篇文章重点讲述了如何解决轻笑给的js内容在首页会出现不断加载的问题。","\u002Fimage\u002FPostCover\u002FrandomPost.avif","\u002F2025\u002F03\u002Frandompost",{"text":269,"minutes":270,"time":271,"words":272},"6 min read",5.595,335700,1119,[134,135,152],"Banner随机文章展示(轻笑同款)","2025-03-05 12:09:00",{"categories":277,"date":278,"description":279,"image":280,"path":281,"readingTime":282,"recommend":286,"tags":287,"title":290,"type":136,"updated":291},[113],"2025-08-11 10:00:00","本篇文章讲述了添加模块代码并在博客的友情链接中添加模块，且使用css美化","\u002Fimage\u002FPostCover\u002FlinkTop.avif","\u002F2025\u002F08\u002Flinktop",{"text":125,"minutes":283,"time":284,"words":285},8.88,532800,1776,11,[288,289,152],"Nuxt","魔改","在友链页面添加滚动头像banner","2025-08-11 20:49:00",{"categories":293,"date":294,"description":295,"image":296,"path":297,"readingTime":298,"recommend":303,"tags":304,"title":305,"type":136,"updated":306},[113],"2025-08-22 10:00:00","近期将博客迁移至Nuxt框架时，重新搭建了「关于页面」。过程中添加了技能展示组件（skillinfo.vue），实现标签分组渲染；新建about.vue页面，整合个人信息、技能、偏好等多模块内容，并通过ts定义数据接口（about.ts\u002Fcreativity.ts）。","\u002Fimage\u002FPostCover\u002FnuxtAboutPage.avif","\u002F2025\u002F08\u002Fnuxtaboutpage",{"text":299,"minutes":300,"time":301,"words":302},"16 min read",15.92,955200,3184,10,[288,289,152],"关于页面(Nuxt)","2025-09-01 20:49:00",{"categories":308,"date":309,"description":310,"image":311,"path":312,"readingTime":313,"recommend":317,"tags":318,"title":319,"type":136,"updated":306},[113],"2025-09-02 10:00:00","本篇文章主要简述了如何给Nuxt框架添加站点详情","https:\u002F\u002Fwww.yjluo.top\u002Fimage\u002FPostCover\u002FsiteInfo.avif","\u002F2025\u002F09\u002Fsitelinkpageadd",{"text":245,"minutes":314,"time":315,"words":316},4.38,262800,876,9,[288,289,152],"添加站点详情页面",{"categories":321,"date":323,"description":324,"image":325,"path":326,"readingTime":327,"recommend":123,"tags":331,"title":334,"type":335,"updated":336},[322],"日志记录","2025-12-28 10:00:00","该文章详细记录了2025年中的上下半年所做的事情，并且还透露出后续计划中会干什么。而在前言中也写到此文为水字数而出，上下半年均写到更换框架与服务有关于的内容。对于未来计划中提到了要对一些网站进行恢复、以及明年将在文章中加入与自创小说有关的内容","\u002Fimage\u002FPostCover\u002FannualSummary.avif","\u002F2025\u002F12\u002Fannualsummary",{"text":180,"minutes":328,"time":329,"words":330},3.855,231300,771,[332,333],"总结",2025,"年度总结：旧去新","story","2025-12-28 20:49:00",{"categories":338,"date":339,"description":340,"image":341,"path":342,"readingTime":343,"recommend":317,"tags":348,"title":349,"type":136,"updated":350},[113],"2025-12-01 10:00:00","该文章详细介绍了基于Vue3+TypeScript开发的豆瓣追更记录系统，采用组件化架构实现两栏筛选菜单、动态加载动画和卡片式作品展示，通过Pinia状态管理+Vite构建工具实现数据流管理，集成防抖加载、虚拟滚动等性能优化方案。","\u002Fimage\u002FPostCover\u002FbanguimPage.avif","\u002F2025\u002F12\u002Fbanguimpageadd",{"text":344,"minutes":345,"time":346,"words":347},"23 min read",22.175,1330500,4435,[288,289,152],"添加追更历史","2025-12-01 20:49:00",{"categories":352,"date":353,"description":354,"image":355,"path":356,"readingTime":357,"recommend":362,"tags":363,"title":364,"type":136,"updated":365},[113],"2025-12-23 10:00:00","该文章介绍Nuxt博客适配中评论模块的Vue组件实现与Artalk评论系统单例管理逻辑，并提供具体的适配评论表情包的Json信息，评论功能有着KaTeX数学公式渲染、图片灯箱、动态监听以及管理逻辑的初始化、计数、暗黑模式切换等方式。","\u002Fimage\u002FPostCover\u002FcommentMeihua.avif","\u002F2025\u002F12\u002Fcommentadd",{"text":358,"minutes":359,"time":360,"words":361},"32 min read",31.72,1903200,6344,8,[288,289,152],"评论优化","2026-03-01 20:49:00",{"categories":367,"date":368,"description":369,"image":370,"path":371,"readingTime":372,"recommend":377,"tags":378,"title":379,"type":136,"updated":380},[113],"2025-12-03 10:05:09","该博客持续维护Nuxt框架博客系统，新增装备页面实现硬件\u002F外设分类展示，支持动态过滤、标签筛选与规格参数渲染，通过TypeScript定义数据接口，结合Vue3响应式布局与SCSS响应式设计，完成设备卡片动态加载、悬停动效及跨端适配优化，集成评论跳转与购买信息展示功能。","\u002Fimage\u002FPostCover\u002FequipmentPage.avif","\u002F2025\u002F12\u002Fequipmentpageadd",{"text":373,"minutes":374,"time":375,"words":376},"8 min read",7.28,436800,1456,7,[288,289,152],"添加装备页面","2025-12-03 20:49:09",{"categories":382,"date":383,"description":384,"image":385,"path":386,"readingTime":387,"recommend":392,"tags":393,"title":394,"type":136,"updated":395},[113],"2025-12-09 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括增加可后期换配置且内置移动到赞赏总览触发效果的打赏弹窗、优化头部封面移动端预览、增加版权图标虚化及打赏入口、将本地desc预览改ai摘要样式、增加版权卡片及更换头部信息样式。","\u002Fimage\u002FPostCover\u002FpostMeihua.avif","\u002F2025\u002F12\u002Fpostpagexiugai",{"text":388,"minutes":389,"time":390,"words":391},"12 min read",11.165,669900,2233,6,[288,289,152],"文章美化","2025-12-09 20:49:00",{"categories":397,"date":398,"description":399,"image":400,"path":401,"readingTime":402,"recommend":407,"tags":408,"title":409,"type":136,"updated":410},[113],"2025-12-04 10:00:00","该文章记录了项目版本迭代中的UI优化与功能调整，包括站点详情卡片组件化改造（采用Badge组件优化布局）、分类卡片新增文章数量统计功能（重新严重问题）、标签卡片新增文章标签统计功能、博主信息模块的拆分与重构，同时删除了冗余的左侧图片和完整博主卡片，最终形成模块化组件结构（涉及5个核心组件及数据调用逻辑调整）。","\u002Fimage\u002FPostCover\u002FsmallCard.avif","\u002F2025\u002F12\u002Fsmallcardadd",{"text":403,"minutes":404,"time":405,"words":406},"10 min read",9.745,584700,1949,5,[288,289,152],"侧边组件美化","2025-12-04 20:49:00",{"categories":412,"date":413,"description":414,"image":415,"path":416,"readingTime":417,"recommend":123,"tags":422,"title":425,"type":136,"updated":426},[113],"2026-01-27 10:00:00","自定义全局的样式颜色，具有对特定CSS中所具有的自定义样式颜色来进行整合，并且作者还顺便水了一篇文章","\u002Fimage\u002FPostCover\u002FcolorStyleAll.avif","\u002F2026\u002F01\u002Fcolorstyleall",{"text":418,"minutes":419,"time":420,"words":421},"14 min read",13.155,789300,2631,[423,424],"全局颜色","自定义","自定义全局颜色","2026-01-27 20:49:00",{"categories":428,"date":429,"description":430,"image":431,"path":432,"readingTime":433,"recommend":123,"tags":438,"title":442,"type":136,"updated":443},[142],"2026-01-11 10:00:00","这篇文章是一篇实战经验分享，主要讲解了如何利用腾讯云的EdgeOne边缘安全加速平台，为网站字体等静态资源搭建一个自定义的、高性能的镜像加速服务。","\u002Fimage\u002FPostCover\u002FjsdmEdge.avif","\u002F2026\u002F01\u002Fjsdmedge",{"text":434,"minutes":435,"time":436,"words":437},"3 min read",2.72,163200,544,[439,440,441],"镜像","EdgeOne","jsdmirror","使用EdgeOne CDN搭建自用Jsd镜像","2026-01-11 20:49:00",{"categories":445,"date":446,"description":447,"image":448,"path":449,"readingTime":450,"recommend":123,"tags":455,"title":458,"type":136,"updated":459},[142],"2026-01-28 19:00:00","本文是一篇关于 Komari Monitor（一款服务器监控系统）的详细介绍与实用指南。文章以作者个人经验为引，对比了哪吒监控（V0\u002FV1版本）与 Komari 在各方面的差异，并逐步演示了如何部署、配置和使用 Komari。","\u002Fimage\u002FPostCover\u002FkomariMonitor.avif","\u002F2026\u002F01\u002Fkomarimonitor",{"text":451,"minutes":452,"time":453,"words":454},"7 min read",6.86,411600,1372,[456,457],"探针","监控","komari：全新的探针站点","2026-01-29 13:00:00",{"categories":461,"date":462,"description":399,"image":463,"path":464,"readingTime":465,"recommend":105,"tags":469,"title":470,"type":136,"updated":471},[113],"2026-01-01 10:00:00","\u002Fimage\u002FPostCover\u002FNewYear.avif","\u002F2026\u002F01\u002Fnewyear",{"text":434,"minutes":466,"time":467,"words":468},2.15,129000,430,[288,289,152],"踏入2026：目标新方向","2026-01-01 20:49:00",{"categories":473,"date":474,"description":475,"image":476,"path":477,"readingTime":478,"recommend":123,"tags":483,"title":484,"type":335,"updated":485},[113],"2026-01-05 10:00:00","该文章记录了项目中对于字体、图片以及构建产物等静态资源的优化与处理，并且表示自身对于图片的存放位置进行优化。","\u002Fimage\u002FPostCover\u002FsiteAssets.avif","\u002F2026\u002F01\u002Fsiteassets",{"text":479,"minutes":480,"time":481,"words":482},"2 min read",1.82,109200,364,[288,289,152],"站点资源优化","2026-01-07 20:49:00",{"categories":487,"date":489,"description":490,"image":491,"path":492,"readingTime":493,"recommend":123,"tags":497,"title":498,"type":136,"updated":499},[488],"日常随笔","2026-01-12 10:00:00","该文章主要写了对于低价机器的试水，并提醒是超开类型的机器。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002Fimage\u002FPostCover\u002FvpsTalk.avif","\u002F2026\u002F01\u002Fvpstalk",{"text":299,"minutes":494,"time":495,"words":496},15.545,932700,3109,[288,289,152],"随笔：低价主机试水","2026-01-12 20:49:00",{"categories":501,"date":502,"description":503,"image":491,"path":504,"readingTime":505,"recommend":123,"tags":509,"title":510,"type":136,"updated":511},[488],"2026-01-30 10:00:00","该文章主要写了对于大容量硬盘主机的试水。在测试的过程中发现机器性能较高，且展示出机器的具体价格，并单独列出只有精简版未采用完整版测试。","\u002F2026\u002F01\u002Fvpstalk-2",{"text":418,"minutes":506,"time":507,"words":508},13.965,837900,2793,[288,289,152],"随笔：大容量主机测试","2026-01-30 20:49:00",{"categories":513,"date":514,"description":515,"image":516,"path":517,"readingTime":518,"recommend":129,"tags":523,"title":524,"type":136,"updated":525},[113],"2026-02-20 10:00:00","该文章展示多个以鸣潮为主题的档案组件，包含具体代码、属性表格对应、预览整体组件、写法展示四种类型，并在文章末尾附加更新报告。","\u002Fimage\u002FPostCover\u002FWutheringWavesPostWidget.avif","\u002F2026\u002F02\u002Fwutheringwavespostwidget",{"text":519,"minutes":520,"time":521,"words":522},"100 min read",99.23,5953800,19846,[288,289,152],"【鸣潮】档案文章组件","2026-02-26 10:00:00",{"categories":527,"date":528,"description":490,"image":529,"path":530,"readingTime":531,"recommend":123,"tags":535,"title":536,"type":136,"updated":537},[142],"2026-02-03 10:00:00","\u002Fimage\u002FPostCover\u002FfnosInstall.avif","\u002F2026\u002F02\u002Ffnosinstall",{"text":125,"minutes":532,"time":533,"words":534},8.91,534600,1782,[288,289,152],"给老MAC升级为飞牛OS","2026-02-05 20:49:00",{"categories":539,"date":528,"description":490,"image":540,"path":541,"readingTime":542,"recommend":123,"tags":546,"title":547,"type":136,"updated":537},[113],"\u002Fimage\u002FPostCover\u002FmacBookPerformancTest.avif","\u002F2026\u002F02\u002Fmacbookperformanctest",{"text":434,"minutes":543,"time":544,"words":545},2.47,148200,494,[288,289,152],"【精简】测试老MAC性能",{"categories":549,"date":550,"description":490,"image":551,"path":552,"readingTime":553,"recommend":123,"tags":557,"title":558,"type":136,"updated":559},[113],"2026-02-04 10:00:00","\u002Fimage\u002FPostCover\u002FmusicInstall.avif","\u002F2026\u002F02\u002Fmusicinstall",{"text":125,"minutes":554,"time":555,"words":556},8.19,491400,1638,[288,289,152],"【本地+云端】搭建道理鱼音乐","2026-02-06 20:49:00",{"categories":561,"date":562,"description":490,"image":563,"path":564,"readingTime":565,"recommend":569,"tags":570,"title":571,"type":136,"updated":572},[113],"2026-03-03 10:00:00","\u002Fimage\u002FPostCover\u002FfooterNuxtMeihua.avif","\u002F2026\u002F03\u002Ffooternuxtmeihua",{"text":180,"minutes":566,"time":567,"words":568},3.235,194100,647,3,[288,289,152],"页脚魔改(Nuxt版本)","2026-03-06 10:00:00",{"categories":574,"date":575,"description":490,"image":563,"path":576,"readingTime":577,"recommend":108,"tags":582,"title":584,"type":136,"updated":585},[113],"2026-03-21 14:00:00","\u002F2026\u002F03\u002Fsteamgamepage",{"text":578,"minutes":579,"time":580,"words":581},"18 min read",17.265,1035900,3453,[288,583],"页面","游戏展示页面","2026-03-22 10:00:00",{"categories":587,"date":588,"description":490,"image":563,"path":589,"readingTime":590,"recommend":129,"tags":594,"title":595,"type":136,"updated":596},[113],"2026-04-11 14:00:00","\u002F2026\u002F04\u002Fessaynuxtpage",{"text":269,"minutes":591,"time":592,"words":593},5.93,355800,1186,[288,583],"说说页面（Nuxt版本）","2026-04-11 22:00:00",{"categories":598,"date":599,"description":490,"image":563,"path":600,"readingTime":601,"recommend":129,"tags":605,"title":606,"type":136,"updated":607},[113],"2026-04-13 14:00:00","\u002F2026\u002F04\u002Fhotnuxtpage",{"text":125,"minutes":602,"time":603,"words":604},8.985,539100,1797,[288,583],"热搜页面（Nuxt版本）","2026-04-13 22:00:00",{"categories":609,"date":611,"description":324,"image":612,"path":613,"readingTime":614,"recommend":123,"tags":618,"title":619,"type":335,"updated":620},[610],"自设记录","2025-12-29 10:00:00","https:\u002F\u002Fsourceimage.s3.bitiful.net\u002Fpost\u002Fimg\u002FannualSummary\u002Fcover.webp","\u002Fnovel\u002Fworld\u002Fharmworld",{"text":479,"minutes":615,"time":616,"words":617},1.31,78600,262,[332,333],"世界志：鸿蒙界","2025-12-29 20:49:00",{"categories":622,"date":611,"description":324,"image":612,"path":623,"readingTime":624,"recommend":123,"tags":628,"title":629,"type":335,"updated":620},[610],"\u002Fnovel\u002Fworld\u002Flmmortalgod",{"text":451,"minutes":625,"time":626,"words":627},6.295,377700,1259,[332,333],"世界志：仙神界",{"categories":631,"date":611,"description":324,"image":612,"path":632,"readingTime":633,"recommend":123,"tags":637,"title":638,"type":335,"updated":620},[610],"\u002Fnovel\u002Fworld\u002Fdh",{"text":479,"minutes":634,"time":635,"words":636},1.65,99000,330,[332,333],"世界志：大荒",[640,642],{"title":167,"path":160,"stem":641,"date":157,"type":136,"children":-1},"posts\u002F2024\u002F04\u002FflinkPageMeihua",{"title":185,"path":178,"stem":643,"date":175,"type":136,"children":-1},"posts\u002F2025\u002F02\u002FfooterQcqxStyle",1776745735125]