给你的网页加个二次元老婆吧

起因

最近准备写个blog,在网上找了许多好的页面参考(其实就是小抄一下)。在一个Typecho爱好者博客中找的了一个特别喜欢的主题(点此查看),于是我充分发挥鲁迅先生的拿来主义。copy copy copy !

但是在copy的过程中有很多问题。首先这个模板是一个基于PHP的主题,而我打算使用Django来做这个Blog。所以要对代码进行修改,所幸万变不离其宗,在转化为Django的过程还是很顺利的。很快雏形就有了,只是那只猫???

这货怎么来的???

有猫图

这个东西时有时没有,而且网站还会跳出一堆指向原站的连接,后来经过摸索,发现了这玩意怎么来的了。

开始

这只小猫其实是github上的一个开源项目(项目地址)。其实像我这样的半吊子,给码我也不会用。下载项目后不知道怎么加载到自己的Blog中,直接把作者提供的Demo中导入的文件下载,照着Demo的样子引入,结果用不了,控制台报了一推错。

但是原谅我真的没有在这个源码中找到L2Dwidget.min.js文件的影子。好吧,既然你的Demo中有L2Dwidget.min.js,我就直接引用你。TM结果东西还在出来了,这不禁使我反思为什么到本地就不能用了,源码中的lib文件夹下真的没有L2Dwidget.min.js的影子啊。
你看真没有
不放弃的我在网上点来点去找到了L2Dwidget.min.js
这么明显我居然才
我真是对我自己无语了,就在ghpages@4b846954->lib下,下意识的以为是src了,结果没找到。相比之前多了两个map文件和一个json文件。导入本地,结果还不能运行。

真的没办法了将有L2Dwidget.min.js文件的lib中所有文件复制到src下面没有L2Dwidget.min.js的lib目录下。结果成功了。不说了,整理步骤。

步骤

搭建环境

下载项目将ghpages@4b846954下lib中的文件复制到src的lib目录下,在项目中引入L2Dwidget.min.js(src->lib->L2Dwidget.min.js)

 <script src="{% static 'blog/plugins/live2dwidget/lib/L2Dwidget.min.js' %}"></script>

我用的是Django所以有 **{% static ‘path’ %}**的写法,正常写path就可以了。

导入模型包

下载作者的live2d-widget-models项目,将项目中packages复制到自己的项目中。

packages中的每一个文件都是一个模型

packages目录

这里以shizuku模型为例。进入模型目录->assets,找到shizuku.model.json
模型assets目录
这个文件就是选择模型的关键

创建对象

在代码中粘贴,model_name为模型目录名字,其中jsonPath是选择模型的依据。

var model_name = "shizuku";
L2Dwidget.on('*', (name) => {
    console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
}).init({
    "model": {
        jsonPath: "/static/blog/plugins/live2dw-models/packages/live2d-widget-model-"+model_name+"/assets/"+model_name+".model.json",
        "scale": 1
    },
    "display": {
        "position": "right",
        "width": 200,
        "height": 400,
        "hOffset": 50,
        "vOffset": -50
    },
    "mobile": {
        "show": false, // 移动设备的显示
        "scale": 0.3,//移动设备的缩放
    },
    "react": {
        "opacityDefault": 0.7,
        "opacityOnHover": 0.2
    },
    "dialog": {
        // 开启对话框
        enable: true,
        script: {
            // 每空闲 10 秒钟,显示一条一言
            // 'every idle 10s': '$hitokoto$',
            // 当触摸到星星图案
            // 'hover .star': '星星在天上而你在我心里 (*/ω\*)',
            // 当触摸到角色身体
            'tap body': '你摸你妈呢!',
            // 当触摸到角色头部
            'tap face': '人家已经不是小孩子了!'
        }
    }
});

总结

