hexo插入视频代码块及音频


hexo插件安装插入视频代码块及音频

1.hexo插件安装

使用 Hexo 插件插入音乐/视频
两个好用的hexo插件:

**hexo-tag-aplayer:https://github.com/grzhan/hexo-tag-aplayer)

**hexo-tag-dplayer: https://github.com/NextMoe/hexo-tag-dplayer

1.1 播放音乐的aplayer

在cmd页面内,使用npm安装:

npm install hexo-tag-aplayer

1.2 播放视频的dplayer

在cmd页面内,使用npm安装:
npm install hexo-tag-dplayer

hexo插入网易云音乐

1.提取音乐的代码块

  1. 进入网易云音乐搜索你想要的音乐。(以“下雨天”为例)。
  2. 检索后进入下雨天页面,点击分享。
  3. 复制该处代码
图片名称
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=86 src="//music.163.com/outchain/player?type=2&id=368764&auto=1&height=66"></iframe>

直接将其放在你的markdown文件中,即可显示音乐,如下所示:

hexo插入bilibili视频代码块

1.提取视频的代码块

  1. 进入bilibili搜索你想要的视频。(以“回形针PaperClip你的 App 为什么知道你想买什么?”为例)。
  2. 检索后进入回形针PaperClip你的 App 为什么知道你想买什么页面,点击分享。
  3. 复制代码块处代码
图片名称
<iframe src="//player.bilibili.com/player.html?aid=40891962&bvid=BV17t411p7gx&cid=71826908&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

直接将其放在你的markdown文件中,即可显示b站视频,但是会发现视频比较小,如下所示:

2.代码块前后修饰

在改代码的前后基础上加上

<div style="position:relative; padding-bottom:75%; width:100%; height:0">

 style="position:absolute; height: 100%; width: 100%;"

</div>

即可将你的视频直接贴在你的文章上。

参考:

如何在Hugo/Hexo博客中插入响应式Bilibili视频代码块
Hexo博客中插入音乐/视频/


文章作者: 万鲲鹏
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 万鲲鹏 !
评论
  目录