文章中加入音、视频
博客中插入音、视频
- 文章中插入音乐
- 侧边栏音乐播放器
- 文章中插入视频
一.文章中插入音乐
由于hugo每篇文章都是markdown，所以此处文章中插入音乐即markwodn中嵌入音乐。
1.音乐平台官方外链（此处以网易云音乐为例）
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=409931420&auto=0&height=66"></iframe>
将上述代码放入markdown中，效果如下：
2.使用MeingJS+APlayer
首先引入相关js文件，可以放文章中，也可以放入主题head部分（推荐）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
在文章中引入：
<div class="aplayer" data-id="409931420" data-server="netease" data-type="song" data-mode="single"></div>
| 主要参数 | 值 |
|---|---|
| data-id | 歌曲/专辑/歌单 ID |
| data-server | netease（网易云音乐）tencent（QQ音乐） xiami（虾米） kugou（酷狗） |
| data-type | song （单曲） album （专辑） playlist （歌单） search （搜索） |
| data-mode | random （随机） single （单曲） circulation （列表循环） order （列表） |
| data-autoplay | false（手动播放） true（自动播放） |
效果如下：
##### 2.侧边栏音乐播放器- APlayer 官网有相关案例
本站所采用的是MeingJS+APlayer，代码如下：
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/APlayer.min.css">
<script type="text/javascript" src="{{ .Site.BaseURL }}js/APlayer.min.js" ></script>
<script type="text/javascript" src="{{ .Site.BaseURL }}js/Meting.min.js" ></script>
<div class="aplayer"
data-id="4879687332"
data-server="netease"
data-type="playlist"
data-fixed="true"
data-autoplay="false"
data-order="random"
data-volume="0.55"
data-theme="#cc543a"
date-preload="auto" >
</div>
放置于任何一个页面即可，效果如下：
最好将该代码放入head部分，这样就每个页面都会引用到。
二.文章中插入视频
此处亦可直接引用各大视频网站外链，此处以bilibili为例。 bilibili视频分享处有外链链接：
<iframe src="//player.bilibili.com/player.html?aid=34818307&cid=60993735&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
插入markdown后效果如下：
注：此处引用bilibili视频外链，会导致部分样式冲突，在外链套一个 <center></center> 即可。