欢迎光临seo外链专员,seo网络推广专员网站

Hexo博客利用iframe标签插入网易音乐方法

作者:jcmp      发布时间:2021-04-18      浏览量:0
需要看此系列教程的请在公众号黑火软件大师

需要看此系列教程的请在公众号黑火软件大师后台回复hexo.遇到问题欢迎在文章、后台留言。

闲话少说进入正文:

0基础免费搭建博客和网站

准备工作

需要安装hexo并利用hexo写博客需要在电脑安装以下软件进行电脑环境配置。

Git下载、安装Git下载、安装指导教程Node.js下载、安装Node.js下载、安装指导教程Node.js环境配置教程Hexo安装Hexo安装及初始化教程Github账号准备Github账号注册及新建项目SSH Key生成及配置文本编辑软件+MD软件Markdown编辑软件大全(22款)Markdown 语法手册Markdown 简明语法手册以上软件均可以在本公众号找到下载链接,公众号黑火软件大师后台回复“hexo”即可得到。

获取代码

在我的博客中我选择添加的是网易云音乐。首先我们打开网易云音乐的主页,然后搜索你喜欢的音乐,然后进入音乐的详情页面,点击 生成外链播放器 :(如下图所示)。

选择 iframe 插件,复制如下图所示的代码:

部署代码

以我自己的博客为例吧:因为我想把这个播放器放在博客页面的左侧栏里,所以就把以上代码复制到主题文件夹下实现左侧栏的那个模板文件里,也就是 blog\themes\black-blue\layout\_partial\left-col.ejs 这个 left-col.ejs 文件,(需要值得注意的是,因为所使用的主题不同,可能文件也就不一样,但是大致原理就如刚才我所提到的:想放在哪个区域,就把代码复制到实现那块区域的模板文件里)。

为了使得页面更加美观,我给这块代码自定义加了 div,这样方便给播放器设定样式,只要稍微懂一点前端知识的筒子,都可以随心所欲的加 css样式。这里需要提一下,播放器设定好后,默认是:打开页面即播放音乐;如果不喜欢默认打开音乐的筒子,也可以通过把代码中的 auto=1 修改为 auto=0 来关闭它。