1. 简介

本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法，无需安装任何额外插件。

2.安装步骤

在网易云音乐中打开你想要插入的音乐页面，点击 生成外联播放器。

在网页中调整好播放器插件后，复制下方的HTML代码。

如：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488285208&auto=1&height=66"></iframe>

打开本地架设hexo博客的文件夹，寻找正在使用主题文件夹下的layout文件夹。

例如我在使用的fluid主题的路径是：
```
F:\MyBlog\node_modules\hexo-theme-fluid\layout
```
在layout文件夹下寻找你想要添加音乐播放器位置的ejs文件。

例如我想放在所有页面的页脚，则ejs文件的路径是：
```
\layout\_partial\footer.ejs
```
打开ejs文件(可以用vscode或者记事本)，找到生成相关位置html文件的代码。

这些ejs文件相当于是生成html文件的模板。
将复制来的HTML代码加上div加进相关的位置

例如：

   <footer class="text-center mt-5 py-3">//原本的页脚生成代码--------------------------------------------------------<div class="music-player">//复制来的外链播放器插件代码<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=86 src="//music.163.com/outchain/player?type=2&id=572328440&auto=1&height=66"></iframe></div>>---------------------------------------------------------//原本的页脚生成代码<div class="footer-content"><%- theme.footer.content %></div><%- partial('_partial/statistics.ejs') %><%- partial('_partial/beian.ejs') %><% if(theme.web_analytics.cnzz) { %>*<!-- cnzz Analytics Icon -->*<span id="cnzz_stat_icon_<%- theme.web_analytics.cnzz %>"style="display: none"></span><% } %></footer>

清理服务器缓存后再重新部署，音乐播放器就出现在对应位置了！

3. 注意事项

音乐不能是网易云里的VIP音乐，它是不会给你播的

当页面转换或者刷新时，播放器状态将被重置，目前还没有办法解决

4.其它的实现方法

在hexo框架的基础下，还可以用音乐播放插件Aplayer来实现。

hexo博客中添加音乐播放器相关推荐

jekyll个人博客中添加音乐播放插件
方法一: 环境要求 jekyll 七牛开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...
hexo博客中添加categories分类
title: hexo博客中添加categories分类 date: 2020-04-01 16:45:16 tags: hexo categories: 学习方法如下: 在根目录下scaffold ...
怎样在html中加入音乐播放器,如何在网页中添加音乐播放器
小编其实一个很痴迷音乐的人,每当我用电脑工作的时候,都会打开播放器播放音乐的,然后顿时觉得很舒适,如果我们在别人浏览网页的时候加个音乐播放器播放音乐的话,那么我们的网页就会给别人带来很舒适的感觉.DW ...
Hexo博客中插入音乐
hexo 搭建的个人博客:Aileen-zl 1. 前言正所谓没有逼格的博客不是好博客,而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调.Hexo作为一款优秀的静态博客生成器,当然也少不了 ...
个人博客的APlayer音乐播放器
大家好,今天看到的个人了博客音乐播放器,就想自己搞一个.弄了几个小时才搞懂.在网上找了好多资料,最后发现没用.出差各种问题,因为小编我一开始也不是很理解.我目前找到了三种方法,给大家分享一下,如果还有 ...
如何在php中添加音乐播放器,window_Win10自带Groove音乐播放器怎么使用?，《Groove音乐》是微软在Win10系 - phpStudy...
Win10自带Groove音乐播放器怎么使用? <Groove音乐>是微软在Win10系统上推出的一款最新的音乐播放器,从而替代了之前的Xbox Music.而今天<Groove音乐 ...
Hexo博客使用aplayer音乐播放插件
首先:本文基于CentOS 8.5 64位,其他操作系统请注意修改对应命令关键字,并且本文只介绍Hexo部署的方法和过程, 文章目录前情提要〇.懒人版一.独立部署写法1 写法2 二.插件配置 ...
如何在博客中添加Aplayer音乐播放器
前言是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗.音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受. 我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有 ...
博客园添加背景音乐以及播放器或在左下方固定位置添加音乐播放器给你的博文锦上添花，增姿添彩
官方教程:https://aplayer.js.org/#/zh-Hans/ 一.第一种样式这种你想添加多少音乐就添加多少音乐! 将下方代码复制到博客侧边栏! 话不多说! 上代码! <!-- ...

hexo博客中添加音乐播放器

1. 简介

2.安装步骤

3. 注意事项

4.其它的实现方法

hexo博客中添加音乐播放器相关推荐

最新文章

热门文章