给你的网站添加一个萌萌哒的Live2D看板娘

avatar

蘑菇

Never give up your dreams.
文章 评论 标签
89 516 63
最新回复
随便看看
2023 年 05 月 25 日
在Proxmox VE下开启vGPU - Tesla P4为例
2022 年 04 月 16 日
使用 Docker Buildx 构建支持多种系统架构的镜像
2019 年 09 月 10 日
在WordPress中使用Markdown编辑器写作
首页
/ 技术 / 正文

许多人对 Live2D 看板娘颇感兴趣，许多博客上都会有看板娘的身影。接下来，我们将为自己的博客添加一个 Live2D 看板娘，使其兼容 PJAX，完美适配 Sakura 主题。当然，它也可以适用于其他主题，但可能需要进行样式上的调整。

准备工作

确保应用支持 Font Awesome 4.7.0。请确认相关样式表已在页面中加载（如果网页中已经加载了 Font Awesome，则无需重复加载，Sakura 主题已内置支持，故这一步可跳过）。若需要添加，请在 <head> 中加入以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

项目

GitHub Repo: Fog-Forest/live2d

开工

默认版本

  1. 下载项目代码，将 live2d_default 文件夹放置到网站根目录中。waifu-tips.json 里包含触发内容，您可以根据需要进行修改。最后，在 footer.php 的 </body> 标签之前引用 autoload.js 文件，如下所示：

    <script src="/live2d_load/autoload.js"></script>
  1. 预览效果

少女前线版

  1. 下载项目代码。除了 live2d_default 之外，将其他目录放入您的站点根目录，waifu-tips.json 文件中可以根据需要修改触发内容。
  2. live2d/model_list.json 和 live2d/model 中包含加载的模型列表，您可以根据需要作出精简。

  3. 然后在您主题的 footer.php 文件中 </body> 标签之前引用：

    <script src="/live2d_girls/autoload.js"></script>
  1. 如需修改更多内容，请查看前两个项目的说明文档。
  2. 预览效果

补充说明

  • autoload.js 文件中的 apiPath: 指定了 Live2D API 接口，默认设置即可。如果您有其他接口，也可以进行修改。
  • autoload.js 文件中的 cdnPath: 是对象存储路径，需注意跨域问题，如不使用请将其注释掉。
  • JSON 配置（SDK 2）：请参考 Live2DViewerEX文档。

引用资料

Live2D
版权属于：蘑菇
本文链接：https://fairysen.com/287.html
作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
WordPress博客添加B站追番页面
« 上一篇
B站追番Q群机器人小萌 - 基于酷Q
下一篇 »
评论区
头像
    头像
    逝川
      

    感谢大佬，整了一天的看板娘，最后还是这个方法管用 {{dianzan}} （其实就是自己太菜了QAQ）

    头像
    茫
      

    女孩前线这个按照了步骤弄了之后，前两个按钮都不管用。QAQ

    头像
    2911614214
      

    大佬你好，我的live2d不知道为什么只有问候语，模型看不见，彷佛空气，请求帮助

    头像
    悠悠我心
      

    live2d人物设置隐藏 重新打开页面以后菜单栏还是显示live2d显示状态 但是live2d人物没有出现！设置hidden 以后控制台报错，但是刷新页面后live2d人物会出现

    头像
    KILLUA
      

    測試了,本地搭建也是沒有音樂播放上面的3個選項!

      头像
      蘑菇
        
      @KILLUA

      我这边调整你的样式，发现按钮的位置不太对，你把小工具关掉，在调整调整CSS看看

    头像
    KILLUA
      

    好的,我試試本地..

    头像
    KILLUA
      

    博主你好,我選用了 少女前線的全文件版本,但是我左邊欄目沒有HIDE SWITCH SAVE等選項,是還要設置那裡嗎??
    我的網站 aabbj.com 麻煩看看,感激!

      头像
      蘑菇
        
      @KILLUA

      原版是没问题的，可能CSS冲突了，或者你改过其他东西，你可以在原版主题看看有没有这个问题

        头像
        KILLUA
          
        @蘑菇

        我就是根據你網站改的文字,居中,網站運行時間,聲音特效,logo文字特效.文字TTF.沒有私下改過其他..
        看板件我就修改了那3個網站鏈接,插入頭部顯示..我的live2d沒有放在主題的文件夾裡面,我放在空間根目錄有影響嗎?

          头像
          蘑菇
            
          @KILLUA

          这无所谓的，只要能有文件不404就成，你建个本地测试环境看看是不是这样吧

    头像
    燚人
      

    嗯，是比之前快点了，终于弄好了，太感谢你了

    头像
    燚人
      

    可以了，就是有点慢

      头像
      蘑菇
        
      @燚人

      你把model目录和根目录的那个.json放到GitHub(文件不能大于50M)上，修改下autoload.js文件的CDN接口就快多了

    头像
    内河
      

    能不能写一期如何自制看板娘的教程呀

      头像
      蘑菇
        
      @内河

      https://github.com/fghrsh/live2d_api下载整个项目，把你要的Live2D模型放到Model目录，修改model_list.json内容，上传到自己的服务器，修改autoload.js中的live2d接口即可，细节看这个项目的说明

        头像
        燚人
          
        @蘑菇

        你好，这是什么问题
        https://cdn.jsdelivr.net/gh/xxxx/live2d_api/get/?id=1-46 403
        看板娘一直报403错误，是怎么回事

          头像
          蘑菇
            
          @燚人

          放到本地有问题吗？GitHub没有PHP环境，需要你从本地处理请求然后获取Github上模版的静态文件

            头像
            燚人
              
            @蘑菇

            那本地怎么处理请求?

              头像
              蘑菇
                
              @燚人

              你把项目放到自己的服务器上就好了呀

    头像
    Hrlni-hrlni.cn
      

    我用了一下可以显示，但是不会显示左边的切换和隐藏按钮

      头像
      蘑菇
        
      @Hrlni-hrlni.cn

      CSS的问题把文件下载到本地自己改下

        头像
        Hrlni-hrlni.cn
          
        @蘑菇

        可以说下css在哪嘛,我用的默认api版

          头像
          蘑菇
            
          @Hrlni-hrlni.cn

          https://github.com/Fog-Forest/live2d/blob/master/live2d_load/waifu.css
          那个.min是被我压缩过的CSS

        头像
        Hrlni-hrlni.cn
          
        @蘑菇

        我用QQ浏览器可以正常显示，但是谷歌就不行

          头像
          蘑菇
            
          @Hrlni-hrlni.cn

          移动端还是PC端，原版主题我测试是没有任何问题的

    头像
    某猫
      

    这个项目为何如此之眼熟，哈哈哈