title: Hexo 添加 Live2D看板娘

二次元什么的最喜欢了[大好きです]

准备

项目地址

live2d模型

部分模型预览

开始

首先进入Hexo博客根目录安装live2d插件

  1. $ npm install --save hexo-helper-live2d

接着,修改根目录下的 _config.yml 文件

添加自定义配置(下面提供我的配置做参考):

  1. ## live2d
  2. live2d:
  3. enable: true
  4. scriptFrom: local
  5. pluginRootPath: live2dw/
  6. pluginJsPath: lib/
  7. pluginModelPath: assets/
  8. tagMode: false
  9. debug: false
  10. model:
  11. use: live2d-widget-model-z16
  12. scale: 1
  13. hHeadPos: 0.5
  14. vHeadPos: 0.618
  15. display:
  16. superSample: 2
  17. width: 150
  18. height: 300
  19. position: right
  20. hOffset: 0
  21. vOffset: -20
  22. mobile:
  23. show: true
  24. scale: 0.5
  25. react:
  26. opacityDefault: 0.7
  27. opacityOnHover: 0.2

细心一点肯定能发现 model.use 后的字符串就是看板娘模型的名字

现在你就可以进入模型预览 挑选自己喜欢的看板娘啦

现在假设你所挑选的看板娘也是z16

你有几种方式让看板娘进驻你的Hexo博客,这里只提供最方便的一种(命令安装)。

进入博客根目录输入以下命令:

  1. $ npm install live2d-widget-model-z16

再将 _config.yml 中 model.use检查 一遍确保与你安装的名称一致

到此处看板娘进驻成功

以下是Hexo常规操作,熟悉的小伙伴就不用继续了

  1. $ git add .
  2. $ git commit -m "添加看板娘"
  3. $ Hexo s # 本地查看

打开浏览器输入127.0.0.1:4000 进入博客页面查看

Hexo 添加Live2D看板娘的更多相关文章

  1. Hexo添加Live2D看板娘+模型预览

    文章目录 添加和注意事项 模型预览 live2d-widget-model-chitose live2d-widget-model-epsilon2_1 live2d-widget-model-gf ...

  2. 网页添加 Live2D 看板娘

        我是先参考别人的[点击跳转]博客来做的.不过我发现网上很多人都没有把一些细节写出来,用了别人那里下载的文件后里面的一些跳转链接就跳到他们的页面了.所以我这里写一写如何修改这些跳转链接吧. 1. ...

  3. 网页添加Live2D看板娘简易教程

    看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想在自己的博客上放一个呆萌的看板娘非 ...

  4. 网页添加Live2D看板娘

    看板娘简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想放一个呆萌的看板娘在博客上 js <script type="text/j ...

  5. 在网页添加 Live2D 看板娘

    只需要将以下代码粘贴到 标签中即可 <!--看板娘--> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jqu ...

  6. live2d添加网页看板娘

    最近逛博客,发现好多博主都加了网页看板娘,简直可爱到血槽空了,赶紧学习模仿改造了一下~ 给博客园的博客也添加了看板娘!!就在右边~喜欢的请打赏我~ 不过因为移植过来比较复杂,就不出教程啦~记得多来调教 ...

  7. 文章中左下角的妹子live2d看板娘

    关键词: live2d看板娘 自行搜索即可 攻略很多

  8. Vue最简单的实现网页Live2D看板娘

    Live2D看板娘 前言 二.使用步骤 1.引入 2.设置样式 结尾(后续更新更强的配置看板娘~) 前言 最近想给自己的网页添点新花样,然后就想到了别人的网站都有一些看板娘的玩意儿,看着很舒服,鉴于自 ...

  9. 博客美化—添加萌萌的live2D看板娘(不能再简单了)

    看着很多博客都有live2D的萌萌哒看板娘,我闲着有空说干就干. 从参考博客的附件中下载资源文件 waifu.css waifu-tips.js live2d.js flat-ui.min.css// ...

随机推荐

  1. 添物不花钱学JavaEE(基础篇)-XML

    XML(Extensible Markup Language) XML在日常工作中经常用到,必须有个了解,不过认识一下即可,不要太浪费时间.实际用到 参考图书 <XML入门经典>大而全,不 ...

  2. 【ZJOI2017 Round1练习&BZOJ5354】D7T3 room(DP)

    题意: 思路: 写了两种版本 考场版本 ..,..]of longint; t:..,..]of longint; n,m,i,j,k,oo,ans,d1:longint; function min( ...

  3. 2014ACM/ICPC亚洲区西安站现场赛 F color(二项式反演)

    题意:小球排成一排,从m种颜色中选取k种颜色给n个球上色,要求相邻的球的颜色不同,求可行的方案数,答案模1e9+7.T组数据,1<= n, m <= 1e9, 1 <= k < ...

  4. Spring Boot实现多个数据源教程收集(待实践)

    先收集,后续实践. http://blog.csdn.net/catoop/article/details/50575038 http://blog.csdn.net/neosmith/article ...

  5. [转]Attribute在.net编程中的应用

    Attribute在.net编程中的应用(一) Attribute的基本概念 经常有朋友问,Attribute是什么?它有什么用?好像没有这个东东程序也能运行.实际上在.Net中,Attribute是 ...

  6. andorid自己定义ViewPager之——子ViewPager滑到边缘后直接滑动父ViewPager

    近期的项目中,有一个需求要用ViewPager中嵌套ViewPager去实现整个效果.没做不论什么处理做出来后,仅仅能不停的滑动子ViewPager,父ViewPager就无法滑动了,这样肯定是不满足 ...

  7. c++命令提示符窗体下打印指定大小的菱形代码

    c++命令提示符窗体下打印指定大小的菱形代码 VS2010下,新建空项目.加入源文件,将代码粘贴进去就能够了. 通过改maxRows值的大小,能够控制菱形的大小 #include <stdio. ...

  8. png图片解码

    PNG.可移植网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的"PNG's Not GIF",是一种位图文件(bitmap ...

  9. 改动MyEclipse行数的颜色

    改动MyEclipse行数的颜色 1.未改动前.行数的颜色 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6 ...

  10. Razor基础,视图里如何调用controller里的函数

    1.单行代码书写 @代码 2.多行代码书写 @{ //@加个大括号就可以在里面写C#代码了. C#代码第一行 C#代码第二行 } 3.Razor模板引擎会自动判别代码块,但是当代码存在二义性的时候,可 ...