Hugo博客自定义shortcodes
1. 引入 ppt 功能#
定位到 layouts/shortcodes目录，新建一个文件叫 ppt.html，放入如下代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<style type="text/css">
#googleslides_shortcodes {
padding-bottom: 66%;
position: relative;
display: block;
width: 100%;
border-bottom: 5px solid;
}
#googleslides_shortcodes iframe {
position: absolute;
top: 0;
left: 0
}
</style>
<title></title>
</head>
<body>
<div id="googleslides_shortcodes">
<iframe id="googleSlideIframe"
width="100%"
height="100%"
src="{{ .Get "src" }}"
frameborder="0"
allowfullscreen="" >
</iframe>
</div>
</body>
</html>2. 引入 bilibili 视频#
定位到 layouts/shortcodes目录，新建一个文件叫 bilibili.html，放入如下代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<style type="text/css">
.bilibili_shortcodes {
position: relative;
width: 100%;
height: 0;
padding-bottom: 66%;
margin: auto;
overflow: hidden;
text-align: center;
}
.bilibili_shortcodes iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
<title></title>
</head>
<body>
<div class="bilibili_shortcodes">
<iframe
src="https://player.bilibili.com/player.html?bvid={{.Get 0 }}&page={{ if .Get 1 }}{{.Get 1}}{{ else }}1&high_quality=1&danmaku=0&as_wide=0{{end}}"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
>
</iframe>
</div>
</body>
</html>3. 引入 youtube 视频#
定位到 layouts/shortcodes目录，新建一个文件叫 youtube.html，放入如下代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<style type="text/css">
.youtube_shortcodes {
position: relative;
width: 100%;
height: 0;
padding-bottom: 66%;
margin: auto;
overflow: hidden;
text-align: center;
}
.youtube_shortcodes iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
<title></title>
</head>
<body>
<div class="youtube_shortcodes">
<iframe
class="youtube-player"
type="text/html"
width="640"
height="385"
src="https://www.youtube.com/embed/{{ index .Params 0 }}?autoplay=0"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;"
allowfullscreen frameborder="0">
</iframe>
</div>
</body>
</html>4. 使用方法#
在写文章的时候，直接按如下方式书写就可以
4.1 ppt 展示#
{a{< ppt src="ppt网址" >}}
# 使用的时候把字母a去掉，我加上是为了防止被识别生效ppt展示效果：
4.2 bilibili 视频#
{a{< bilibili BV1Ab4y117G2 >}}
# 使用的时候把字母a去掉，我加上是为了防止被识别生效
# BV1Ab4y117G2 指的是 bilibili 链接中的 bvid
# 如果有集数（默认第一集），例如要播放第5集，则这样使用：{a{< bilibili BV1Ab4y117G2 5 >}}https://www.bilibili.com/video/BV1Ab4y117G2
4.3 youtube 视频#
{a{< youtube Fm4oT4QJbWs >}}
# 使用的时候把字母a去掉，我加上是为了防止被识别生效https://youtu.be/Fm4oT4QJbWs
没有外网的同学可以通过如下截图看实际效果：
5. 参考链接#
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
