喜迎
春节

关于给hexo博客增加视频vlog页面(主要引入哔哩哔哩视频)


前言: 这里是博主的vlog区,博主也是B站的一名普通up🐖,欢迎观看交流。本文基于matery主题,主要引入哔哩哔哩视频。

新建视频页面

  1. 在source文件下新建一个video文件
  2. 在该文件里新建一个index.md文件,其中文件内容为:
---
title: video
type: "video"
layout: "video"
---
  1. 在主题配置文件_config.yml下,增加音乐页面链接和标题
video:
  url: /video

新建video.ejs文件

在主题layout文件下新建video.ejs文件,
这里在video.ejs文件直接贴代码即可,修改视频src路径即可。源代码如下:

<!-- vlog模块 -->
<div style="position: relative; padding: 30% 45%;">
    <iframe style="
        position: absolute; 
        width: 100%; 
        height: 100%; 
        left: 0; top: 0;" 
        src="//player.bilibili.com/player.html?aid=80181162&bvid=BV1qJ41147r7&cid=137214952&page=1&high_quality=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true">
    </iframe>
</div>

效果展示:
itsNekoDeng vlog

总结:若想要在博客文章md文件中引入也是可以的,直接粘贴上述ejs文件代码即可。

文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评 论
 上一篇
关于给hexo博客增加todolist任务清单页面(使用vue和localstorage)
关于给hexo博客增加todolist任务清单页面(使用vue和localstorage)
前言:一直想给博客站点添加一个todolist页面,这不,它来了!本文基于matery主题,使用vue和localstorage,其他主题亦可参考。这里可作为各位访客的一个心愿单模块,可以在下方写下自己今年或者近期的愿望或者flag,例如留
2020-11-06
下一篇 
实验室-一些有趣小demo汇总(今天吃啥,生日打字机...)
实验室-一些有趣小demo汇总(今天吃啥,生日打字机...)
前言: 收集了一些有趣的网页demo,这才是程序员表达的最佳方式嘛,傲娇脸... 今晚吃啥呢?随机摇店名总是在纠结吃什么,于是就可以…主要原理:其实就是random一个数组,和随机摇数字的原理一样,只不过把数字改成数组的下标就可以了。效果
2020-10-29
  目录