Hexo博客如何加入B站视频/How to add bilibili shared video in Hexo

Hexo搭建博客后，如果想在博客中分享视频，避免网站服务器带宽的限制，需要添加其他视频网站的外链播放器，具体该怎么操作呢？

多平台维护不易，内容实时更新于 个人网站，请移步阅读最新内容。

Solution 1: hexo-tag-aplayer

hexo-tag-dplayer 是 DPlayer 播放器的 Hexo 标签插件。

因为版本维护者不再支持新版本的更新，有些bug没有解决，所以对于高版本的Hexo支持不友好，甚至安装阶段就会报错。所以，我不是很支持继续使用该方法。

ps.想继续坚持使用该方法的，可以移步阅读 在Hexo搭建的博客中插入音乐或者视频。

Solution 2: 视频网站外链

Hexo 支持 iframe 的方式插入视频，所示我们可以把视频上传到哔哩哔哩、优酷、腾讯视频等，然后生成外链再拿来用。

大部分视频网站的外链播放器在视频开头都会加上30秒-2分钟的广告，于是选择B站，无广告，无广告，无广告！

去B站获取视频外链

选择视频下方“分享”里的嵌入代码，而不是视频地址。否则进入 Hexo 博客后，网页会自动跳转到 bilibili 的视频页面，而不是自己的博客页面。

image

在文章中插入视频外链

Markdown 中可以直接插入 html 代码，但是hexo给我们特意准备了一个 raw 标签来插入html代码，防止一些其他因素的干扰，这里我们就使用raw来插入视频外链。

{% raw %}

{% endraw %}

因为外链html没有和Hexo适配，所以在网页上打开，界面靠左并且窗口小，显得很难看，不够大气。

image

美化播放器样式

这里分享一个很巧妙的偷懒方法，我们可以去Hexo的 官网，看看作者是如何布局的，然后把代码抄回来。

image

那么，我们只要把布局中的src，替换为自己的外链地址，就可以设置好视频的布局。

{% raw %}

{% endraw %}

因为不支持 iframe，大家可以去 我的网站 看看效果。

image

References

• hexo-tag-dplayer
• hexo博客插入B站视频外链（raw实现）
• Hexo博客中加入B站视频播放器