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