hexo博客中添加音乐播放器

最新推荐文章于 2024-08-12 08:48:56 发布
最新推荐文章于 2024-08-12 08:48:56 发布
阅读量1.9k 收藏 4
点赞数 3
分类专栏： hexo博客 文章标签： html node.js css3 hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44705559/article/details/113853387
版权
本文详细介绍了如何在Hexo博客中使用网易云音乐的iframe插件添加音乐播放器，无需额外安装插件。通过在网易云音乐获取HTML代码，然后在Hexo主题的ejs文件中插入代码，清理缓存并重新部署，即可在博客页脚实现音乐播放器功能。需要注意的是，所选音乐不能是VIP曲目，并且页面切换时播放状态会重置。
摘要由CSDN通过智能技术生成

1. 简介

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

2.安装步骤

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

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

    如：

    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src</
最低0.47元/天 解锁文章
卖烤麸烤饼儿
关注
专栏目录
为博客添加一个小音乐播放器
我爱吃红薯的博客
11-11 828
1，引入3行js,css <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"> <script src="http://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> <script src="http://cdn.jsdelivr
hexo博客主题next美化增加简易音乐播放器和看板娘
kaihang_cai的博客
09-07 515
增加简约音乐播放器，在某个地方，如 themes/next/layout/_macro/sidebar.swig 加入以下代码...
hexo-tag-aplayer 教程与指南
最新发布
gitblog_00142的博客
08-12 442
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-Butterfly音乐播放器的添加
啦啦啦啦啦
05-12 6192
说明：该配置基于Butterfly主题版本为 4.2.0，基本参考官方教程，不修改pug文件，主题已经集成了相关的设置，该博文对其部分内容进行补充。参考链接在文章末尾给出。 我的个人博客主页：Github Gitee CSDN在渲染可能与个人博客渲染不同。博客会在两个平台同步更新。欢迎点击我的主页。 文章目录插件的安装与配置普通界面播放器全局吸底Aplayer模式演示1，普通列表模式2，单曲播放3，迷你模式附录参考链接Aplayer完整配置可选参数表 插件的安装与配置 安装 hexo-tag-apl.
使用插件aplayer和MeingJS在hexo文章内添加音乐
个人博客地址为https://elikgrade.gitee.io/
07-01 853
title: “在Hexo博客中使用APlayer和Meting音乐播放器”
hexo 配置音乐播放器
Anubis
10-26 592
要支持音乐播放，在主题的 _config.yml 配置文件中激活 music 配置即可：# 是否在首页显示音乐 music: enable: true title: # 非吸底模式有效 enable: true show: 听听音乐 server: netease # require music platform: netease, tencent...
hexo博客插入音乐播放器
soul7y的博客
04-26 1906
搭建好自己的博客之后，想要在博客中添加音乐播放器。需要hexo-tag-aplayer插件。 使用Git Bash进入本地hexo的文件夹。输入以下命令（异常或网络太慢可以考虑将npm换成cnpm） npm install --save hexo-tag-aplayer 然后在 Hexo 配置文件 _config.yml 中添加设置： 然后输入hexo new page playlist创建一...
Hexo博客中插入音乐
热门推荐
Aileen-zl技术博客
07-01 1万+
1. 前言     正所谓没有逼格的博客不是好博客，而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调。Hexo作为一款优秀的静态博客生成器，当然也少不了这些吊炸天的功能。2. 准备工作     准备工作当然是你得把自己的博客得搭建好了。3. 装插件     首先我们需要通过命令行安装以下两款插件（当然装一个就可以了，如果一个实现不了再装另一个），这两款插件我们都可以从hexo的官方网站上查
Hexo博客添加背景音乐
UstinianX的博客
09-10 3476
更好的阅读体验 Hexo添加音乐的方式有很多种，可供使用的插件也不少。NexT主题下内置音乐应该算比较简便的一种了 下面我将会提到数种方法，选择一种最合适的即可 1.直接插入到某一篇文章 iframe\text{iframe}iframe标签 相当的简单 先到网易云音乐中中搜出你想要的音乐，然后点击生成外链播放器 所需要的所有代码都在这个框框内了 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Gz2ZvWI-1599749872629)(https://s1.ax1x.c
Hexo博客设置背景音乐
qq_39800978的博客
10-31 3389
本文讲解如何给HEXO的Next主题添加背景音乐，主要有以下应用场景： 在单篇博文中添加音乐播放器 在Next菜单栏添加一个全局的背景音乐播放器 下面详细展开…… 1 网易云生成HTML代码 HEXO支持Markdown语法下直接解析HTML代码，故我们可以考虑利用网易云Iframe插件生成播放器 第一步，在网页版网易云找到你想要的音乐，这里我以《The Fight Song》举例 第二步，点击《生成外链播放器》按钮并跳转，设置好高宽后复制粘贴HTML代码即可 注：网易云现在只支持一首歌
Hexo+Butterfly主题博客添加音乐播放器的简单版教程
weixin_63549044的博客
03-04 2642
教你如何快速添加并使用博客音乐播放器
Hexo博客Next主题魔改教程系列-音乐播放器
aqwca的博客
06-11 430
之前写过给博客添加音乐播放器,主要使用的是Hexo-tag-aplayer同时使用Meting-js。同时在meting-js里增加判断,如果报错就显示这个iframe元素,所以就不使用cdn引入了.这样在fetch之后报错的话就增加iframe元素,就正常显示一个播放器了.所以为了网站正常显示播放器,同时也为了操作方便,我这里又使用了firame。但最近发现貌似Meting-js出现了一些问题,主要是访问跨域的问题.下载meting-js文件并引入.
Hexo-Fluid主题添加音乐页面
林慕凡的博客
11-19 2659
效果预览：https://bynote.cn/playlist/ 如果你想使用音乐页面，很多人都会推荐安装hexo-tag-aplayer这款插件。 这款插件通过Hexo独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的html。 例如 ： 如果使用插件，在markdown中要这样写 {% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %} 其会被渲染为 &.
【自搭博客系统篇四】：给博客添加音乐功能 hexo-tag-aplayer
ygxyvip的博客
02-27 1421
该操作针对hexo butterfly主题，其他主题可能有所不同至此，添加播放器成功，尽情享受吧。
搭建Hexo博客+插入音乐视频(四)
风凌的博客
02-06 256
Hexo博客插入音乐视频
Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化
y223421的博客
07-17 269
昨晚被自己网站的 aplayer 闪瞎了眼一气之下整出了这个。
Hexo博客-butterfly主题添加音乐播放器以及更改播放器主题
Anychew的博客
03-14 2169
安装相关插件 npm install aplayer npm install --save hexo-tag-aplayer 添加相关代码 打开 themes\Butterfly\layout\includes\head.pug,在结尾加一句include ./third-party/aplayer.pug,如下： include ./head/config_site.pug include ./head/noscript.pug include ./third-party/aplay
关于给hexo博客增加音乐页面（使用Aplayer和MetingJS插件）
itsNekoDeng的博客
11-05 2101
前言: 作为一个音乐发烧友，一直想在博客网站里弄一个音乐播放歌单页面，现在它来了。本文基于matery主题，利用hexo-tag-aplayer插件和MetingJS实现。 效果展示： itsNekoDeng 音乐台 新建音乐页面 在source文件下新建一个musics文件 在该文件里新建一个index.md文件，其中文件内容为： --- title: musics type: "musics" layout: "musics" --- 在主题配置文件_config.yml下，增加音乐页面
hexo博客添加搜索功能
05-14
Algolia 是一个强大的搜索引擎，提供了易于使用的 API，可以轻松地将搜索功能添加到你的 Hexo 博客中。以下是如何为 Hexo 博客添加 Algolia 搜索的步骤： 1. 注册 Algolia 账户并创建一个应用程序。 2. 安装 Hexo ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值