叶星优酸乳

博客支持 Audio、YouTube、bilibili 嵌入

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

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

#增加 Audio 支持

在～/myblog/themes/meme/layouts/shortcodes/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

<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/shortcodes/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/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

<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 ↩︎

相关文章：

加载评论