• 保存到桌面加入收藏设为首页
当前位置 当前位置:首页 > 网站源码

给网页添加一个可爱的小萝莉

2019-10-19 07:30:31风度风度娱乐网11530
内容摘要:鼠标进入网页,小萝莉会根据鼠标位置而发生变化,此效果是canvas来实现的原项目https://github.com/EYHN/hexo-helper-live2d需要给自己网站添加,复制下方代码即可。小萝莉可能会遮挡网页,但是不会影响网站的点击事件,放心大胆的加(我自己给萝莉添加了点透明度,可要可不要)安装Hexo安...

给网页添加一个可爱的小萝莉

鼠标进入网页,小萝莉会根据鼠标位置而发生变化,此效果是canvas来实现的

原项目https://github.com/EYHN/hexo-helper-live2d

需要给自己网站添加,复制下方代码即可。

小萝莉可能会遮挡网页,但是不会影响网站的点击事件,放心大胆的加

(我自己给萝莉添加了点透明度,可要可不要)

安装

Hexo

安装模块:

npm install --save hexo-helper-live2d

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

仍在使用老版本?
  • 如果您想使用最近的注入模式(将会在每个页面上显示):

请从 layout/layout.ejs 或 layout/_layout.swig 中删掉 </body> 前的 {{ live2d() }} 或 <%- live2d() %>.

  • 如果您想使用旧的标签模式(仅替换 live2d 标签):

请保留{{ live2d() }} 或 <%- live2d() %>, 并将 tagMode 设置为 true.

我们推荐您使用 npm install --save hexo-helper-live2d@3.x 来强制安装最新版本.

标签模式

请在您想插入的页面的 </body> 前插入 {{ live2d() }}(swig) 或 <%- live2d() %>(ejs). 将 tagMode 设置为 true, 然后插件将只会在拥有live2d标签的页面出现.

其他的, for jekyll, wordpress, etc

参阅 live2d-widget.js 仍在编写中.

配置

请向Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.

示例:

live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-wanko display: position: right width: 150 height: 300 mobile: show: true react: opacity: 0.7

详细的设置

设置分为helper特有的和公共的, 你需要把他们合并放到 _config.yml 中.

helper特有

# 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

General Settings

最近由于正在积极开发, 可能会有所变动. 不过安啦, 不会有太太太大幅度的修改.

参阅 live2d-widget.js API

示例:

# Live2D ## https://github.com/xiazeyu/live2d-widget.js ## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init live2d: model: scale: 1 hHeadPos: 0.5 vHeadPos: 0.618 display: superSample: 2 width: 150 height: 300 position: right hOffset: 0 vOffset: -20 mobile: show: true scale: 0.5 react: opacityDefault: 0.7 opacityOnHover: 0.2

模型

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

a. live2d_models子目录名称

  1. 在您博客根目录下创建一个 live2d_models 文件夹.

  2. 在此文件夹内新建一个子文件夹.

  3. 将你的 Live2D 模型复制到这个子文件夹中.

  4. 将子文件夹的名称输入 _config.yml 的 model.use 中.

示例

你的模型叫 mymiku.

在博客根目录 (应当有 _config.yml 、sources 、 themes ) 新建名为 mymiku 的子文件夹.

将模型复制到 /live2d_models/mymiku/ 中.

现在, 在这里应当有一个 .model.json 文件 (例如 mymiku.model.json)

在 /live2d_models/mymiku/ 中.

将 mymiku 输入到位于 _config.yml 的 model.use 中.

b. 相对于博客根目录的自定义路径

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

示例: ./wives/wanko

c. npm 模块名

使用现有的

我们有许多现有的模型, 来看看

点我如果你不想跳转
  • 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

你需要先使用 npm install 模型的包名 来安装,

然后将包名输入位于 _config.yml 的 model.use 中.

发布你自己的模型包

  • 新建一个目录, 用你的Node环境执行 npm init, 我们推荐您使用 live2d-widget-model-xxx 的包名.

  • 在刚刚创建的目录下创建 assets 子目录, 把你的模型放进去.

示例:

live2d-widget-model-wanko

  • 使用 npm publish 来发布.

  • 然后使用 npm install --save live2d-widget-model-xxx 来安装,

然后你就可以通过向 model.use 键入包名 (live2d-widget-model-wanko) 来使用了.

d. 你的CDN

如果你是没有CDN会死星人,直接将 .model.json 的url地址输入 model.use.


干杯!

附件下载

标签:可爱  一个  网页  添加  爱的  
   相关评论

本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场

意见反馈/侵权投诉/请联系邮箱:1538926967@qq.com QQ:1538926967

风度娱乐网 All right reserved. 版权所有

  浙江公网安备85489784563548号  浙ICP备23480890号
Powered by OTCMS V3.85