WoWA 纸片人和嵌入 B 站视频

缘起

前几天忘了从哪里了解到一个霓虹国高手做的「二次元纸片人舞蹈」生成器。自己涂鸦纸娃娃，一键生成好欢乐的舞蹈。咦，我真是很迷这种没心没肺的小玩意儿！

不才画了一个，特此发表。

过程

WoWA 纸片人舞蹈生成器

打完字才发觉这名字老 MoMA 了！

生成器的全称是 Wonder of Wonder Art，地址：https://aidn.jp/wowa/

玩法很简单，不多介绍。效果直接看我的作品：

对了，我给我的纸娃娃起名叫「呆囧-悟」，西文名 Deja-Vu（误）。

版权所有，欢迎合作开发 ^^

在 Hexo 中嵌入 B 站视频

上文的视频是我在 Bilibili 的投稿，嵌入到博文中。利用 B 站是因为 B 站没有贴片广告（但会限制视频质量）。在博文中嵌入第三方平台的视频不是什么难事，但我觉得还是有一些小坑，有必要解释一下具体方法。

iframe 方法

在视频页面通过分享按钮获得嵌入代码：

代码复制出来长这个样：

<iframe src="//player.bilibili.com/player.html?aid=625580774&bvid=BV1Vt4y117BW&cid=185974894&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

可以在 .md 文章中直接插入上面的代码。

也可以为了保险，多写几行，如下：

{% raw %}

<div style="position: relative; width: 100%; height: 100%;">
<iframe src="//player.bilibili.com/player.html?aid=625580774&bvid=BV1Vt4y117BW&cid=185974894&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

{% endraw %}

其中，前后的 raw 标签是 Hexo 提供的安全插入 html 代码的方法。div 标签则方便做些样式定义，而避免改动所复制的嵌入代码。

这段代码的实际效果就是上文所见的视频。

插件方法

曾经有这么一个神奇的插件 hexo-tag-bilibili ，能让之前那一长串代码简化成一行搞定。

安装：

$ cd <路径>/hexo
$ npm install --save hexo-tag-bilibili

编辑 _config.yml 可配置默认宽高：

bilibili:
  width: 452
  height: 544

安装后即可在 .md 文章中使用如下标签插入视频：

{% bilibili [av_id] [page] %}

其中的 av_id 即视频的 av 号，纯数字不用带 av 前缀。page 即视频的 P 号，可省略。

要注意的是，B 站已经全面启用 bv 号代替 av 号 。本插件多年未更新，暂不支持 bv 号。目前 av 号仍能在 B 站的视频链接中找到，即上文所述嵌入代码中 aid=625580774 的数字串部分。

于是，举个栗子：

{% bilibili 625580774 %}

插入文章并发布，前端效果和 iframe 方法所呈现的视频等效。

相比而言，使用插件能简化工作，但缺点很明显：

1. 无法在本地 markdown 编辑器中所见即所得

2. 长远来看 B 站视频的 av 号有彻底淘汰的风险

所以我并不推荐使用插件方法。

结语

好了，今日份的折腾告一段落。休息一下，劈个叉吧。

EOF