在查找资料的偶然间,我发现一个博客上有非常可爱的Live 2D模型,当时我就被打动了,马上开启审查元素,试图找出这个Live 2D模型的信息,可是找了半天没找到。最后通过截图->谷歌图片的方式,终于一层一层的找到了相关资料,我正好有一个Hexo博客,所以今天就来在博客上添加一波Live 2D模型!

首先,安装npm包:

npm install --save hexo-helper-live2d

然后在hexo的配置文件_config.yml中添加如下配置,详细配置可以参考文档:

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsedebug: falsemodel:use: live2d-widget-model-shizukudisplay:position: rightwidth: 150height: 300mobile:show: true

然后下载模型,模型名称可以到这里参考,一些模型的预览可以在这里。

npm install live2d-widget-model-shizuku

所有模型列表如下:

  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

下载完之后,在Hexo根目录中新建文件夹live2d_models,然后在node_modules文件夹中找到刚刚下载的live2d模型,将其复制到live2d_models中,然后编辑配置文件中的model.use项,将其修改为live2d_models文件夹中的模型文件夹名称。

一切就绪之后,用hexo server命令启动服务器,稍等一下就可以看到右下角出现了一个可爱的萌萌哒的妹纸!本来录了一个GIF,可惜上传上来变成了PNG格式……想看动态图的话只能直接看我的博客了,不过因为所有东西都在Github上托管的原因,可能Live2D不能马上加载出来。

live2d

在Hexo博客上添加可爱的Live 2D模型相关推荐

  1. hexo博客中添加categories分类

    title: hexo博客中添加categories分类 date: 2020-04-01 16:45:16 tags: hexo categories: 学习 方法如下: 在根目录下scaffold ...

  2. 如何在自己搭建的hexo博客上发布文章

    1.选择一款Markdown编译器编写文章(以下步骤以csdn为例): 2.编写文章:注册账号登录进去,点击:头像-管理博客,进入文章管理页面,点击左上角的"Markdown编辑器" ...

  3. 如何在个人博客上添加自己的备案信息

    如何在个人博客上添加自己的备案信息 即wp如何修改footer.php,添加中文备案信息 首先找到你的主题主页,然后在主题里找到footer.php 使用vim footer.php 修改 由于大家可 ...

  4. 《WEB开发-HEXO博客搭建》第3章 Hexo博客域名添加

    笔者博客地址 Hexo官方:https://hexo.io/ Hexo官方(中文):https://hexo.io/zh-cn/ 本章参考视频链接 前文笔者使用Hexo和GitHub搭建个人博客空间, ...

  5. hexo博客中添加音乐播放器

    1. 简介 本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤 在网易云音乐中打开你想要插入的音乐页面,点击 生成外联播放器. 在网页中 ...

  6. 在自己博客上添加自己的“微博”栏目

    大婶向左不送,新手向右请进. CSDN支持用户自定义博客界面,添加博客栏目.今天介绍给大家如何在博客左侧添加微博栏目,优点是:欣赏你的博文时也可以关注到你的最新微博状态并可以选择关注. 实现效果如下: ...

  7. HEXO博客系统添加搜索功能

    Hexo 可以通过接入第三方搜索引擎来为博客添加搜索功能.这里给出一种基于 Algolia 搜索引擎的实现方式. 流程 Algolia 是一家搜索解决方案提供商,提供强大的搜索服务和 API 接口.在 ...

  8. 如何在博客上添加小游戏【原创】

    个人中心->博客管理->博客装扮->首页排版->添加模块->自定义->新建自定义工具,然后窄,中,宽自己选择.输入模块标题,然后把源码复制到下面的方框中,确定后完成 ...

  9. hexo博客首页添加网易云音乐

    效果图 实现方法 1.进入网易云音乐,选择一首歌,点击生成外链播放器,将选中代码复制 1.进入如下目录D:\blog\themes\yilia\layout_partial(不同主题的名字不同,这里我 ...

最新文章

  1. Django入门之开发环境搭建1.1
  2. JavaWeb学习笔记——jsp内置对象
  3. 使用Windows上SourceInsight工具建立分析Linux下uboot源代码project
  4. instant.now时区不正确_Centos8如何更改时区
  5. 面向云原生的混沌工程工具-ChaosBlade
  6. 何亚明:Facebook的工具文化和多媒体QoE
  7. s:property=a value=/取的s:debug/s:debug中的value stack中的属性值
  8. adbe Air/flash swf中不能正常显示系统字体问题的解决方案
  9. java 发送邮件(带附件)
  10. 限时看!阿里、华为数据结构面试必考题!
  11. 【论文解读】VDN( Variational Denoising Network )变分去噪网络
  12. java五子棋程序_Java五子棋游戏
  13. S MT 精密电阻 对照 表
  14. 为什么很多开发都要转测试....详谈....
  15. Java 使用OpenCV进行颜色识别
  16. 删除Android空行
  17. Refseq : accession id to taxonomy lineage.
  18. 2020最后一天 || 时间相关单光子计数技术的原理和优点
  19. javax.el.PropertyNotFoundException:类型[com.ex.spring.entity.Dept]上找不到属性[dNo]
  20. 2017京东校招面试回忆 已成功拿到offer

热门文章

  1. Java小白踩坑录 - Shadowing Obscuring 揭秘
  2. 博后招募 | 广州国家实验室闵明玮课题组诚聘博士后、副研究员和研究实习员...
  3. MobaXterm如何修改字体
  4. 南安普顿大学计算机排名2019,南安普顿大学2019THE世界大学排名最新排名第118
  5. 建筑学专业申请计算机研究生吗,细说德国研究生申请之建筑学硕士
  6. 汉语言专家级C1,汉语言文学专业审核(文科生均可参考)
  7. mars老师Java教程百度网盘,你一定不能错过
  8. IE文档模式的切换,Quirks模式
  9. Lunix文件重命名
  10. SQL中实用的小技巧