Hexo（sakura）插入图片，视频，音乐

一、嵌入方式

1.图片

1. 直接添加

#直接写图片名就好了，图片实例见下
![随便命名](294136.jpg)

#如果改了Permalink就要加上文章名，即同名文件夹名
![也可以不命名](hexo-添加图片，音乐，链接，视频/294136.jpg)
#代码压缩后前面还要加一个/
![](/hexo-添加图片，音乐，链接，视频/294136.jpg)

2. 插件，见后文

2.音乐

网易云音乐：

#iframe插件

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=66651&auto=0&height=66">
</iframe>

#flash插件

<embed src="//music.163.com/style/swf/widget.swf?sid=40249713&type=2&auto=0&width=320&height=66" width="340" height="86"  allowNetworking="all">
</embed>

3.视频

腾讯视频：分享，复制通用代码

粘贴到博客中即可：

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=n0020yrnly7" allowFullScreen="true"></iframe>

优酷视频：分享，复制通用代码

粘贴到博客中即可：

<iframe height=498 width=510 src='http://player.youku.com/embed/XNDQ5NjA0MTkwOA==' frameborder=0 'allowfullscreen'></iframe>

二、插件方式

参考：hexo-sakura主题配置–hojun

1.在Hexo中插入哔哩哔哩视频

1. 效果：
   

2. 步骤：

   个人插件hexo-tag-bili中文文档，用来在文章或单页面中插入B站外链视频

   2.1安装

   npm i hexo-tag-bili --save
   

   2.2在Hexo博客的文章或者单页面中使用以下标签语法插入视频
   {% bili video_id %} 或 {% bili video_id page %}
   注意是：视频id和页数
   例如：

   1. 如果视频网址如：https://www.bilibili.com/video/av24897960
      在文章中插入的标签语法为：{% bili 24897960 %}

   2. 如果视频网址如（第二页）：https://www.bilibili.com/video/av24897960/?p=2
      在文章中插入的标签语法为：{% bili 24897960 2 %}

3. 原理：
   把视频id和页数转换为视频帧插入html中：

   <iframe src="//player.bilibili.com/player.html?aid=24897960&amp;page=2" 
   scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="" 
   style="position:absolute;
   width:100%;height:100%;
   left:0;top:0"></iframe>
   

2.在Hexo中插入fancybox图片查看

1. 效果：
   

2. 步骤：

   fancybox官网
   hojun大佬制作fancybox插件时的记录视频
   有兴趣的话可以看看，暴力抄袭者可以直接看后文。
   hexo-tag-fancybox_img插件使用说明

   2.1安装：

   npm i hexo-tag-fancybox_img --save
   

   （fancybox是类jQuery语言，为了避免jQuery使用与fancybox冲突需要在主题的head.ejs中引入三句css和js）

   （比较方便的是：在sakura主题中自带了fancybox.css和js）
   
   2.2用法：在Hexo博客的文章或者单页面中使用以下标签语法插入图片以及描述{% fb_img src [caption] %} (图集名称+路径+图片命名)
   举例：现有图片路径https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg
   {% gallery https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg sakura %}
   

3. 原理就是把以上转换为图片，再加上data-fancybox属性，即可显示图集：

   <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg"><img src="https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg"></a>
   
   <a data-fancybox="gallery" href="https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg"><img src="https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg"></a>
   

3.总结

视频用：https://www.bilibili.com/video/av24897960（仅限哔哩哔哩）

{% bili 24897960 %}

图片图集用：

{% fb_img https://cdn.jsdelivr.net/gh/cungudafa/img/images/food.jpg sakura %}

这种方式方便好用，但从其他博文导入过来的图片都是![]()形式，要想查看大图的功能，逐一修改太麻烦，这里引入一种通配方法：photoswipe