博客支持 Audio、YouTube、bilibili 嵌入

博客承载的内容不应只有文字,还可以通过添加音频、视频,以丰富博客的内容。

于是研究了一下,给博客增加了音频支持,同时也增加了 YouTube、bilibili 视频嵌入。

#增加 Audio 支持

~/myblog/themes/meme/layouts/shotcodes/audio.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
<audio controls
	class="audio_controls {{ .Get "class" }}"
	{{ with .Get "id" }}id="{{ . }}"{{ end }}
	{{ with .Get "preload" }}preload="{{ . }}"{{ else }}preload="metadata"{{ end }}
	
	style="{{ with .Get "style" }}{{ . | safeCSS }}; {{ end }}
		{{ with .Get "width" }}width:{{ . }}; {{ end }}
		{{ with .Get "height" }}height:{{ . }};{{ end }}"
	{{ with .Get "title" }}data-info-title="{{ . }}"{{ end }}
	{{ with .Get "attr" }}data-info-attr="{{ . }}"{{ end }}
	{{ with .Get "attr_link" }}data-info-attr-link="{{ . }}"{{ end }}
	{{ with .Get "year" }}data-info-year="{{ . }}"{{ end }}
	{{ with .Get "artist" }}data-info-artist="{{ . }}"{{ end }}
	{{ with .Get "album_title" }}data-info-album-title="{{ . }}"{{ end }}
	{{ with .Get "album_art" }}data-info-album-art="{{ . }}"{{ end }}
	{{ with .Get "label" }}data-info-label="{{ . }}"{{ end }}
>
	{{ if .Get "src" }}
	<source {{ with .Get "src" }}src="{{ . }}"{{ end }}
		{{ with .Get "type" }}type="audio/{{ . }}"{{ end }}>
	{{ else if .Get "backup_src" }}
		<source src="{{ .Get "backup_src" }}"
			{{ with .Get "backup_type" }}type="audio/{{ . }}"{{ end }}
			{{ with .Get "backup_codec" }}codecs="{{ . }}"{{ end }}
		>
	{{ end }}
	Your browser does not support the audio element
</audio>

添加好后,就能在写博客的时候插入.mp3文件了。

//示例:
花括号{< audio src="https://your-path-to-music.mp3" >}}

尝试听一首歌吧,来自杰伦的《夜曲》:

另一种方式,听一曲《月半小夜曲》:

来自于 LoveIt 主题[1]music.html[2]

#增加 YouTube 视频嵌入

~/myblog/themes/meme/layouts/shotcodes/youtube.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
<style>
.youtube-player {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    }
      
.youtube-player iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }
</style>


<div align=center class="youtube-player">
    <iframe src="https://www.youtube.com/embed/{{ index .Params 0 }}"
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true"> 
    </iframe>
</div>

配置好后,在想要插入 YouTube 视频的博客文章中添加:

//示例:
花括号{< youtube MZCbxM7LLy0 >}}

#增加 bilibili 视频嵌入

~/myblog/themes/meme/layouts/shotcodes/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
<style>
.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>
      

<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid={{ index .Params 0 }}&&page=1&as_wide=1&high_quality=1&danmaku=0" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true"> 
    </iframe>
</div>

配置好后,在想要插入 bilibili 视频的博客文章中添加:

//示例:
花括号{< bilibili 56776062 >}}

注:56776062 是 bilibili 的 aid,可在「分享-嵌入代码」中找到 aid。


  1. LoveIt 主题:https://hugoloveit.com/zh-cn/theme-documentation-extended-shortcodes/#8-music ↩︎

  2. music.html 文件:https://github.com/lmm214/immmmm/blob/master/themes/hello-friend/layouts/shortcodes/music.html ↩︎