html中看板娘添加,如何在自己开发的web中放入“看板娘”

这篇博客介绍了如何将看板娘这一ACGN次文化的萌属性应用到个人网站中,将其作为网页的装饰元素。通过下载特定文件并解压,选择所需的JavaScript文件,结合基础的web开发结构,将看板娘整合进网站。同时,创建CSS文件定制样式,并指导读者如何配置HTML以实现看板娘在网页右下角动态显示,跟随鼠标移动并响应交互的功能。
摘要由CSDN通过智能技术生成

什么是看板娘?

那就她了——>

97974b62d4fc

就是她~

看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一。简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义。看板(kanban)是日语特有的管理名词,其英文可以是“signboard”或者“visible record”。通常,看板是一张标签或卡片,放在透明颜料袋装内,或贴在零件上,或贴在盛装制品的容器上,还可以是流水线上各种颜色的小球或信号灯、电视图象等。

作为web开发者的绅士(死肥宅)们,怎么能拒绝一个这么可爱的妹子帮你看护你的网站呢!

好了下面就来简单介绍一下怎么把她放到你开发的网站里。

进去之后呢是这个页面

97974b62d4fc

网页网页

看见那个下载标志没,点击下载(没看见就是昨天**了眼花)

下载好了就是这个文件

97974b62d4fc

下载文件

然后用自己常用的方法进行解压(这不需要我教你吧)

97974b62d4fc

解压顺序左——>右

这个狗贼居然有两层压缩,反正最后解压出来的文档就是package文件夹了

让我们一起打开这个文件夹嗷

97974b62d4fc

package文件夹

这时候有人就会说了:wdnmd,这么多玩意,我怎么知道用哪个?

莫急,我一步一步给你说。

进入lib文件夹——>拿走下面四个经过标记的文件(复制走,别剪切,万一以后还有用)

97974b62d4fc

就是这四个文件啦

下面我简单弄一个基础的web开发结构,告诉你们怎么请出我们可爱的看板娘

首先建立一个web文件夹

97974b62d4fc

web文件夹

里面的目录结构是这样的

97974b62d4fc

目录结构

然后把刚刚复制的四个文件放入js文件夹

97974b62d4fc

js文件夹

接下来我们需要自己写一个css文件,我就将它命名为girl.css好了

97974b62d4fc

girl.css

它的代码如下:

#live2dcanvas {

border: 0 !important;

}

没错就是那么少

然后我们再建立一个看板娘.html文件,放在根目录下

97974b62d4fc

html

下面就是它的代码

我的看板娘

L2Dwidget.init({"display": {

"superSample": 2,

"width": 200,

"height": 400,

"position": "right",

"hOffset": 0,

"vOffset": 0

}

});

head里面就是一些简单的对文件的引用,稍微有点web开发知识都知道了。

好了,万事俱备,只欠打开浏览器了,让我们直接打开——看板娘.html

97974b62d4fc

你的网页

嘻嘻,可爱的女孩就出现在了你网页的右下角,嘿嘿,通过你的点击她还可以做出不同的表情,她的眼睛也是跟随你鼠标的移动而移动,可以说非常可爱了。你别乱点哦,即使要乱点,也要在周围没有人而且带上耳机的情况下,她会说话的(就是那些见不得人的新津话),哈哈开玩笑,总之是非常可爱了。

好了,这个教程就到这里结束!溜了~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
live2d-widget是一个可以在网页添加可爱的看板娘的网页插件。live2d-widget特性在网页添加Live2D看板娘。兼容PJAX,支持无刷新加载。 警告:本项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。你也可以在允许的范围内进行二次开发,这里有一些示例 demo.html ,展现基础效果 login.html ,仿NPM的登陆界面live2d-widget安装使用网页看板娘简短安装 只需要把下面3行代码放到页面,即可实现网页看板娘效果。(格式自己进行添加下即可) script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js" live2d-widget详细安装说明: 依赖Dependencies 本插件需要Font Awesome(v4 或 v5)图标支持,请确保相关样式表已在页面加载。以Font Awesome v4 为例,请在 加入: link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" 否则图标将无法正常显示。(如果网页已经加载了任何版本的Font Awesome,就不要重复加载了)使用Usage 将这一行代码加入或,即可展现出效果: script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js" 如果网站启用了PJAX,由于看板娘不必每页刷新,因此要注意将相关脚本放到PJAX刷新区域之外。 换句话说,如果你是小白,或者只需要最基础的功能,就只用把这一行代码,连同前面加载Font Awesome的一行代码,一起放到html即可。 对于用各种模版引擎(例如 Nunjucks,Jinja 或者 PHP)生成的页面,也要自行修改,方法类似,只是可能略为麻烦。以Hexo为例,需要在主题相关的ejs或njk模版正确配置路径,才可以加载。 但是!我们强烈推荐自己进行配置,否则很多功能是不完整的,并且可能产生问题! 如果你有兴趣自己折腾的话,请看下面的详细说明。Using CDN 要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为 script src="https://cdn.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js" 将此处的username 替换为你的 GitHub 用户名。为了使 CDN 的内容正常刷新,需要创建新的git tag 并推送至GitHub仓库,否则此处的 @latest 仍然指向更新前的文件。此外CDN本身存在缓存,因此改动可能需要一定的时间生效。Self-host 你也可以直接把这些文件放到服务器上,而不是通过CDN加载。 如果你能够通过ssh访问你的主机,请把整个仓库克隆到服务器上。执行: cd /path/to/your/webroot # Clone this repository git clone https://github.com/stevenjoezhang/live2d-widget.git 如果你的主机无法用ssh连接(例如一般的虚拟主机),请选择 Download ZIP,然后通过ftp等方式上传到主机上,再解压到网站的目录下。 如果你是通过 Hexo 等工具部署的静态博客,请在博客源文件(即 source)目录下,执行前述的 git clone 命令。重新部署博客时,相关文件就会自动上传到对应的路径下。为了避免这些文件被 Hexo 插件错误地修改,可能需要设置 skip_render。 这样,整个项目就可以通过你的服务器 IP 或者域名从公网访问了。不妨试试能否正常地通过浏览器打开autoload.js 和 live2d.min.js 等文件,并确认这些文件的内容是完整和正确的。 一切正常的话,接下来修改一些配置就行了。(需要通过服务器上的文本编辑器修改;你也可以先在本地完成这一步骤,再上传到服务器上
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值