到此,模型就可以在你的页面上活蹦乱跳了。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很多博客都有live2D的萌萌哒看板娘,手痒,所以整理了一套HTML5可以用的,注释换一下就可以用啦,最好是放到线上服务器上使用。 L2Dwidget.init({ "model": { //萌娘 jsonPath: "model/live2d-shizuku/assets/shizuku.model.json", //短发女生 //jsonPath: "model/live2d-epsilon2_1/assets/Epsilon2.1.model.json", //双马尾女仆 // jsonPath: "model/live2d-haru_1/assets/haru01.model.json", //双马尾学生装 // jsonPath: "model/live2d-haru_2/assets/haru02.model.json", //小可爱(男) // jsonPath: "model/live2d-haruto/assets/haruto.model.json", //小可爱(女) // jsonPath: "model/live2d-koharu/assets/koharu.model.json", //傲娇学生装女 // jsonPath: "model/live2d-hibiki/assets/hibiki.model.json", //红衣长发女生 // jsonPath: "model/live2d-izumi/assets/izumi.model.json", //黄发制服可爱女生 // jsonPath: "model/live2d-z16/assets/z16.model.json", //黄发女生 // jsonPath: "model/live2d-unitychan/assets/unitychan.model.json", //可爱白猫 // jsonPath: "model/live2d-tororo/assets/tororo.model.json", //可爱黑猫 // jsonPath: "model/live2d-hijiki/assets/hijiki.model.json", //初音未来 // jsonPath: "model/live2d-miku/assets/miku.model.json", //小帅哥 //jsonPath: "model/live2d-chitose/assets/chitose.model.json", //持剑绿衣剑士 // jsonPath: "model/live2d-gf/assets/Gantzert_Felixander.model.json", //科技感短发小女孩 // jsonPath: "model/live2d-ni-j/assets/ni-j.model.json", //狐妖 // jsonPath: "model/live2d-nico/assets/nico.model.json", //绿发女生 // jsonPath: "model/live2d-tsumiki/assets/tsumiki.model.json", "scale": 1 }, "display": { "superSample": 2, "position": "top", "width": 150, "height": 300, "hOffset": 0, "v
以下是一个简单的二次元风格的网页示例,你可以参考其中的HTML和CSS代码: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二次元网页</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>二次元网页</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">分类</a></li> <li><a href="#">排行榜</a></li> <li><a href="#">关于</a></li> </ul> </nav> </header> <main> <section> <h2>最新更新</h2> <ul> <li> <a href="#"> <img src="img/1.jpg" alt=""> <p>标题1</p> </a> </li> <li> <a href="#"> <img src="img/2.jpg" alt=""> <p>标题2</p> </a> </li> <li> <a href="#"> <img src="img/3.jpg" alt=""> <p>标题3</p> </a> </li> </ul> </section> <aside> <h2>分类</h2> <ul> <li><a href="#">动漫</a></li> <li><a href="#">漫画</a></li> <li><a href="#">游戏</a></li> <li><a href="#">虚拟偶像</a></li> </ul> </aside> </main> <footer> <p>©2021 二次元网页</p> </footer> </body> </html> ``` CSS代码: ```css * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } header { background-color: #f5f5f5; padding: 20px; display: flex; justify-content: space-between; align-items: center; } header h1 { font-size: 32px; font-weight: bold; } nav ul { list-style: none; display: flex; align-items: center; } nav li { margin-left: 20px; } nav a { text-decoration: none; color: #333; } nav a:hover { color: #f90; } main { display: flex; justify-content: space-between; margin-top: 20px; } section { width: 70%; } section h2 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } section ul { list-style: none; display: flex; justify-content: space-between; } section li { width: 30%; } section img { width: 100%; } section p { margin-top: 10px; text-align: center; } aside { width: 30%; background-color: #f5f5f5; padding: 20px; } aside h2 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } aside ul { list-style: none; } aside li { margin-bottom: 10px; } aside a { text-decoration: none; color: #333; } aside a:hover { color: #f90; } footer { background-color: #ccc; padding: 20px; text-align: center; } ``` 这个网页包括了一个头部、一个主要内容区和一个底部,头部包含网站名称和导航菜单,主要内容区包含最新更新和分类两个部分,底部包含版权信息。你可以根据自己的需要修改HTML和CSS代码,制作出你自己的二次元网页
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值