[{"data":1,"prerenderedAt":384},["ShallowReactive",2],{"post-/2026/20260310-2":3,"surround-/2026/20260310-2":373},{"id":4,"title":5,"body":6,"categories":345,"date":347,"description":348,"draft":349,"extension":350,"image":351,"meta":352,"navigation":354,"path":355,"permalink":356,"podcastAudio":357,"podcastLyric":358,"podcastTitle":359,"published":356,"readingTime":360,"recommend":326,"references":356,"seo":365,"sitemap":366,"stem":367,"tags":368,"type":371,"updated":347,"__hash__":372},"content/posts/2026/20260310-2.md","在安和鱼（Anheyu）博客中添加网页悬浮立牌",{"type":7,"value":8,"toc":322},"minimark",[9,13,22,44,48,51,67,70,109,112,117,130,134,153,157,164,174,178,193,196,199,207,210,216,219,222,270,273,279,282,296,299,313,316],[10,11,5],"h1",{"id":12},"在安和鱼anheyu博客中添加网页悬浮立牌",[14,15,18],"alert",{"title":16,"type":17},"声明","warning",[19,20,21],"p",{},"本教程由DeepSeekV3.1生成，基于博主部署时思路整理而成，仅供学习参考。",[19,23,24,25,32,33,38,39,43],{},"此教程仅限于 ",[26,27,31],"a",{"href":28,"rel":29},"https://anheyu.com/",[30],"nofollow","anheyu-app","（安和鱼）\n此项目为 ",[26,34,37],{"href":35,"rel":36},"https://github.com/dsrkafuu/sakana-widget",[30],"sakana-widget"," 开源项目\n此教程",[40,41,42],"strong",{},"不需要修改源码","即可实现",[45,46,47],"h2",{"id":47},"效果",[19,49,50],{},"在博客页面右下角添加一个可爱的可交互卡通角色立牌，该立牌具有物理效果，可以拖拽、弹跳，并支持自走模式。",[52,53,54,58,61,64],"ul",{},[55,56,57],"li",{},"立牌默认固定在页面右下角",[55,59,60],{},"鼠标按住可拖拽，松开后会向反方向弹跳",[55,62,63],{},"支持开启自走模式，立牌会随机移动",[55,65,66],{},"可切换不同角色，调整大小等参数",[45,68,69],{"id":69},"功能",[71,72,73,79,85,91,97,103],"ol",{},[55,74,75,78],{},[40,76,77],{},"注册并使用你自己的角色"," - 支持多种预设角色，也可自定义",[55,80,81,84],{},[40,82,83],{},"自动缩放适应，最小 120px"," - 响应式设计，适应不同屏幕",[55,86,87,90],{},[40,88,89],{},"按住立牌拖拽，松手后立牌会向反方向弹跳"," - 模拟物理弹跳效果",[55,92,93,96],{},[40,94,95],{},"底座控制栏切换角色和其他功能"," - 底部控制栏方便操作",[55,98,99,102],{},[40,100,101],{},"自走模式"," - 以随机间隔施加一个大小随机的力，让立牌自主移动",[55,104,105,108],{},[40,106,107],{},"CDN/NPM 引入，自定义参数，链式调用"," - 灵活配置方式",[45,110,111],{"id":111},"教程",[113,114,116],"h3",{"id":115},"第一步登录安和鱼主题后台","第一步：登录安和鱼主题后台",[71,118,119,127],{},[55,120,121,122,126],{},"访问你的博客后台管理页面（通常为 ",[123,124,125],"code",{"code":125},"你的域名/admin","）",[55,128,129],{},"使用管理员账号登录",[113,131,133],{"id":132},"第二步找到自定义代码设置","第二步：找到自定义代码设置",[71,135,136,146],{},[55,137,138,139,142,143],{},"在后台侧边栏找到并点击 ",[40,140,141],{},"\"系统设置\""," 再点击 ",[40,144,145],{},"\"页面配置\"",[55,147,148,149,152],{},"向下滚动找到 ",[40,150,151],{},"自定义底部 HTML 代码","区域",[113,154,156],{"id":155},"第三步添加立牌代码","第三步：添加立牌代码",[19,158,159,160,163],{},"在 ",[40,161,162],{},"自定义底部 HTML 代码区域"," 添加以下完整代码：",[165,166,172],"pre",{"className":167,"code":169,"language":170,"meta":171},[168],"language-html","\u003C!-- 在安和鱼主题中添加悬浮立牌 -->\n\u003C!-- 引入立牌样式文件 -->\n\u003C!-- 引入立牌样式文件 -->\n\u003Clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css\" />\n\n\u003C!-- 立牌核心脚本 -->\n\u003Cscript>\n// 创建立牌容器并设置样式\nconst sakanaWidget = document.createElement(\"div\");\nsakanaWidget.id = \"sakana-widget\";\nsakanaWidget.style.position = \"fixed\";\nsakanaWidget.style.bottom = \"12px\";\nsakanaWidget.style.right = \"0\";\nsakanaWidget.style.zIndex = \"999\";\ndocument.body.appendChild(sakanaWidget);\n\n// 初始化立牌函数\nfunction initSakanaWidget() {\n  // 实例化立牌并挂载到容器\n  new SakanaWidget().mount('#sakana-widget');\n  // 可选：自定义立牌参数（示例，可根据需要修改）\n  // new SakanaWidget({\n  //   character: 'chisato', // 默认角色：chisato/lycoris/nishikigi/nijika（可自行扩展）\n  //   autoWalk: true, // 开启自走模式\n  //   scale: 1.0, // 缩放比例\n  //   minWidth: 120 // 最小宽度\n  // }).mount('#sakana-widget');\n}\n\u003C/script>\n\n\u003C!-- 异步加载立牌核心JS并初始化 -->\n\u003Cscript\n  async\n  onload=\"initSakanaWidget()\"\n  src=\"https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.js\">\n\u003C/script>\n","html","",[123,173,169],{"__ignoreMap":171},[113,175,177],{"id":176},"第四步保存并查看效果","第四步：保存并查看效果",[71,179,180,187,190],{},[55,181,182,183,186],{},"点击 ",[40,184,185],{},"\"保存设置\""," 按钮",[55,188,189],{},"刷新你的博客首页",[55,191,192],{},"查看页面右下角是否出现立牌角色",[45,194,195],{"id":195},"自定义配置选项",[113,197,198],{"id":198},"角色列表",[165,200,205],{"className":201,"code":203,"language":204,"meta":171},[202],"language-javascript","// 可用的预设角色\ncharacter: 'chisato'     // 千岁（默认）\ncharacter: 'lycoris'     // 莉可丽丝\ncharacter: 'nishikigi'   // 锦\ncharacter: 'nijika'      // 虹夏\n","javascript",[123,206,203],{"__ignoreMap":171},[113,208,209],{"id":209},"高级参数调整",[165,211,214],{"className":212,"code":213,"language":204,"meta":171},[202],"// 更多可调整参数示例\nnew SakanaWidget({\n  character: 'chisato',\n  autoWalk: true,\n  scale: 1.0,\n  minWidth: 120,\n  \n  // 物理引擎参数\n  decay: 0.99,           // 阻力系数 (0.95-0.999)\n  r: 10,                 // 相互作用力半径\n  gravity: 0.2,          // 重力大小\n  inertia: 0.99,         // 惯性系数\n  \n  // 自走模式参数\n  autoWalkInterval: 1000, // 自走施加力的间隔(ms)\n  autoWalkForce: 0.1,     // 自走施加力的大小\n  \n  // 控制栏显示\n  controls: true,         // 是否显示控制栏\n  style: {\n    width: '200px',       // 立牌宽度\n    height: '300px'       // 立牌高度\n  }\n}).mount('#sakana-widget');\n",[123,215,213],{"__ignoreMap":171},[45,217,218],{"id":218},"故障排除",[113,220,221],{"id":221},"常见问题",[71,223,224,240,257],{},[55,225,226,229],{},[40,227,228],{},"立牌不显示",[52,230,231,234,237],{},[55,232,233],{},"检查浏览器控制台是否有错误提示",[55,235,236],{},"确认CDN链接是否可以正常访问",[55,238,239],{},"检查z-index是否被其他元素覆盖",[55,241,242,245],{},[40,243,244],{},"无法拖拽",[52,246,247,254],{},[55,248,249,250,253],{},"确认 ",[123,251,252],{"code":252},"draggable: true"," 已设置",[55,255,256],{},"检查是否有其他JavaScript冲突",[55,258,259,262],{},[40,260,261],{},"移动端不显示",[52,263,264,267],{},[55,265,266],{},"立牌默认在移动端可能隐藏",[55,268,269],{},"可添加媒体查询强制显示",[113,271,272],{"id":272},"移动端优化",[165,274,277],{"className":275,"code":276,"language":170,"meta":171},[168],"\u003Cstyle>\n/* 确保在移动端也能显示 */\n@media screen and (max-width: 768px) {\n  #sakana-widget {\n    display: block !important;\n    bottom: 60px !important; /* 避免被移动端浏览器工具栏遮挡 */\n    transform: scale(0.8); /* 在移动端稍微缩小 */\n  }\n}\n\u003C/style>\n",[123,278,276],{"__ignoreMap":171},[45,280,281],{"id":281},"注意事项",[71,283,284,287,290,293],{},[55,285,286],{},"本功能基于Sakana Widget 2.7.0版本，如后续有更新请调整版本号",[55,288,289],{},"立牌可能会稍微影响页面性能，如遇到卡顿可关闭自走模式",[55,291,292],{},"如需添加自定义角色，请参考Sakana Widget官方文档",[55,294,295],{},"建议在桌面端浏览器使用，移动端体验可能受限",[45,297,298],{"id":298},"更新日志",[52,300,301,307,310],{},[55,302,303,306],{},[40,304,305],{},"v1.0"," (2024) - 初始版本，支持基础立牌功能",[55,308,309],{},"基于Sakana Widget 2.7.0开发",[55,311,312],{},"适配安和鱼博客系统的配置系统",[314,315],"hr",{},[19,317,318,321],{},[40,319,320],{},"温馨提示","：立牌为趣味性功能，如不需要可随时移除代码。如遇到任何问题，可检查浏览器控制台错误信息或尝试更新CDN链接版本号。",{"title":171,"searchDepth":323,"depth":323,"links":324},4,[325,327,328,335,339,343,344],{"id":47,"depth":326,"text":47},2,{"id":69,"depth":326,"text":69},{"id":111,"depth":326,"text":111,"children":329},[330,332,333,334],{"id":115,"depth":331,"text":116},3,{"id":132,"depth":331,"text":133},{"id":155,"depth":331,"text":156},{"id":176,"depth":331,"text":177},{"id":195,"depth":326,"text":195,"children":336},[337,338],{"id":198,"depth":331,"text":198},{"id":209,"depth":331,"text":209},{"id":218,"depth":326,"text":218,"children":340},[341,342],{"id":221,"depth":331,"text":221},{"id":272,"depth":331,"text":272},{"id":281,"depth":326,"text":281},{"id":298,"depth":326,"text":298},[346],"博客美化","2026-03-10 22:28:39","本文介绍在 anheyu 博客中添加 Sakana Widget 悬浮立牌的方法，包含安装步骤、参数配置与故障排查。",false,"md","https://dev.jiugg.top/i/7ffe9eb3-2fb1-4aa7-9ada-d99874dde0ae.webp",{"slots":353},{},true,"/2026/20260310-2",null,"https://cdn.jiugg.top/boke/2026/在安和鱼博客添加+Sakana+悬浮立牌.mp3","https://cdn.jiugg.top/boke/2026/在安和鱼博客添加+Sakana+悬浮立牌.lrc","AI播客",{"text":361,"minutes":362,"time":363,"words":364},"6 min read",5.82,349200,1164,{"title":5,"description":348},{"loc":355},"posts/2026/20260310-2",[369,31,370,37],"anheyu","悬浮立牌","tech","YqkLsbO7ocyf1MFdPZdL5dNg1L3Jxd0XkmxIz4di0jc",[374,379],{"title":375,"path":376,"stem":377,"date":378,"type":371,"children":-1},"anheyu主页添加新春灯笼教程","/2026/anheyu1","posts/2026/anheyu1","2026-03-10 22:13:06",{"title":380,"path":381,"stem":382,"date":383,"type":371,"children":-1},"anheyu博客添加侧边栏日历卡片","/2026/20260308-1","posts/2026/20260308-1","2026-03-10 22:41:01",1775556257714]