[{"data":1,"prerenderedAt":643},["ShallowReactive",2],{"post-/2026/anheyu1":3,"surround-/2026/anheyu1":632},{"id":4,"title":5,"body":6,"categories":602,"date":604,"description":605,"draft":606,"extension":607,"image":608,"meta":609,"navigation":611,"path":612,"permalink":613,"podcastAudio":614,"podcastLyric":615,"podcastTitle":616,"published":613,"readingTime":617,"recommend":622,"references":613,"seo":623,"sitemap":624,"stem":625,"tags":626,"type":630,"updated":604,"__hash__":631},"content/posts/2026/anheyu1.md","anheyu主页添加新春灯笼教程",{"type":7,"value":8,"toc":572},"minimark",[9,12,27,31,34,43,47,51,98,101,133,136,140,143,146,176,186,190,197,203,206,209,294,297,303,311,314,321,329,332,335,366,369,423,426,465,468,472,478,492,496,505,511,515,520,526,529,532,549,552,555,563,566],[10,11,5],"h1",{"id":5},[13,14,16,17,16,22],"div",{"style":15},"border: 1px solid #ccc; border-left: 4px solid #4a90e2; border-radius: 4px; padding: 10px 15px; display: flex; align-items: center; gap: 8px; background: transparent;","\n  ",[18,19,21],"span",{"style":20},"background: #4a90e2; color: white; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;","i",[23,24,26],"p",{"style":25},"margin: 0; font-size: 14px;","无需修改主题源文件且代码经过适配",[13,28,30],{"style":29},"margin: 16px 0; padding: 12px; border: 1px solid #888; border-radius: 4px; font-size: 15px; line-height: 1.6; background: transparent;","\n本人大学专业并不与开发相关，仅保证代码可正常运行，不保证其美观性\n",[23,32,33],{},"新春灯笼系统是一个轻量级的前端组件，用于在网页顶部显示带有动画效果的灯笼，营造节日氛围。该系统支持响应式设计，会在移动端自动隐藏，并且可以根据滚动位置自动显示/隐藏灯笼。",[35,36,38],"folding",{"title":37},"效果图",[39,40],"pic",{"caption":41,"src":42},"新春灯笼效果图","https://dev.jiugg.top/i/20daff42-6cd7-40be-bcd8-5bae44997262.webp",[44,45,46],"h2",{"id":46},"功能介绍",[48,49,50],"h3",{"id":50},"核心功能",[52,53,54,62,68,74,80,86,92],"ul",{},[55,56,57,61],"li",{},[58,59,60],"strong",{},"节日氛围营造","：通过红色灯笼和金色文字，为网站增添浓厚的中国传统节日氛围",[55,63,64,67],{},[58,65,66],{},"动态效果","：灯笼具有自然的摇摆动画，提升用户体验",[55,69,70,73],{},[58,71,72],{},"响应式设计","：在移动端设备上自动隐藏，避免影响移动用户浏览",[55,75,76,79],{},[58,77,78],{},"智能显示/隐藏","：当用户向下滚动页面时，灯笼会自动隐藏；当滚动到页面顶部时，灯笼会重新显示",[55,81,82,85],{},[58,83,84],{},"高度可定制","：支持修改灯笼文字、位置、大小、颜色等样式",[55,87,88,91],{},[58,89,90],{},"轻量级实现","：纯JavaScript实现，无需外部依赖，加载速度快",[55,93,94,97],{},[58,95,96],{},"兼容性良好","：支持所有现代浏览器，代码结构清晰易维护",[48,99,100],{"id":100},"技术特点",[52,102,103,109,115,121,127],{},[55,104,105,108],{},[58,106,107],{},"模块化设计","：代码采用模块化结构，易于理解和扩展",[55,110,111,114],{},[58,112,113],{},"性能优化","：使用CSS动画而非JavaScript动画，减少性能消耗",[55,116,117,120],{},[58,118,119],{},"事件防抖","：滚动事件处理采用passive模式，提升滚动性能",[55,122,123,126],{},[58,124,125],{},"DOM操作优化","：动态创建DOM元素，避免静态HTML冗余",[55,128,129,132],{},[58,130,131],{},"样式隔离","：使用独立的样式标签，避免与现有样式冲突",[44,134,135],{"id":135},"安装方法",[48,137,139],{"id":138},"方法一安和鱼博客系统适配","方法一：安和鱼博客系统适配",[23,141,142],{},"如果你使用的是安和鱼（AnHeYu）博客系统，可以将以下代码添加到后台侧边栏配置中：",[48,144,145],{"id":145},"配置步骤",[147,148,149,157,173],"ol",{},[55,150,151,152,156],{},"登录安和鱼博客系统后台（通常为 ",[153,154,155],"code",{"code":155},"你的域名/admin","）",[55,158,159,160,163,164,163,167,163,170],{},"进入 ",[58,161,162],{},"系统管理"," → ",[58,165,166],{},"系统设置",[58,168,169],{},"外观配置",[58,171,172],{},"侧边栏",[55,174,175],{},"将以下代码添加到侧边栏配置中",[177,178,184],"pre",{"className":179,"code":181,"language":182,"meta":183},[180],"language-html","\u003Cscript>\n  /* =========================\n   *  灯笼系统 · 进阶完整版\n   *  作者: 九戈戈\n   *  参考: 张苹果博客\n   * ========================= */\n  (function () {\n    /**\n     * 配置项\n     */\n    const CONFIG = {\n      SCROLL_THRESHOLD: 10, // 下滑多少像素隐藏\n      MOBILE_WIDTH: 768,    // 判定为移动端的宽度\n      LANTERN_TEXTS: ['马', '年', '大', '吉'], // 灯笼上的文字\n      Z_INDEX: 999999       // 灯笼的层级\n    };\n\n    /**\n     * 全局变量\n     */\n    let lanternContainer = null;\n\n    /**\n     * 判断是否为移动端\n     * @returns {boolean} 是否为移动端\n     */\n    function isMobile() {\n      return (\n        window.innerWidth \u003C= CONFIG.MOBILE_WIDTH ||\n        /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)\n      );\n    }\n\n    /**\n     * 判断是否为首页\n     * @returns {boolean} 是否为首页\n     */\n    function isHomePage() {\n      const path = window.location.pathname;\n      // 首页判断：路径为 / 或 /index.html 或为空\n      return path === '/' || path === '' || path === '/index.html' || path.endsWith('/index.html');\n    }\n\n    /**\n     * 创建灯笼元素\n     * @param {string} text 灯笼上的文字\n     * @returns {HTMLElement} 灯笼元素\n     */\n    function createLanternElement(text) {\n      const deng = document.createElement('div');\n      deng.className = 'deng';\n\n      deng.innerHTML = `\n            \u003Cdiv class=\"xian\">\u003C/div>\n            \u003Cdiv class=\"deng-a\">\n                \u003Cdiv class=\"deng-b\">\n                    \u003Cdiv class=\"deng-t\">${text}\u003C/div>\n                \u003C/div>\n            \u003C/div>\n            \u003Cdiv class=\"shui shui-a\">\n                \u003Cdiv class=\"shui-c\">\u003C/div>\n                \u003Cdiv class=\"shui-b\">\u003C/div>\n            \u003C/div>\n        `;\n\n      return deng;\n    }\n\n    /**\n     * 创建灯笼容器\n     */\n    function createLanternContainer() {\n      lanternContainer = document.createElement('div');\n      lanternContainer.className = 'deng-container';\n\n      CONFIG.LANTERN_TEXTS.forEach((text, index) => {\n        const box = document.createElement('div');\n        box.className = `deng-box deng-box${index + 1}`;\n\n        const lantern = createLanternElement(text);\n        box.appendChild(lantern);\n        lanternContainer.appendChild(box);\n      });\n\n      document.body.appendChild(lanternContainer);\n    }\n\n    /**\n     * 注入灯笼样式\n     */\n    function injectLanternStyles() {\n      if (document.getElementById('deng-style')) return;\n\n      const style = document.createElement('style');\n      style.id = 'deng-style';\n      style.textContent = `\n        .deng-container {\n            position: relative;\n            top: 10px;\n            z-index: ${CONFIG.Z_INDEX};\n            opacity: 0.9;\n            pointer-events: none;\n            transition: opacity .45s ease, transform .45s ease;\n        }\n\n        .deng-container.hide {\n            opacity: 0;\n            transform: translateY(-20px);\n        }\n\n        .deng-box { \n            position: fixed; \n        }\n\n        .deng-box1 { top: 15px; left: 20px; }\n        .deng-box2 { top: 12px; left: 130px; }\n        .deng-box3 { top: 12px; right: 130px; }\n        .deng-box4 { top: 15px; right: 20px; }\n\n        .deng {\n            position: relative;\n            width: 120px;\n            height: 90px;\n            background: rgba(216, 0, 15, 0.8);\n            border-radius: 50% 50%;\n            animation: swing 3s infinite ease-in-out;\n            box-shadow: -5px 5px 50px 4px #fa6c00;\n        }\n\n        /* 灯笼顶部金色装饰条 */\n        .deng:before {\n            content: \"\";\n            display: block;\n            position: absolute;\n            top: -7px;\n            left: 29px;\n            height: 12px;\n            width: 60px;\n            z-index: 999;\n            border-radius: 5px;\n            border: solid 1px #dc8f03;\n            background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);\n        }\n\n        /* 灯笼底部金色装饰条 */\n        .deng:after {\n            content: \"\";\n            display: block;\n            position: absolute;\n            bottom: -7px;\n            left: 29px;\n            height: 12px;\n            width: 60px;\n            border-radius: 5px;\n            border: solid 1px #dc8f03;\n            background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);\n        }\n\n        .xian {\n            position: absolute;\n            top: -20px;\n            left: 60px;\n            width: 2px;\n            height: 20px;\n            background: #dc8f03;\n        }\n\n        .deng-a {\n            width: 100px;\n            height: 90px;\n            background: rgba(216, 0, 15, 0.1);\n            border-radius: 50%;\n            border: 2px solid #dc8f03;\n            margin-left: 8px;\n            display: flex;\n            justify-content: center;\n        }\n\n        .deng-b {\n            width: 65px;\n            height: 83px;\n            background: rgba(216, 0, 15, 0.1);\n            border-radius: 60%;\n            border: 2px solid #dc8f03;\n        }\n\n        .deng-t {\n            font-family: '华文行楷', Arial, Lucida Grande, Tahoma, sans-serif;\n            font-size: 3.2rem;\n            color: #dc8f03;\n            font-weight: 700;\n            line-height: 85px;\n            text-align: center;\n            white-space: nowrap;\n        }\n\n        .shui-a {\n            position: relative;\n            width: 5px;\n            height: 20px;\n            margin: -5px 0 0 59px;\n            background: orange;\n            border-radius: 0 0 5px 5px;\n            animation: swing 4s infinite ease-in-out;\n            transform-origin: 50% -45px;\n        }\n\n        .shui-b {\n            position: absolute;\n            top: 14px;\n            left: -2px;\n            width: 10px;\n            height: 10px;\n            background: #dc8f03;\n            border-radius: 50%;\n        }\n\n        .shui-c {\n            position: absolute;\n            top: 18px;\n            left: -2px;\n            width: 10px;\n            height: 35px;\n            background: orange;\n            border-radius: 0 0 0 5px;\n        }\n\n        @keyframes swing {\n            0% { transform: rotate(-10deg); }\n            50% { transform: rotate(10deg); }\n            100% { transform: rotate(-10deg); }\n        }\n        `;\n      document.head.appendChild(style);\n    }\n\n    /**\n     * 根据滚动位置控制灯笼显示/隐藏\n     */\n    function handleScroll() {\n      if (!lanternContainer) return;\n      const scrollTop = window.scrollY || document.documentElement.scrollTop;\n\n      if (scrollTop \u003C= CONFIG.SCROLL_THRESHOLD) {\n        lanternContainer.classList.remove('hide');\n      } else {\n        lanternContainer.classList.add('hide');\n      }\n    }\n\n    /**\n     * 初始化灯笼系统\n     */\n    function initLanternSystem() {\n      // 非首页直接终止\n      if (!isHomePage()) return;\n\n      // 移动端直接终止\n      if (isMobile()) return;\n\n      // 防重复初始化\n      if (document.querySelector('.deng-container')) return;\n\n      // 注入样式\n      injectLanternStyles();\n      // 创建灯笼容器\n      createLanternContainer();\n      // 初始化显示状态\n      handleScroll();\n\n      // 添加事件监听\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      window.addEventListener('resize', handleScroll);\n    }\n\n    /**\n     * 启动灯笼系统\n     */\n    function startLanternSystem() {\n      if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initLanternSystem);\n      } else {\n        initLanternSystem();\n      }\n    }\n\n    // 启动灯笼系统\n    startLanternSystem();\n  })();\n\u003C/script>\n","html","",[153,185,181],{"__ignoreMap":183},[48,187,189],{"id":188},"方法二外部引入","方法二：外部引入",[23,191,192,193,196],{},"将代码保存为 ",[153,194,195],{"code":195},"lantern.js"," 文件，然后在HTML中引入：",[177,198,201],{"className":199,"code":200,"language":182,"meta":183},[180],"\u003Cscript src=\"path/to/lantern.js\">\u003C/script>\n",[153,202,200],{"__ignoreMap":183},[44,204,205],{"id":205},"自定义配置",[23,207,208],{},"灯笼系统提供了以下配置项，你可以根据需要进行修改：",[35,210,212],{"title":211},"配置项说明",[213,214,215,234],"table",{},[216,217,218],"thead",{},[219,220,221,225,228,231],"tr",{},[222,223,224],"th",{},"配置项",[222,226,227],{},"类型",[222,229,230],{},"默认值",[222,232,233],{},"说明",[235,236,237,252,265,281],"tbody",{},[219,238,239,243,246,249],{},[240,241,242],"td",{},"SCROLL_THRESHOLD",[240,244,245],{},"Number",[240,247,248],{},"10",[240,250,251],{},"下滑多少像素后隐藏灯笼",[219,253,254,257,259,262],{},[240,255,256],{},"MOBILE_WIDTH",[240,258,245],{},[240,260,261],{},"768",[240,263,264],{},"判定为移动端的宽度阈值",[219,266,267,270,273,278],{},[240,268,269],{},"LANTERN_TEXTS",[240,271,272],{},"Array",[240,274,275],{},[18,276,277],{},"'马', '年', '大', '吉'",[240,279,280],{},"灯笼上的文字",[219,282,283,286,288,291],{},[240,284,285],{},"Z_INDEX",[240,287,245],{},[240,289,290],{},"999999",[240,292,293],{},"灯笼的层级，确保显示在最上层",[48,295,296],{"id":296},"修改灯笼文字",[23,298,299,300,302],{},"如果你想修改灯笼上的文字，只需要修改 ",[153,301,269],{"code":269}," 数组：",[177,304,309],{"className":305,"code":307,"language":308,"meta":183},[306],"language-javascript","const CONFIG = {\n    // 其他配置...\n    LANTERN_TEXTS: ['新', '春', '快', '乐'], // 修改为你想要的文字\n    // 其他配置...\n};\n","javascript",[153,310,307],{"__ignoreMap":183},[48,312,313],{"id":313},"修改灯笼位置",[23,315,316,317,320],{},"如果你想调整灯笼的位置，可以修改CSS中的 ",[153,318,319],{"code":319},".deng-box"," 相关样式：",[177,322,327],{"className":323,"code":325,"language":326,"meta":183},[324],"language-css",".deng-box1 { top: 30px; left: 20px; } /* 左上 */\n.deng-box2 { top: 27px; left: 130px; } /* 左中 */\n.deng-box3 { top: 27px; right: 130px; } /* 右中 */\n.deng-box4 { top: 30px; right: 20px; } /* 右上 */\n","css",[153,328,325],{"__ignoreMap":183},[44,330,331],{"id":331},"实现原理",[48,333,50],{"id":334},"核心功能-1",[147,336,337,343,349,354,360],{},[55,338,339,342],{},[58,340,341],{},"动态创建DOM元素","：通过JavaScript动态创建灯笼的HTML结构",[55,344,345,348],{},[58,346,347],{},"注入CSS样式","：自动创建并注入样式标签，无需外部CSS文件",[55,350,351,353],{},[58,352,72],{},"：在移动端自动隐藏灯笼",[55,355,356,359],{},[58,357,358],{},"滚动控制","：根据滚动位置自动显示/隐藏灯笼",[55,361,362,365],{},[58,363,364],{},"动画效果","：使用CSS动画实现灯笼的摇摆效果",[48,367,368],{"id":368},"代码结构",[35,370,373],{"title":371,":open":372},"代码结构解析","true",[147,374,375,381,387,393,399,405,411,417],{},[55,376,377,380],{},[58,378,379],{},"配置项定义","：集中管理所有配置参数",[55,382,383,386],{},[58,384,385],{},"移动端检测","：判断是否为移动端设备",[55,388,389,392],{},[58,390,391],{},"灯笼元素创建","：生成单个灯笼的DOM结构",[55,394,395,398],{},[58,396,397],{},"灯笼容器创建","：创建包含多个灯笼的容器",[55,400,401,404],{},[58,402,403],{},"样式注入","：动态添加CSS样式",[55,406,407,410],{},[58,408,409],{},"滚动事件处理","：根据滚动位置控制灯笼显示/隐藏",[55,412,413,416],{},[58,414,415],{},"初始化函数","：初始化整个灯笼系统",[55,418,419,422],{},[58,420,421],{},"启动函数","：在DOM加载完成后启动系统",[44,424,425],{"id":425},"注意事项",[35,427,429],{"title":428},"使用注意事项",[147,430,431,437,443,449,459],{},[55,432,433,436],{},[58,434,435],{},"兼容性","：该系统使用了现代JavaScript语法，在IE浏览器上可能无法正常工作",[55,438,439,442],{},[58,440,441],{},"性能","：由于使用了CSS动画，在低配置设备上可能会影响性能",[55,444,445,448],{},[58,446,447],{},"层级","：灯笼的z-index设置为999999，确保显示在最上层，但可能会与其他元素的层级产生冲突",[55,450,451,454,455,458],{},[58,452,453],{},"文字大小","：灯笼上的文字大小固定，如需修改请调整CSS中的 ",[153,456,457],{"code":457},".deng-t"," 样式",[55,460,461,464],{},[58,462,463],{},"移动端","：在宽度小于768px的设备上，灯笼会自动隐藏",[44,466,467],{"id":467},"常见问题",[48,469,471],{"id":470},"q-灯笼不显示怎么办","Q: 灯笼不显示怎么办？",[23,473,474,477],{},[58,475,476],{},"A:"," 请检查以下几点：",[147,479,480,483,486,489],{},[55,481,482],{},"确认代码是否正确复制到HTML文件中",[55,484,485],{},"确认当前设备不是移动端（宽度大于768px）",[55,487,488],{},"确认页面没有滚动（或滚动距离小于10px）",[55,490,491],{},"检查浏览器控制台是否有错误信息",[48,493,495],{"id":494},"q-如何修改灯笼的大小","Q: 如何修改灯笼的大小？",[23,497,498,500,501,504],{},[58,499,476],{}," 可以修改CSS中的 ",[153,502,503],{"code":503},".deng"," 样式的宽度和高度：",[177,506,509],{"className":507,"code":508,"language":326,"meta":183},[324],".deng {\n    width: 120px; /* 修改宽度 */\n    height: 90px; /* 修改高度 */\n    /* 其他样式... */\n}\n",[153,510,508],{"__ignoreMap":183},[48,512,514],{"id":513},"q-如何修改灯笼的颜色","Q: 如何修改灯笼的颜色？",[23,516,517,519],{},[58,518,476],{}," 可以修改CSS中的颜色相关样式：",[177,521,524],{"className":522,"code":523,"language":326,"meta":183},[324],".deng {\n    background: rgba(216,0,15,.8); /* 灯笼主体颜色 */\n    /* 其他样式... */\n}\n\n.deng-a, .deng-b {\n    border: 2px solid #dc8f03; /* 边框颜色 */\n    /* 其他样式... */\n}\n\n.deng-t {\n    color: #dc8f03; /* 文字颜色 */\n    /* 其他样式... */\n}\n",[153,525,523],{"__ignoreMap":183},[44,527,528],{"id":528},"总结",[23,530,531],{},"新春灯笼系统是一个简单易用的前端组件，可以为你的网站增添节日氛围。它具有以下特点：",[52,533,534,537,540,543,546],{},[55,535,536],{},"✅ 轻量级，无需外部依赖",[55,538,539],{},"✅ 响应式设计，自动适配不同设备",[55,541,542],{},"✅ 动画效果，提升用户体验",[55,544,545],{},"✅ 可自定义，支持修改文字、位置等",[55,547,548],{},"✅ 性能优化，滚动时自动隐藏",[23,550,551],{},"希望这个教程对你有所帮助，祝你在新的一年里万事如意！",[44,553,554],{"id":554},"联系方式",[23,556,557,558],{},"如有问题或建议，欢迎在评论区交流或联系我：\n",[559,560,562],"a",{"href":561},"mailto:naiwenzhu123@qq.com","发送邮件",[564,565],"hr",{},[567,568,569],"blockquote",{},[23,570,571],{},"本教程基于anheyu-app主题开发，无需修改主题源文件且代码经过适配，测试版本为：1.6.10\n其他博客系统可能需要适当调整。\n代码已优化，兼容大部分现代浏览器。",{"title":183,"searchDepth":573,"depth":573,"links":574},4,[575,581,586,590,594,595,600,601],{"id":46,"depth":576,"text":46,"children":577},2,[578,580],{"id":50,"depth":579,"text":50},3,{"id":100,"depth":579,"text":100},{"id":135,"depth":576,"text":135,"children":582},[583,584,585],{"id":138,"depth":579,"text":139},{"id":145,"depth":579,"text":145},{"id":188,"depth":579,"text":189},{"id":205,"depth":576,"text":205,"children":587},[588,589],{"id":296,"depth":579,"text":296},{"id":313,"depth":579,"text":313},{"id":331,"depth":576,"text":331,"children":591},[592,593],{"id":334,"depth":579,"text":50},{"id":368,"depth":579,"text":368},{"id":425,"depth":576,"text":425},{"id":467,"depth":576,"text":467,"children":596},[597,598,599],{"id":470,"depth":579,"text":471},{"id":494,"depth":579,"text":495},{"id":513,"depth":579,"text":514},{"id":528,"depth":576,"text":528},{"id":554,"depth":576,"text":554},[603],"博客美化","2026-03-10 22:13:06","本文介绍 anheyu 博客主页新春灯笼组件的安装、自定义配置、实现原理与常见问题。",false,"md","https://dev.jiugg.top/i/db30d9c0-e1cc-4854-94ef-d923c36dca09.webp",{"slots":610},{},true,"/2026/anheyu1",null,"https://cdn.jiugg.top/boke/2026/anheyu+博客添加新春灯笼.mp3","https://cdn.jiugg.top/boke/2026/anheyu+博客添加新春灯笼.lrc","AI播客",{"text":618,"minutes":619,"time":620,"words":621},"12 min read",11.44,686400,2288,1,{"title":5,"description":605},{"loc":612},"posts/2026/anheyu1",[627,628,629],"anheyu","anheyu-app","新春灯笼","tech","6q6iirerMiBUlFPFDSldMvEHr9JlLACGn6r0Sva5530",[633,638],{"title":634,"path":635,"stem":636,"date":637,"type":630,"children":-1},"爱影CMS实践指南","/2026/20260310-5","posts/2026/20260310-5","2026-03-09 22:37:58",{"title":639,"path":640,"stem":641,"date":642,"type":630,"children":-1},"在安和鱼（Anheyu）博客中添加网页悬浮立牌","/2026/20260310-2","posts/2026/20260310-2","2026-03-10 22:28:39",1775556257714]