• 博客添加动态动漫妹子


    一、效果图

    相信从事技术开发的朋友们,都有自己的博客。

    今天我们来讲讲如何让自己的博客增加一点色彩。

    我们来看一张效果图:

     右下角有个很乖巧的动漫妹子,鼠标移动,妹子会摇头晃脑~

    集成其实很简单,这是一种2D技术,实现方式有挺多中的,业界有比较多的方案,今天我们讲讲L2Dwidget。

    博客园、hexo加入这个集成的效果其实很简单的。

    下面我们讲讲如何在博客里面引入这动漫妹子模型:

    二、博客园添加Live 2D模型

    我们在设置找到“博客侧边栏公告(支持HTML代码) (支持 JS 代码)”这项,然后加入以下代码:

    <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
    <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
    
    <script type="text/javascript">
    L2Dwidget.init({
          "display": {
            "superSample": 2,
            "width": 200,
            "height": 400,
                 "position": "right",
                     "hOffset": 0,
            "vOffset": 0
              }
         });
    </script>

    这样我们就看到这个漫画妹子模型来。

    除了这个妹子以外,还有其他的模型,22款随君采。

    那么如何使用其他模型呢?具体操作如下:

    在 使用L2Dwidget.init初始化的时候,里面增加一个key为model,model对象传入key为jsonPath、scale,然后加上对应的值就可以啦,具体代码如下:

    "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
                "scale": 1
            },

    jsonPath的值对应的是这个模型json的地址,

    相应链接: https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json

    例如想用:2D模型全名称: live2d-widget-model-koharu 模型:koharu

    链接如下:https://unpkg.com/browse/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json

    【Tip: 选自己喜欢的模型就可以啦~】

    22款模型名称:

    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

    22款模型效果图地址如下:

    https://huaji8.top/post/live2d-plugin-2.0/

    三、Hexo博客添加Live 2D模型

    这里的安装步骤稍微多了几步,具体操作如下: 

    1、安装模块

        在hexo根目录执行命令

    # npm install --save hexo-helper-live2d
    2、下载模型
    # npm install live2d-widget-model-hibiki

    解析:npm install 模型名字

     

    3、增加配置

    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      tagMode: false # 标签模式, 是否仅替换 live2dtag标签而非插入到所有页面中
      log: false 
      model:
        use: live2d-widget-model-wanko
      display:
        position: right
         150
        height: 300
      mobile:
        show: true # 是否在移动设备上显示
      react:
        opacity: 0.7

    这里的model,use模型名字选中自己喜欢的即可。

    详细配置地址:https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init

    github链接地址:https://github.com/EYHN/hexo-helper-live2d

    四、结语

        本篇分享到这里就结束啦,给朋友们推荐一个前端公众号,里面都是前端技术干货。 

     
  • 相关阅读:
    jqueryUI弹出框问题
    spring data jpa分页
    解决eclipse编辑js和html卡的问题
    web.xml添加编码过滤器
    Apache SolrCloud安装
    搭建zookeeper集群
    html页面读取PDF小案例
    .NET 使用Process调用7_zip解压文件
    .NET 中三种正确的单例写法
    Git 笔记
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/12214618.html
Copyright © 2020-2023  润新知