Live2D&Bilibili

发布于 2020-02-12  30 次阅读


最近由于所有人都知道的原因,只能在家里面蹲局子。当然也不能一直坐着没事干,所以我在Bilibili上听了点课(我感觉自己已经膨胀到听论文怎么写了)

有没有感觉Bilibili的Live2d和我的很像?

因为我的模型是在Github上找到的,而我现在才知道原来就在直播页上

既然有Live2d就肯定能找到模型了

当然,不得不提下藏在注释里面的彩蛋

[网页编码彩蛋]关于B站(几个)网页源代码里的玩意

顺便找到了Bilibili前端的Coder: https://space.bilibili.com/141042/

由于我Clone的源码有段时间没更新了,所以拜年祭时候出现的Live2d模型还没爬下来。

Github:https://github.com/EYHN/hexo-helper-live2d

根据README提供的帮助,我们可以有这几种办法不依赖别人自行导入模型:

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 模块名

使用现有的

我们有许多现有的模型, 来看看点我如果你不想跳转

你需要先使用 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.

当然,还有些人发现在手机等移动端上看不到Live2d是怎么回事

因为移动端的看板娘没有什么实际作用,但又占用屏幕过多,所以单独禁用移动端的显示了。

原文: http://www.seavia.com/wordpress/wp_is_mobile.html

WordPress自从3.4版本后就引入了移动判断函数wp_is_mobile(),这个函数在wp-includes文件夹下的vars.php中,我们可以对其修改一下,让它涵盖更多的移动设备检测功能!

wp_is_mobile()原函数

在123行可以找到下面的代码,代码返回的是一个布朗值$is_mobile

function wp_is_mobile() {
 static $is_mobile;
if ( isset($is_mobile) )
 return $is_mobile;
if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
 $is_mobile = false;
 } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
 || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
 $is_mobile = true;
 } else {
 $is_mobile = false;
 }
return $is_mobile;
}

修改版wp_is_mobile()函数

删除原来的wp_is_mobile函数,我们换一个新的,这个就把所有的移动设备比较全的展现出来了!

function wp_is_mobile() {
 $user_agent = $_SERVER['HTTP_USER_AGENT'];
 $mobile_browser = Array(
 "mqqbrowser", //手机QQ浏览器
 "opera mobi", //手机opera
 "juc","iuc",//uc浏览器
 "fennec","ios","applewebKit/420","applewebkit/525","applewebkit/532","ipad","iphone","ipaq","ipod",
 "iemobile", "windows ce",//windows phone
 "240x320","480x640","acer","android","anywhereyougo.com","asus","audio","blackberry","blazer","coolpad" ,"dopod", "etouch", "hitachi","htc","huawei", "jbrowser", "lenovo","lg","lg-","lge-","lge", "mobi","moto","nokia","phone","samsung","sony","symbian","tablet","tianyu","wap","xda","xde","zte"
 );
 $is_mobile = false;
 foreach ($mobile_browser as $device) {
 if (stristr($user_agent, $device)) {
 $is_mobile = true;
 break;
 }
 }
 return $is_mobile;
}

函数的调用方法也很简单:

<?php if (wp_is_mobile() ): ?>
//这里写你要实现的代码
<?php endif ;?>