Hexo博客添加背景音乐

最新推荐文章于 2024-08-12 08:48:56 发布

WincerX

最新推荐文章于 2024-08-12 08:48:56 发布

阅读量3.4k

点赞数 5

分类专栏： Hexo

本文链接：https://blog.csdn.net/UstinianX/article/details/108524653

版权

本文介绍了在Hexo博客中添加背景音乐的多种方法，包括直接使用iframe或JavaScript标签插入音乐，安装Hexo-tag-Aplayer插件实现单篇文章内播放，以及通过修改配置文件在所有界面部署自动播放的音乐播放器。还详细讲解了如何创建歌单页面，并提供了配置示例和最终效果展示。

摘要由CSDN通过智能技术生成

更好的阅读体验

Hexo添加音乐的方式有很多种，可供使用的插件也不少。NexT主题下内置音乐应该算比较简便的一种了

下面我将会提到数种方法，选择一种最合适的即可

1.直接插入到某一篇文章

$\text{iframe}$ 标签

相当的简单

先到网易云音乐中中搜出你想要的音乐，然后点击生成外链播放器

所需要的所有代码都在这个框框内了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Gz2ZvWI-1599749872629)(https://s1.ax1x.com/2020/07/11/UQzKDs.png)]

然后把这个代码粘贴到你的文章的 $\text{.md}$ 文件中，就可以显示了

大概就是......这个样子的

$\text{JavaScript}$

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WincerX

关注关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Hexo博客设置背景音乐

qq_39800978的博客

10-31

3355

本文讲解如何给HEXO的Next主题添加背景音乐，主要有以下应用场景：在单篇博文中添加音乐播放器在Next菜单栏添加一个全局的背景音乐播放器下面详细展开…… 1 网易云生成HTML代码 HEXO支持Markdown语法下直接解析HTML代码，故我们可以考虑利用网易云Iframe插件生成播放器第一步，在网页版网易云找到你想要的音乐，这里我以《The Fight Song》举例第二步，点击《生成外链播放器》按钮并跳转，设置好高宽后复制粘贴HTML代码即可注：网易云现在只支持一首歌

hexo插入背景音乐

Alex的博客

09-25

1257

hexo插入音乐可以到我的博客参考一下样式两种方式：单个音乐歌单第一种：这种方式比较简单，直接到网易云搜索需要添加的背景音乐然后生成外链，将外链粘贴到sidebar.swig里边，可以切换粘贴位置以达到自己需要的效果。这里随便找了首歌的外链粘了进去 vim /blog/themes/next/layout/_macro/sidebar.swig <iframe frameborder="no" border="0" marginwidth="0" marginheight="0"

4 条评论您还未登录，请先登录后发表或查看评论

hexo-tag-aplayer 教程与指南

最新发布

gitblog_00142的博客

08-12

427

hexo-tag-aplayer 教程与指南 hexo-tag-aplayerEmbed aplayer in Hexo posts/pages项目地址:https://gitcode.com/gh_mirrors/he/hexo-tag-aplayer 1. 项目介绍 hexo-tag-aplayer 是一个基于APlayer的Hexo标签插件，用于在Hexo搭建的博客中方便地插入音乐播放器。...

hexo中插入音乐

thewindkee的博客

02-14

4920

前言从用QQ空间开始就喜欢插入背景音乐，如今自己管理自己的博客，当然也要插入音乐，不用开绿钻哈哈哈哈。关于主题我用的是yilia。添加音乐添加的网易云音乐，很方便。打开网易云音乐某首歌详情页，点击生成外链播放器，选择iframe插件。选择好尺寸。复制html代码。如：<iframe frameborder="no" border="0" marginwidth="0" marginheight=

Hexo博客yilia主题添加背景音乐 （网易云音乐）

AomanHao的博客

03-08

4169

添加背景音乐 1、打开网易云音乐首页，然后搜索你要添加的背景音乐 http://music.163.com/ 2、搜索到歌曲点击生成外链播放器，进去下一个界面 3、复制外链播放器的代码打开yilia主题下的_partial文件夹下的left-col.ejs文件复制文件内容到最下端红线内的iframe框为复制的...

为Hexo添加音乐

foradawn的博客

12-31

3328

为Hexo添加音乐本来打算自己写个插件，无奈有点费时间，主要是后天要考试试啦，头有点大。于是使用了音乐外链播放器。一开始直接用的网易云单首歌曲的播放器,但是只能播放同一首歌曲，而且切换歌曲很麻烦，想着加个音乐搜索功能，然后发现有个更好的方式——使用歌单外链。但是打开网易云歌单会发现找不到歌单的外链，不过仔细看源码会发现有个歌单id，这样就够了转自https://www.tiexo.cn/apl

hexo博客中添加音乐播放器

买烤麸烤饼儿的博客

02-18

1925

1. 简介本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法，无需安装任何额外插件。 2.安装步骤在网易云音乐中打开你想要插入的音乐页面，点击生成外联播放器。在网页中调整好播放器插件后，复制下方的HTML代码。如： <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/play

Hexo博客中插入音乐

热门推荐

Aileen-zl技术博客

07-01

1万+

1. 前言正所谓没有逼格的博客不是好博客，而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调。Hexo作为一款优秀的静态博客生成器，当然也少不了这些吊炸天的功能。2. 准备工作准备工作当然是你得把自己的博客得搭建好了。3. 装插件首先我们需要通过命令行安装以下两款插件（当然装一个就可以了，如果一个实现不了再装另一个），这两款插件我们都可以从hexo的官方网站上查

Hexo-Fluid主题添加音乐页面

林慕凡的博客

11-19

2613

效果预览：https://bynote.cn/playlist/ 如果你想使用音乐页面，很多人都会推荐安装hexo-tag-aplayer这款插件。这款插件通过Hexo独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的html。例如：如果使用插件，在markdown中要这样写 {% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %} 其会被渲染为 &.

Hexo+Butterfly主题博客添加音乐播放器的简单版教程

weixin_63549044的博客

03-04

2558

教你如何快速添加并使用博客音乐播放器

给hexo博客next主题添加背景音乐

sourcod的博客

07-03

1万+

请访问我的个人博客 sourcod 我的hexo博客使用的是next主题所有次教程在next主题上修改。修改 themes/next/layout/_macro/sidebar.swig 文件添加音乐播放器内容在 themes/next/_config.yml 配置文件中添加歌单地址配置 background_music: //music.163.com...

【自搭博客系统篇四】：给博客添加音乐功能 hexo-tag-aplayer

ygxyvip的博客

02-27

1359

该操作针对hexo butterfly主题，其他主题可能有所不同至此，添加播放器成功，尽情享受吧。

Hexo添加可控制网易云音乐播放器

weixin_46972634的博客

04-20

967

1. 打开网易云网站音乐首页，复制选择的背景音乐分享外链网易云音乐 2. 引入播放器代码在 themes/yilia/layout/_partial/left-col.ejs 文件nav标签中添加代码注：放在<nav class="header-nav">和</nav>之内这里添加了一些判断和表达式  <% if (theme.music && theme.music.enable){ %> <d

HexoNext添加网易云音乐

尘的博客

07-17

1040

添加网易云音乐生成外链修改模板文件就是这个themes\next\layout\_macro\sidebar.swig 自己找个位置复制粘贴进去我是放在那个最下面

Hexo博客技巧：为博客插入音乐

Amnesia-Fu的博客

05-10

5973

前言想要给博客添加音乐，最简单的方法便是利用第三方音乐平台提供的外链播放器，可是效果并不好，外观丑没歌词且体验极差。如果使用Hexo-Tag-Aplayer插件的话这个问题就能很好地解决了。原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS 是基于Meting API 的 APlayer 衍生

hexo 配置音乐播放器

Anubis

10-26

567

要支持音乐播放，在主题的 _config.yml 配置文件中激活 music 配置即可：# 是否在首页显示音乐 music: enable: true title: # 非吸底模式有效 enable: true show: 听听音乐 server: netease # require music platform: netease, tencent...

NexT主题添加音乐

DonLex 的博客

09-24

2378

在Hexo博客中添加音乐，有三种方式可以插入音乐预览效果：https://donlex.cn/archives/bda67445.html 一、使用html标签写法如下： <audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; ...

Hexo + Next 主题实现全局播放背景音乐

Luis

04-09

5133

欢迎访问我的博客：https://iluis.cn/ 第一种方式：使用网易云音乐插件此种方式特点：十分方便快捷有版权保护的歌无法播放 1. 生成网易云歌单插件为什么要创建歌单外链而不是创建歌曲外链：以后添加或者删除歌曲不用修改代码，直接在网易云歌单中操作即可。步骤一：创建歌单并添加自己喜爱的歌曲小贴士：若我们的歌单中添加了受网易云版权保护的歌，在博客中我们的歌单就GG了，要避...

快速搭建Hexo博客全攻略

"Hexo博客网站的快速搭建" Hexo是一个基于Node.js的快速、简洁且高效的博客框架，它使用Markdown或者其他渲染引擎解析文章，并能够迅速生成静态网页，提供多种美观的主题供用户选择。通过简单的配置和操作，用户...

Hexo博客添加背景音乐

下面我将会提到数种方法，选择一种最合适的即可

1.直接插入到某一篇文章

iframe \text{iframe} iframe标签

JavaScript \text{JavaScript}

$\text{iframe}$ 标签

$\text{JavaScript}$