Hexo(sakura)插入图片,视频,音乐

一、嵌入方式

1.图片

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

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

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页