Live2D:为你的hexo博客添加萌萌哒看板娘

前言:

19号我就要上学了,以后可能会突然失踪一段时间,9月1号正式开学后,我会恢复到2周一更新的频率。在这里对所有关注我博客的人说声抱歉。

我寥寥无几的评论区里突然有人问我右下角的看板娘是怎么做到的:

wpaladins •*********@163.com •2019-08-13 13:33:44
你网站的各种东西确实很炫,只是打开你的博客之后我垃圾mba的风扇就一直转个不停😂我想知道左下角的妹子怎么搞?😁

这让我感动了一分钟….

本来我就有写这一篇文章的感觉,只是没有这个打算,既然您问了,那我就写吧。

live2D for hexo 作者:原作大大的博客

材料:

简单开始:

安装Live2D:

请先cd到你的hexo安装目录下!

如果你安装过低版本的Live2D,那先运行:npm uninstall hexo-helper-live2d
安装: npm uninstall hexo-helper-live2d

注意
中国用户由于显而易见的原因,速度超级慢,具体解决方案前往我早年写的文章 查看

安装完成之后,就会在博客的根目录package.json文件中存在依赖,同时出现node_moduels文件夹

选择模型:

原生模型:

  • Epsilon2.1
  • Gantzert_Felixander
  • haru
  • miku
  • ni-j
  • nico
  • nietzche
  • nipsilon
  • nito
  • shizuku
  • tsumiki
  • wanko
  • z16
  • hibiki
  • koharu
  • haruto
  • Unitychan
  • tororo
  • hijiki

额外模型:
可以前往summerscar大佬的Github查看。

模型预览:
进入https://summerscar.me/live2dDemo/,在modelName:键入模型名即可。

安装模型:

原生模型: 在hexo文件夹根下键入npm install --save live2d-widget-模型名即可。
额外模型: 把文件夹下载到node_moduels下即可。

配置:

打开站点配置文件,在末尾填上:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
live2d:
model:
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
use: live2d-widget-model-tororo // 下载的动画模型名称
display:
superSample: 2
width: 120
height: 200
position: left // 模型在网页显示位置,left为左,right为右
hOffset: 20
vOffset: 50
mobile:
show: true // 移动设备是否显示,true则显示,false则不显示
scale: 0.5
react:
opacityDefault: 0.7
opacityOnHover: 0.2

接着hexo server看看吧!

进阶:

你看到别人的的看板娘会说话,能拍照,还能打游戏?
那你也能!

警告:
这会严重拖慢你的网站加载速度,并且功能比较鸡肋,并不建议添加.如果你的博客建立在Github Pages上,添加会造成加载困难以致无法加载!

由于我没有使用进阶版,本文以下部分转载来自https://blog.csdn.net/qq_39610915/article/details/90679768

使用大神定制作品
https://github.com/stevenjoezhang/live2d-widget

按照教程
https://blog.pangao.vip/Hexo博客NexT主题美化之新增看板娘(能说话、能换装)/
设定了一番
但网页中并没有出现看板娘
如果你和我一样是纯新手,而且完全按照上述教程进行,那么恭喜你,看板娘一定不会出现!
这是为什么呢?
首先我们去查看这个项目的说明

依赖 Dependencies

本插件需要jQuery和font-awesome支持,请确保它们已在页面中加载,例如在<head>中加入:
jQuery and font-awesome is required for this plugin. You can add this to <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">

否则无法正常显示。(如果你的网页已经加载了jQuery,就不要重复加载了)

而教程中并没有指出这一点,因此缺少依赖的博客,一定不会加载出看板娘。
其次是autoload.js的路径设置问题。

正确的步骤如下

第一步

下载大神项目,解压到本地博客目录的themes/next/source下,修改autoload.js文件,将其中

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

改为

1
const live2d_path = "/live2d/";

autoload.js中的注释的绝对地址指的是,将资源打包放到hexo/theme/next/source中后,以hexo/theme/next/source为根目录(/)的绝对路径,一般我们下载下来的是master分支,那么修改路径就是/live2d-widget-master/xxx.jsautoload.js的最后一个函数initWidget(“/live2d-widget-master/“, “https://api.fghrsh.net/live2d”); 中的第二个参数不要变,是一个后台api。我选择将文件夹重命名为“live2d”,因此按照如上方式修改。

第二步

/themes/next/layout/_layout.swing中,<body>标签中新增如下内容,########为你自己的github账号:

1
<script src="https://########.github.io/live2d/autoload.js"></script>

<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"/>

第三步

在主题配置文件_config.yml 中,新增如下内容:

1
2
live2d:
enable: true

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

最终效果如图:

后端API地址:
https://github.com/fghrsh/live2d_api

特别提醒!!!!!!
根据原作者反映,2018年十月,使用人数过多曾让该api暂时停止提供服务,更稳妥的方法是自建api。


本文标题:Live2D:为你的hexo博客添加萌萌哒看板娘

文章作者:CYF

发布时间:2019年08月15日 - 14:09:51

最后更新:2019年08月15日 - 15:47:34

原始链接:https://blog.cyfan.ga/2019/08/15/Live2D:为你的hexo博客添加萌萌哒看板娘/

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

0%