hexo butterfly主题 添加全局吸底APlayer

最新推荐文章于 2024-07-26 09:00:00 发布
最新推荐文章于 2024-07-26 09:00:00 发布
阅读量1.6k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： butterfly aplyer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44186409/article/details/106755035
本文介绍了如何在Hexo Butterfly主题中添加全局底部固定的APlayer音乐播放器，包括修改`head.pug`，创建`aplayer.pug`文件，编辑`butterfly.yml`配置文件，以及解决APlayer与TOC冲突的问题，确保APlayer在页面浏览时不会与TOC切换按钮重叠。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

hexo butterfly主题 添加全局吸底APlayer

  1. 打开 themes\Butterfly\layout\includes\head.pug,在结尾加一句include ./third-party/aplayer.pug,如图·：
    在这里插入图片描述

  2. 然后在 themes\Butterfly\layout\includes\third-party\ 里面新建一个文件叫 aplayer.pug ,内容如下

if theme.aplayer && theme.aplayer.enable
	.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data
最低0.47元/天 解锁文章
Butterfly主题的hexo博客添加全局吸底的aplayer，并主要实现播放网页服务器本地音乐的功能
qq_60666531的博客
01-17 2082
本人的个人博客最近已经正式完成icp备案与公安备案，成功拿到域名并完成解析。这是本人博客的实际显示效果（包含播放器实现效果）：关于hexo博客添加aplayer的教程其实网上有很多，但基本都是连接到腾讯或者网易云平台的音源，导致付费VIP歌曲只能播放30秒，令我非常难受。我就希望能够实现aplayer播放我网页服务器本地上传上去的音乐mp3文件，但是网上相关教程非常少而且不明晰，或者是针对其他主题，又或者是无法实现这种简洁好看的全局吸底效果。
为你的hexo博客添加全局吸底并且收入侧边栏的Aplayer
CodeLorin的博客
04-29 1362
为你的hexo博客添加全局吸底并且收入侧边栏的Aplayer 最终效果 1.收入侧边栏 找到butterfly配置文件APlayer.min.css把他下载下来,上图第一个 复制代码进入https://tool.oschina.net/codeformat/css格式化 由于.aplayer-body已经开启了fixed定位,只要简单修改一下left并设置最高优先级即可收入侧边栏 我们只需要在css中加入以下代码即可实现收入侧边栏 在代码最后加入即可 .aplayer.aplayer-narrow
hexo-butterfly使用aplayer加载音乐页面
Alex的博客
12-23 2710
前言：若应用后发生错误，请clone我github仓库的这个部分。这是Butterfly主题2020/3/30的版本，我顺便也帮忙集成了Aplayer和Live2d看板娘，最新版本的Butterfly貌似并不完全兼容，也不太打算更新。 以后发布关于Butterfly主题优化的相关内容若无特殊情况，也是以这个版本为基准。 该hexo主题创作者并没有详细说明如何加载aplayer。虽然他指明了一个方向前去Aplayer的官方文档， 但教程未免有些难懂（尤其对于新手）因此，本主题也缺少相关教程 因为网上找到的大多
基于Hexo和Butterfly创建个人技术博客，(14) 给博客站点添加Aplayer音乐
编程是一门实践技术
06-22 1112
基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入，详细记录了个人建站全过程。系列专题-给站点添加Aplayer音乐插件
Hexo搭建个人博客系列【七】- Butterfly主题使用及美化
viman3344的专栏
07-26 1846
是基于的的基础上进行开发的，当前版本是v4.13.0。主题官网：https://github.com/jerryc127/hexo-theme-butterfly。
关于给hexo博客适配全局暗夜深色模式
itsNekoDeng的博客
10-30 2415
前言：目前，主流系统无论是Windows、MacOS、各大手机厂商系统都支持主题全局深色模式了，所以萌生了这个想法，将博客也是配全局深色模式。
Hexo+Butterfly+GitHub
hjh_cos
05-20 491
部署GitHub 在 Hexo 项目根目录下的 _config.yml 进行配置 # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: https://github.com/hjhcos/hjhcos.github.io.git # 以前是 master 现在默认是 main branch: main 在 Git Bash Here 里面执行配置 npm instal
如何在Hexo博客Butterfly主题开启Aplayer和“音乐”页面
qq_46435629的博客
05-23 7908
前言：若应用后发生错误，请clone我github仓库的这个部分。这是Butterfly主题2020/3/30的版本，我顺便也帮忙集成了Aplayer和Live2d看板娘，最新版本的Butterfly貌似并不完全兼容，也不太打算更新。 以后发布关于Butterfly主题优化的相关内容若无特殊情况，也是以这个版本为基准。 该hexo主题创作者并没有详细说明如何加载aplayer。虽然他指明了一个方向前去Aplayer的官方文档， 但教程未免有些难懂（尤其对于新手）因此，本主题也缺少相关教程 因为网上找到的大
butterfly主题Aplayer本地音源添加
qq_27489877的博客
07-23 1455
本教程仅涉及如何在Aplayer插件中添加本地音源，请勿将未经创作者授权的本地音源作为商用🚫
hexo+gitee+typora博客显示本地图片
南明离火的博客
05-24 542
对于pic-go与markdown无法外链引用gitee图片链接，对此另外可以使hexo显示本地图片的方法
Hexo+Butterfly主题博客添加音乐播放器的简单版教程
weixin_63549044的博客
03-04 3159
教你如何快速添加并使用博客音乐播放器
【blog】小白博客搭建和踩坑历程 hexo+butterfly
chierhy的博客
12-07 3163
blog 博客搭建和踩坑历程 hexo+butterfly
个人博客搭建记录 Hexo+Butterfly+Github Page+Coding
Wawyw's Blog
02-01 1319
个人博客: https://wawyw.github.io/ 所用资料均来自于互联网，在此致以万分感谢。此处仅作记录和备份，如有侵权或错误，请联系删除，修改。 前言 在学过一些前端知识后，一直有搭建博客的想法。近期趁着假期时间，利用 Hexo 和 Github pages 初步搭建好了个人博客，这里就搭建过程进行简单记录。 前提准备 名词解释 Hexo 是一款基于 Node.js 用于快速搭建博客的框架，有了它就可以完成完成个人博客的构建，它会帮你构建博客的整个框架，你只需要会使用Markdown 写.
博客搭建详解(一)-Hexo+Butterfly+GitHub
公众号 Java4ye
06-27 2944
hexo框架和Butterfly主题的使用，运用Gitalk评论插件，在GitHub上创建这个评论仓库存储issue，同时使用这个Algolia搜索插件提供文章的检索服务
Hexo + Butterfly 从零开始搭建个人博客（五）
唐先森的博客
07-23 6402
Hexo + Butterflly 美化
Hexo-Butterfly音乐播放器的添加
啦啦啦啦啦
05-12 6986
说明：该配置基于Butterfly主题版本为 4.2.0，基本参考官方教程，不修改pug文件，主题已经集成了相关的设置，该博文对其部分内容进行补充。参考链接在文章末尾给出。 我的个人博客主页：Github Gitee 优快云在渲染可能与个人博客渲染不同。博客会在两个平台同步更新。欢迎点击我的主页。 文章目录插件的安装与配置普通界面播放器全局吸底Aplayer模式演示1，普通列表模式2，单曲播放3，迷你模式附录参考链接Aplayer完整配置可选参数表 插件的安装与配置 安装 hexo-tag-apl.
buttfly主题魔改
憨豆婆的博客
02-01 972
butterrfiy魔改参考。
使用aplayer内嵌播放器播放个人网易云歌单
qq_42443261的博客
05-25 5618
可以按f12 打开控制台看到 我的插件应用 这篇文章的重点就是在与第一个的 插件 aplayer 关于他的一些关于用处无关的介绍就不多说了 主要是讲他作为网页端内置音乐播放器 可以实现有很多的功能 具体有很多如果想要去了解的话 可以去看看 关于这个 音乐播放器的官网 上面图片展示出的link 这里简单的说一下关于怎么实现web端效果和请求那一个网易云api 可以实现效果 下面就是基本效果 ...
hexo Aplayer 音乐播放器
最新发布
01-17
### 如何在 Hexo 博客中添加和配置 Aplayer 音乐播放器 #### 插入 APlayer 到 Hexo 文章内 为了使 APlayer 能够嵌入到特定的文章内容之中，可以通过自定义 HTML 来实现这一目标。具体操作如下： ```html <!--aplayer--> <link rel="stylesheet" href="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.css"> <div id="aplayer"></div> <script src="https://unpkg.com/browse/aplayer@1.10.1/dist/APlayer.min.js"></script> <script src="https://你的域名/js/useaplayer.js"></script> ``` 上述代码片段展示了如何通过链接外部资源文件来加载 APlayer 所需的样式表以及 JavaScript 文件，并指定了一个用于承载播放器实例化的 DOM 容器 `id` 属性为 "aplayer"[^4]。 #### 使用 MetingJS 提升功能 考虑到更丰富的用户体验需求，推荐采用 MetingJS 进一步增强 APlayer 功能。MetingJS 构建于 Meting API 上面，允许访问多个在线音乐服务平台的数据源，从而使得用户能够轻松获取来自不同平台上的歌曲信息并进行播放[^3]。 #### 在 Hexo 中全局应用 APlayer 如果希望在整个网站范围内默认启用 APlayer，则可以在主题设置里做相应调整。例如，在使用 Yilia 主题的情况下，可通过编辑 `_config.yml` 或者其他相关配置文件的方式加入必要的初始化脚本与样式声明，确保每次页面加载时自动创建好相应的播放控件[^1]。 对于 Butterfly 等其他类型的 Hexo 主题而言，同样存在类似的机制可供利用；通常只需按照官方文档指示找到合适的钩子位置插入所需的 `<script>` 和 `<style>` 标签即可完成集成工作[^2]。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值