推广

推荐 链接 教程
云狐不限时VPN 注册链接 不限时翻墙机场推荐,众多不限时套餐|大流量套餐|免费试用|畅享4K
长桥证券开户 文字教程 【视频教程】-长桥证券新加坡版开户入金教程:港美股永久免佣+0门槛开户
欧易开户教程 注册链接 【视频教程】-币圈小白入门,从零开始购买加密货币,欧易如何交易加密货币?

前言

使用个人博客也有一年多的时间,这一年多的时候踩了很多坑,也学到了很多知识。 这里分享一个系列教程:从零开始搭建个人博客,把我的经验分享在这里。
系列地址:https://techxiaofei.com

Shortcodes是什么

shortcode 可以理解为HTML模版,可以很方便的支持markdown里面写一行规定格式的代码,能用shortcode里面的模版替换成对应的HTML文件,然后就把这段HTML代码添加到编译之后的HTML文件中。

Hugo shortcode

//注:去掉@,我这里是为了防止自动编译
{@{< 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站视频了:

点击去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视频的站外曝光率。

<全文完>

视频教程

本篇博客的视频教程首发于 Youtube:科技小飞哥,加入 电报粉丝群 获得最新视频更新和问题解答。