暄风吹斋响苍玉,竹石相看便有情。提胡卢来沽美酒,终日撩人不住声。

Hexo博客利用live2d插件放置一个萌萌哒看板娘

前言

各位看官或许已经注意到,在我的博客右侧有一个萌萌哒看板娘。能在自己的博客上放上自己喜欢的动漫人物是不是很振奋人心呢!其实,这个看板娘利用了live2d技术,这项技术现在广泛应用于手游,桌面壁纸等领域,各大博客系统也都纷纷推出了或是第三方插件适配了live2d,本文给各位介绍下如何在Hexo博客里安装live2d插件,并展示看板娘。

插件地址

EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo!

安装

进入hexo博客根目录,使用以下命令安装hexo-helper-live2d插件:

1
npm install --save hexo-helper-live2d

试试 yarn add hexo-helper-live2d, 据说高能的yarn会比垃圾npm少很多麻烦呢。 Yarn

配置

配置页面

  1. 注入模式(使用此方法,看板娘会出现在所有页面上):

  2. 标签模式(使用此方法,看板娘只会出现在设置了标签的页面上):

##配置_config.yml文件

  1. 配置内容可以直接配置在Hexo的配置文件 _config.yml 中,也可以配置在主题的 Hexo根目录/themes/主题目录/_config.yml 文件中,但推荐配置在Hexo的配置文件中,防止更换主题后live2d失效。

  2. 基础配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
    enable: true # 开启live2d
    # 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
  3. 高级配置:

    用户自定义设置,建议小白玩家可以不必理会,高玩请随意,官方API地址:L2Dwidget | live2d-widget.js

模型

有许多方法来使用不同的模型

使用自己下载的模型

  1. 方式一(推荐使用):

    • 在您博客根目录下创建一个 live2d_models 文件夹
    • 在此文件夹内新建一个子文件夹
    • 将你的 Live2D 模型复制到这个子文件夹中,自有模型应当有一个 .model.json 文件 (例如 mymiku.model.json)
    • 将子文件夹的名称输入 _config.ymlmodel.use
  2. 方式二:

    • 您可直接输入相对于博客根目录的自定义路径到 model.use

    • 示例: ./wives/wanko

使用npm下载的模型

  1. 方式一:下载现有的npm资源
    • 官方提供了多款精美的模型,[点击查看]( )
    • 你需要先使用 npm install 模型的包名 来安装,然后将包名输入位于 _config.ymlmodel.use
  2. 方式二:发布你自己的模型包
    • 新建一个目录, 用你的Node环境执行 npm init,我们推荐您使用 live2d-widget-model-xxx 的包名
    • 再使用方式一来使用自己的模型

更多模型下载

本猿正在快马加鞭的整理优质资源中,敬请期待

-------------本文结束感谢您的阅读-------------
坚持原创技术及精品文章分享,您的支持将鼓励我继续创作!
0%