[{"data":1,"prerenderedAt":644},["ShallowReactive",2],{"post-/2026/20260323-1":3,"surround-/2026/20260323-1":638},{"id":4,"title":5,"body":6,"categories":609,"date":611,"description":612,"draft":613,"extension":614,"image":615,"meta":616,"navigation":618,"path":619,"permalink":620,"podcastAudio":621,"podcastLyric":622,"podcastTitle":623,"published":620,"readingTime":624,"recommend":587,"references":620,"seo":629,"sitemap":630,"stem":631,"tags":632,"type":636,"updated":611,"__hash__":637},"content/posts/2026/20260323-1.md","在 Anheyu 博客中接入 Live2D 看板娘",{"type":7,"value":8,"toc":586},"minimark",[9,13,29,44,54,120,124,130,135,138,141,146,149,166,169,172,196,223,226,231,234,255,258,262,268,282,299,303,310,313,324,327,330,457,466,469,519,522,526,529,547,551,560,564,567,571,574,577,583],[10,11,5],"h1",{"id":12},"在-anheyu-博客中接入-live2d-看板娘",[14,15,16],"blockquote",{},[17,18,19,20,24,25,28],"p",{},"这篇文章整理了一套可以直接用于 ",[21,22,23],"code",{"code":23},"anheyu-app"," 的 Live2D 看板娘接入方式。整个过程不需要修改主题源码，只需要在后台的自定义底部 HTML 区域粘贴代码，再把模型地址替换成你自己的 ",[21,26,27],{"code":27},"model3.json"," 即可。",[30,31,34],"alert",{"title":32,"type":33},"适用说明","info",[17,35,36,37,40,41,43],{},"本文适用于支持后台 ",[21,38,39],{"code":39},"系统设置 -> 页面配置 -> 自定义底部 HTML 代码"," 的 ",[21,42,23],{"code":23}," 部署方式。如果你当前用的正是这一套后台，那么基本可以直接照着本文操作。",[30,45,48],{"title":46,"type":47},"提前注意","warning",[17,49,50,51,53],{},"想让看板娘正常显示，关键不在脚本本身，而在模型资源是否可访问。你需要准备一个能够公开访问的 ",[21,52,27],{"code":27}," 地址，并确保它引用到的贴图、动作、物理文件也都能正常加载。",[30,55,57,80,83,109],{"title":56,"type":47},"模型兼容性提醒",[17,58,59,60,63,64,67,68,71,72,75,76,79],{},"我查了 ",[21,61,62],{"code":62},"oh-my-live2d"," 的官方 README 和文档。按项目当前说明，它默认集成 ",[21,65,66],{"code":66},"Cubism 2.1"," 与 ",[21,69,70],{"code":70},"Cubism 5","，官方给出的结论是可以覆盖 ",[21,73,74],{"code":74},"model2"," 到 ",[21,77,78],{"code":78},"model5"," 这些常见 Live2D 模型版本。",[17,81,82],{},"但这并不等于你在网上随便找到一个模型包就一定能直接跑起来。实际更常见的问题反而是：",[84,85,86,90,103,106],"ul",{},[87,88,89],"li",{},"模型资源不完整，缺少贴图、动作、物理或音频文件",[87,91,92,95,96,95,99,102],{},[21,93,94],{"code":94},"model.json","、",[21,97,98],{"code":98},"*.model.json",[21,100,101],{"code":101},"*.model3.json"," 这类入口文件里的路径已经失效",[87,104,105],{},"模型资源放在了有限制的图床、网盘或对象存储中，触发跨域、鉴权或防盗链",[87,107,108],{},"第三方整理过的模型包目录结构不规范，导致前端可以加载脚本，却找不到真正的模型资源",[17,110,111,112,114,115,119],{},"所以这篇教程更准确的说法应该是：",[21,113,62],{"code":62}," 官方并不是“只支持少数模型版本”，但",[116,117,118],"strong",{},"不是所有网上流传的模型资源都能直接拿来用","。选模型时，优先挑已经验证过可在网页环境正常加载的资源会更省事。",[121,122,123],"h2",{"id":123},"相关项目",[125,126],"link-card",{"description":127,"icon":128,"link":129,"title":62},"用于网页挂载 Live2D 看板娘的开源项目，支持停靠位置、交互菜单与模型配置。","https://github.com/favicon.ico","https://github.com/oh-my-live2d/oh-my-live2d",[125,131],{"description":132,"icon":128,"link":133,"title":134},"可用于查找和参考可用模型资源。挑选时建议优先确认是否包含 model3.json 与完整依赖文件。","https://github.com/Eikanya/Live2d-model/tree/master","Live2D 模型参考仓库",[121,136,137],{"id":137},"效果预览",[17,139,140],{},"这套方案接入后，看板娘会固定显示在页面右侧，支持桌面端展示、菜单交互以及收起休息等简单动作。如果你只是想给博客加一个更有氛围感的挂件，这种方式已经足够直接。",[142,143],"pic",{"caption":144,"src":145},"Live2D 看板娘在页面右侧的实际效果示意","https://dev.jiugg.top/i/2cb6d824-f699-4f60-b1af-6eab6c12f17a.webp",[121,147,148],{"id":148},"这套方案能实现什么",[84,150,151,154,157,160,163],{},[87,152,153],{},"不改主题源码，直接通过后台配置接入",[87,155,156],{},"将 Live2D 看板娘固定在页面右侧展示",[87,158,159],{},"默认只在桌面端显示，避免移动端遮挡内容",[87,161,162],{},"支持自定义模型地址、缩放比例、偏移位置和舞台尺寸",[87,164,165],{},"可以通过菜单给看板娘增加“休息”之类的简单交互",[121,167,168],{"id":168},"使用前准备",[17,170,171],{},"正式开始前，建议先准备好下面几项内容：",[84,173,174,180,183,189],{},[87,175,176,177,179],{},"一个可正常登录的 ",[21,178,23],{"code":23}," 后台管理账号",[87,181,182],{},"一份可用的 Live2D 模型资源",[87,184,185,186,188],{},"一个可公开访问的 ",[21,187,27],{"code":27}," 地址",[87,190,191,192,195],{},"能正常访问 ",[21,193,194],{"code":194},"jsDelivr"," 的网络环境，或者你自己的脚本镜像地址",[197,198,200],"folding",{"title":199},"模型资源准备建议",[84,201,202,211,217,220],{},[87,203,204,207,208,210],{},[21,205,206],{"code":206},"path"," 必须填写为模型入口文件地址，也就是 ",[21,209,27],{"code":27}," 的完整 URL。",[87,212,213,214,216],{},"不要只上传一个 ",[21,215,27],{"code":27}," 文件，模型引用到的贴图、动作、物理配置也要一并放好。",[87,218,219],{},"如果你把模型文件放在自己的站点或对象存储中，记得检查外链访问和跨域设置。",[87,221,222],{},"如果加载后模型空白、贴图丢失或控制台报 404，大多都是模型资源路径不完整导致的。",[121,224,225],{"id":225},"操作步骤",[227,228,230],"h3",{"id":229},"第一步进入页面配置","第一步：进入页面配置",[17,232,233],{},"登录博客后台后，按下面的路径进入设置页：",[235,236,237,243,249],"ol",{},[87,238,239,240],{},"在左侧菜单点击 ",[116,241,242],{},"系统设置",[87,244,245,246],{},"进入 ",[116,247,248],{},"页面配置",[87,250,251,252],{},"向下找到 ",[116,253,254],{},"自定义底部 HTML 代码",[17,256,257],{},"这一步找到位置就够了，不需要改源码，也不需要重新打包前端。",[227,259,261],{"id":260},"第二步粘贴完整代码","第二步：粘贴完整代码",[17,263,264,265,267],{},"将下面这段代码粘贴到 ",[116,266,254],{}," 区域中：",[197,269,272],{"title":270,":open":271},"完整代码","true",[273,274,280],"pre",{"className":275,"code":277,"filename":254,"language":278,"meta":279},[276],"language-html","\u003Cscript src=\"https://cdn.jsdelivr.net/npm/oh-my-live2d@0.19.3/dist/index.min.js\">\u003C/script>\n\u003Cscript>\n  window.addEventListener('load', function () {\n    const oml2d = OML2D.loadOml2d({\n      dockedPosition: 'right',\n      mobileDisplay: false,\n      models: [\n        {\n          name: 'lafei-local',\n          path: 'https://example.com/path/to/model3.json',\n          scale: 0.3,\n          position: [0, 120],\n          stageStyle: {\n            width: '320px',\n            height: '460px'\n          }\n        }\n      ],\n      menus: {\n        disable: false,\n        items: [\n          {\n            id: 'Rest',\n            icon: 'icon-rest',\n            title: '休息',\n            onClick: function (oml2d) {\n              oml2d.statusBarOpen('看板娘休息中');\n              oml2d.clearTips();\n              oml2d.setStatusBarClickEvent(function () {\n                oml2d.statusBarClose();\n                oml2d.stageSlideIn();\n                oml2d.statusBarClearEvents();\n              });\n              oml2d.stageSlideOut();\n            }\n          }\n        ]\n      }\n    });\n\n    window.oml2d = oml2d;\n  });\n\u003C/script>\n","html","",[21,281,277],{"__ignoreMap":279},[30,283,285],{"title":284,"type":47},"复制前一定要改的地方",[17,286,287,288,291,292,298],{},"上面代码里的 ",[21,289,290],{"code":290},"path: 'https://example.com/path/to/model3.json'"," 只是示例地址，必须替换成你自己的模型入口文件链接。正常情况下也",[116,293,294,295],{},"不需要额外写 ",[21,296,297],{"code":297},"\u003C/style>","，如果你草稿里看到这个标签，它更像是从别的代码片段里截出来的残留，直接照搬反而容易让页面结构变乱。",[227,300,302],{"id":301},"第三步保存并刷新页面","第三步：保存并刷新页面",[17,304,305,306,309],{},"代码填好后，点击后台的 ",[116,307,308],{},"保存设置","，然后回到前台页面刷新查看效果。",[17,311,312],{},"如果刷新后没有立刻出现，建议再做一次下面的动作：",[235,314,315,318,321],{},[87,316,317],{},"强制刷新页面",[87,319,320],{},"打开浏览器控制台查看是否有脚本报错",[87,322,323],{},"检查模型地址是否能直接访问",[121,325,326],{"id":326},"常用参数说明",[17,328,329],{},"下面这几个参数是最常需要调整的：",[331,332,333,349],"table",{},[334,335,336],"thead",{},[337,338,339,343,346],"tr",{},[340,341,342],"th",{},"参数",[340,344,345],{},"作用",[340,347,348],{},"当前示例",[350,351,352,368,383,397,412,427,442],"tbody",{},[337,353,354,360,363],{},[355,356,357],"td",{},[21,358,359],{"code":359},"dockedPosition",[355,361,362],{},"看板娘停靠位置，可理解为靠左还是靠右",[355,364,365],{},[21,366,367],{"code":367},"right",[337,369,370,375,378],{},[355,371,372],{},[21,373,374],{"code":374},"mobileDisplay",[355,376,377],{},"是否在移动端显示",[355,379,380],{},[21,381,382],{"code":382},"false",[337,384,385,389,392],{},[355,386,387],{},[21,388,206],{"code":206},[355,390,391],{},"模型入口文件地址",[355,393,394,395],{},"你自己的 ",[21,396,27],{"code":27},[337,398,399,404,407],{},[355,400,401],{},[21,402,403],{"code":403},"scale",[355,405,406],{},"模型缩放比例",[355,408,409],{},[21,410,411],{"code":411},"0.3",[337,413,414,419,422],{},[355,415,416],{},[21,417,418],{"code":418},"position",[355,420,421],{},"模型偏移位置",[355,423,424],{},[21,425,426],{"code":426},"[0, 120]",[337,428,429,434,437],{},[355,430,431],{},[21,432,433],{"code":433},"stageStyle.width",[355,435,436],{},"舞台宽度",[355,438,439],{},[21,440,441],{"code":441},"320px",[337,443,444,449,452],{},[355,445,446],{},[21,447,448],{"code":448},"stageStyle.height",[355,450,451],{},"舞台高度",[355,453,454],{},[21,455,456],{"code":456},"460px",[17,458,459,460,462,463,465],{},"如果你觉得人物太大，就把 ",[21,461,403],{"code":403}," 调小一点；如果底部被挡住或者位置太高，可以继续微调 ",[21,464,418],{"code":418}," 这组数值。",[121,467,468],{"id":468},"常见自定义方向",[197,470,472],{"title":471},"几个最常见的修改思路",[235,473,474,484,495,507],{},[87,475,476,477,479,480,483],{},"想让看板娘显示在左侧，可以把 ",[21,478,359],{"code":359}," 改成 ",[21,481,482],{"code":482},"left","。",[87,485,486,487,479,489,491,492,494],{},"想让移动端也显示，可以把 ",[21,488,374],{"code":374},[21,490,271],{"code":271},"，但建议同时把 ",[21,493,403],{"code":403}," 调小，避免遮挡正文。",[87,496,497,498,95,500,502,503,506],{},"如果模型裁切不自然，优先一起调整 ",[21,499,403],{"code":403},[21,501,418],{"code":418}," 和 ",[21,504,505],{"code":505},"stageStyle","，不要只改其中一个参数。",[87,508,509,510,513,514,479,517,483],{},"如果你不想要“休息”菜单，可以把 ",[21,511,512],{"code":512},"menus.items"," 整段删掉，或者把 ",[21,515,516],{"code":516},"disable",[21,518,271],{"code":271},[121,520,521],{"id":521},"常见问题",[227,523,525],{"id":524},"_1-看板娘不显示","1. 看板娘不显示",[17,527,528],{},"优先检查下面几个点：",[84,530,531,536,541,544],{},[87,532,533,535],{},[21,534,194],{"code":194}," 脚本是否加载成功",[87,537,538,540],{},[21,539,27],{"code":27}," 地址是否能直接打开",[87,542,543],{},"模型依赖文件是否存在 404",[87,545,546],{},"后台是否重复插入了多份脚本",[227,548,550],{"id":549},"_2-移动端为什么看不到","2. 移动端为什么看不到",[17,552,553,554,557,558,483],{},"因为示例代码里写的是 ",[21,555,556],{"code":556},"mobileDisplay: false","，这表示默认只在桌面端显示。如果你想在手机上也显示，需要手动改成 ",[21,559,271],{"code":271},[227,561,563],{"id":562},"_3-页面出现空白模型或贴图错乱","3. 页面出现空白模型或贴图错乱",[17,565,566],{},"这通常不是脚本问题，而是模型资源引用不完整。很多模型仓库下载下来后，文件层级比较深，上传时少传一个贴图目录，页面就会直接显示异常。",[227,568,570],{"id":569},"_4-刷新后出现多个看板娘","4. 刷新后出现多个看板娘",[17,572,573],{},"这种情况通常是因为你在后台重复保存了多份相同脚本，或者历史代码没有删干净。把旧代码清理掉，只保留一份初始化脚本即可。",[121,575,576],{"id":576},"总结",[17,578,579,580,582],{},"如果你只是想在 ",[21,581,23],{"code":23}," 里快速加一个可用的 Live2D 看板娘，那么这套方式已经比较省事了：不用改源码，不用重新部署前端，直接在后台配置里完成接入即可。",[17,584,585],{},"真正需要你花时间处理的，其实只有两件事：一是准备一套能正常访问的模型资源，二是把位置和尺寸调到适合你自己页面布局的状态。只要这两步处理好，后面的接入过程本身并不复杂。",{"title":279,"searchDepth":587,"depth":587,"links":588},4,[589,591,592,593,594,600,601,602,608],{"id":123,"depth":590,"text":123},2,{"id":137,"depth":590,"text":137},{"id":148,"depth":590,"text":148},{"id":168,"depth":590,"text":168},{"id":225,"depth":590,"text":225,"children":595},[596,598,599],{"id":229,"depth":597,"text":230},3,{"id":260,"depth":597,"text":261},{"id":301,"depth":597,"text":302},{"id":326,"depth":590,"text":326},{"id":468,"depth":590,"text":468},{"id":521,"depth":590,"text":521,"children":603},[604,605,606,607],{"id":524,"depth":597,"text":525},{"id":549,"depth":597,"text":550},{"id":562,"depth":597,"text":563},{"id":569,"depth":597,"text":570},{"id":576,"depth":590,"text":576},[610],"博客美化","2026-03-23 18:04:13","本文记录如何在 anheyu-app 博客后台通过自定义底部 HTML 引入 oh-my-live2d，实现可自定义模型、位置与交互菜单的 Live2D 看板娘效果。",false,"md","https://dev.jiugg.top/i/2cb3618a-58ed-4485-bdfc-8709bf8dbc10.webp",{"slots":617},{},true,"/2026/20260323-1",null,"https://cdn.jiugg.top/boke/2026/在+Anheyu+博客中接入+Live2D+看板娘.mp3","https://cdn.jiugg.top/boke/2026/在+Anheyu+博客中接入+Live2D+看板娘.lrc","AI播客",{"text":625,"minutes":626,"time":627,"words":628},"10 min read",9.13,547800,1826,{"title":5,"description":612},{"loc":619},"posts/2026/20260323-1",[633,23,634,635,62],"anheyu","Live2D","看板娘","tech","xRVRt9D3LatxHhkfZ7qXq3dFCequAMb0pjpGL70w4Fk",[639,620],{"title":640,"path":641,"stem":642,"date":643,"type":636,"children":-1},"高通平台免解 BL 临时 Root 实战","/2026/20260320-1","posts/2026/20260320-1","2026-03-20 23:24:28",1775556257714]