Hexo博客NexT主题美化之新增看板娘(能说话、能换装)

效果图:

image


教程:

  • 小白水平:

    hexo的官方是支持看板娘的,已经封装好了插件,但只是模型,不能说话、不能换装、功能较少。

    1. 安装模块,如下:

      1
      npm install --save hexo-helper-live2d
    2. 站点配置文件主题配置文件 中新增如下内容:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      # Live2D
      ## https://github.com/EYHN/hexo-helper-live2d
      live2d:
      enable: true
      # enable: false
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      # scriptFrom: jsdelivr # jsdelivr CDN
      # scriptFrom: unpkg # unpkg CDN
      # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
      tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
      debug: false # 调试, 是否在控制台输出日志
      model:
      use: live2d-widget-model-wanko # npm-module package name
      # use: wanko # 博客根目录/live2d_models/ 下的目录名
      # use: ./wives/wanko # 相对于博客根目录的路径
      # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
      display:
      position: right
      width: 150
      height: 300
      mobile:
      show: true # 手机中是否展示
    3. 小白水平,效果如下:
      image

  • 大神水平:

    大神作品,功能齐全。能说话、能换装、能玩游戏、能拍照、还能自定义。

    1. 下载 张书樵大神的项目,解压到本地博客目录的 themes/next/source 下,修改文件夹名为 live2d-widget,修改项目中的 autoload.js 文件,如下:

      1
      const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

      改为

      1
      const live2d_path = "/live2d-widget/";
    2. /themes/next/layout/_layout.swig中,新增如下内容:

      1
      <script src="/live2d-widget/autoload.js"></script>
    3. 主题配置文件 中,新增如下内容:

      1
      2
      live2d:
      enable: true
    4. 想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.jswaifu-tips.jsonwaifu.css

    5. 大神水平,效果如下:
      image

后记

注意:大神的项目需要 jQueryfont-awesome 支持。我的项目因为其他插件需要,所以在很早之前就下载这两个文件到本地关联了,因此不需要再重复添加。若是没有添加依赖的小伙伴,可以在页面中加载。例如在 <head> 中加入:

1
2
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

或是像我一样,将这两个文件下载到本地,再关联。

因为最近工作比较忙,没有时间更新博客。由于我的疏忽,漏掉了后记中比较关键的文件依赖和大神项目文件夹的重命名,导致很多小伙伴无法实现大神项目的效果。我感到非常抱歉,同时,非常感谢留言的大神们对本博客的批评指正,后期我会提升博客质量和更新频率。再次感谢!


-------------已经触及底线  感谢您的阅读-------------
潘高 wechat
公众号:潘高陪你学编程
如果你觉得这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。

本文标题:Hexo博客NexT主题美化之新增看板娘(能说话、能换装)

文章作者:潘高

发布时间:2019年02月23日 - 23:10:22

最后更新:2019年09月25日 - 23:15:19

原始链接:https://blog.pangao.vip/Hexo博客NexT主题美化之新增看板娘(能说话、能换装)/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。