[建站相关] 从零开始搭建个人博客网站系列 七、Hugo使用Shortcode插入bilibili、Youtube视频
作者:CC下载站 日期:2023-01-10 01:01:55 浏览:6 分类:站长帮
使用个人博客也有一年多的时间,这一年多的时候踩了很多坑,也学到了很多知识。
Shortcodes是什么
shortcode 可以理解为HTML模版,可以很方便的支持markdown里面写一行规定格式的代码,能用shortcode里面的模版替换成对应的HTML文件,然后就把这段HTML代码添加到编译之后的HTML文件中。
//注:去掉@,我这里是为了防止自动编译
{@{< name parameter1 parameter2 >}}
然后在你的主题
的layouts/shortcodes
会自动找 名字为 name.html
的文件,就把参数的值替换到html中,得到一个最终的html信息。
shortcode可以很方便的做复用,可以让你在每个markdown文件里面添加很少的内容,通常是一行代码,就能生成一个通用的HTML片段。
使用Shortcode,我们就能很方便的通过一行简单的代码来插入B站或者Youtube视频。
插入视频
我们就教大家怎么在Hugo中嵌入Bilibili视频和Youtube视频,这样当别人访问你的个人博客网站的时候,可以直接点击播放你插入的视频,还可以自动跳转到你的自媒体平台播放视频,来给你的自媒体平台引流。
1. 嵌入Bilibili视频
在hugo网站目录你使用的主题目录下themes/{your theme name}/layouts/shortcodes
中创建bilibili.html文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html>
<head>
<!-- style 样式 是为了让网页上的视频框按比例显示而非固定的大小 -->
<style type="text/css">
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
}
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="aspect-ratio">
<iframe
src="https://player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1&high_quality=1&danmaku=0{{end}}"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
>
</iframe>
<!-- src 中的 &high_quality=1&danmaku=0 设定了高清程度并默认屏蔽弹幕 -->
</div>
</body>
</html>
然后在你的bilibli的连接上找到BV号。 比如我的视频链接是: https://www.bilibili.com/video/BV1n8411K7zr/?vd_source=adec61d169fe18e7682f66c984380921
那么BV号就是:BV1n8411K7zr
在你的markdown文件里面添加这么一行
//注:去掉@,我这里是为了防止自动编译
{@{< bilibili BV1n8411K7zr >}}
其中bilibli
是你定义的html的文件名,后面的BV1n8411K7zr
就是你的第一个参数,也就是{{.Get 0 }}
,毕竟在程序届,是从0开始数的。
这样就能展示你的B站视频了:
.aspect-ratio { position: relative; width: 100%; height: 0; padding-bottom: 75%; } .aspect-ratio iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }点击去Bilibili观看
或者吐槽
会自动跳转到b站对应的视频链接继续观看,非常方便。
2. 嵌入Youtube视频
Hugo是自带Youtube视频的插入的,所以我们甚至不需要自己添加shortcode模板。
找到你的视频链接:
https://www.youtube.com/watch?v=kDQJF6Ngsi0
你只需要取到 v=xxxx
里面的xxxx内容
也就是你只需要写
{@{< youtube kDQJF6Ngsi0 >}}
就会自动匹配Hugo自带的shortcode
模板,嵌入你的youtube视频。
如果你不想用hugo自带的shortcode模板,或者它无法正常插入视频,那么同样的方式在你使用的主题目录下themes/{your theme name}/layouts/shortcodes
中创建youtube.html文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.meta-media {
position: relative;
margin-bottom: 30px;
display: flex;
width: 100%;
height: 0;
padding-bottom: 75%;
}
.video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
<div class="meta-media">
<iframe src="https://www.youtube.com/embed/{{ .Get 0 }}" frameborder="no" scrolling="yes" allowfullscreen="allowfullscreen" high_quality="1" framespacing="1" class="video" >
</iframe>
</div>
看一下效果:
同样也可以点击通过以下平台观看:Youtube
自动跳转到Youtube视频链接继续观看。
结论
shortcodes是不是很方便?让你在博客里面只需要写上一行代码就可以自动链接到B站或者Youtube,可以非常方便的引流。赶快在你的个人博客加入shortcodes添加B站和Youtube视频吧。能大大提高你的B站和Youtube视频的站外曝光率。
<全文完>
猜你还喜欢
- 03-29 [环境测试] Hexo部署GitHub Pages
- 03-22 [源码设置] 如何设置Xiuno BBS URL-Rewrite(伪静态设定)
- 03-06 [建站交流] PicGo + smms 构建图床
- 11-18 [emlog技巧] Emlog非插件显示评论者IP属地
- 11-09 [网站维护] WordPress 后台速度慢?加快仪表板速度的 15 种方法
- 11-09 [WordPress插件] 10 个最好用的 WordPress 聊天机器人插件(免费和付费)
- 11-09 [WordPress开发] 探索 WordPress 6.3 中的增强样板(Patterns)
- 11-09 [网站维护] 无需插件即可优化 WordPress 速度的 12 种策略
- 11-09 [网站安全] WordPress 安全统计:WordPress 到底有多安全?
- 09-20 [jsp技术] JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
- 09-15 [Lightsail容器] AWS Lightsail VPS:一种在云中运行容器的简单方法
- 07-28 [运维笔记] 解决网站出现"SSL_ERROR_RX_RECORD_TOO_LONG"问题
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[源码主题] zibll-V7.6最新版完美破解授权可用(含主题+教程)
[趣味源码] Ypay源支付最新免授权牛角魔改版
[课程] 面授系统课-王氏中药外治疗法6节
[课程] 职场必备生存法则体制内经验课
[课程] 外贸话术实战营系统课,让你不再不知所措,减少试错时间,脱变成外贸拿单达人
[课程] 餐饮人必修课
[课程] 千峰教育-小沐老师Python教程基础语法到项目实战(flask博客网站的实现) - 带源码课件
[课程] 极客时间-从 0 开发一款 iOS App
[网赚相关] 最新网易云梯计划网页版,单机月收入5000+!!
[游戏娱乐] 《永恒空间2》v1.1.39656中文版
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版
[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[电影] 2024年喜剧片·热辣滚烫 [mp4]
[影视] 铁爪 WEB-DL版下载 2023 The Iron Claw 23.48G
- 最新评论
-
我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26 谢谢支持!CC下载站 评论于:03-14 央视精品,感谢付出提供。qwer9009 评论于:03-14
- 热门tag