修改matery主题首页显示视频为Bilibili视频 在Markdown插入Bilibili视频, 并设置大小.

首先找到分享嵌入代码

hexo插入bilibili视频 - 图1

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

在markdown中使用嵌入代码

调整大小和居中等

iframe标签属性设置

  1. <!--
  2. 调整大小: width="xxx" height="xxx"
  3. -->
  4. <iframe src="//player.bilibili.com/player.html?aid=17963687&cid=29326684&page=1" width="600" height="400" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

设置自适应

  1. <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  2. <iframe src="//player.bilibili.com/player.html?aid=17963687&cid=29326684&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
  3. </div>

matery 主题修改首页展示视频

找到 /themes/hexo-theme-matery/layout/_widget/video.ejs 将第十一行左右代码改成Bilibili视频即可, 引入的 script 可以删掉.
修改后如下.

  1. <div class="video-player">
  2. <% if (theme.video.showTitle) { %>
  3. <div class="title center-align">
  4. <i class="fas fa-video-camera"></i>&nbsp;&nbsp;<%- theme.video.title %>
  5. </div>
  6. <% } %>
  7. <div class="row">
  8. <div class="col l8 offset-l2 m10 offset-m1 s12">
  9. <div id="dplayer" class="dplayer-video">
  10. <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  11. <iframe src="//player.bilibili.com/player.html?aid=16316393&cid=26620787&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. </div>