hexo butterfly主题 添加全局吸底APlayer

最新推荐文章于 2024-09-13 22:31:41 发布
最新推荐文章于 2024-09-13 22:31:41 发布
阅读量4k 收藏 9
点赞数 4
分类专栏： hexo+github博客 文章标签： 网易 less manjaro vba makefile
原则上允许部分内容转载，转载请注明原文章地址！
本文链接：https://blog.csdn.net/weixin_42429718/article/details/106211309
版权
第一步

打开 themes\Butterfly\layout\includes\head.pug

结尾加一句

include ./third-party/aplayer.pug

第二步

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

if theme.aplayer && theme.aplayer.enable
	.aplayer
最低0.47元/天 解锁文章
一百个Chocolate
关注
专栏目录
如何在Hexo博客Butterfly主题开启Aplayer和“音乐”页面
qq_46435629的博客
05-23 7679
前言：若应用后发生错误，请clone我github仓库的这个部分。这是Butterfly主题2020/3/30的版本，我顺便也帮忙集成了Aplayer和Live2d看板娘，最新版本的Butterfly貌似并不完全兼容，也不太打算更新。 以后发布关于Butterfly主题优化的相关内容若无特殊情况，也是以这个版本为基准。 该hexo主题创作者并没有详细说明如何加载aplayer。虽然他指明了一个方向前去Aplayer的官方文档， 但教程未免有些难懂（尤其对于新手）因此，本主题也缺少相关教程 因为网上找到的大
为你的hexo博客添加全局吸底并且收入侧边栏的Aplayer
CodeLorin的博客
04-29 1235
为你的hexo博客添加全局吸底并且收入侧边栏的Aplayer 最终效果 1.收入侧边栏 找到butterfly配置文件APlayer.min.css把他下载下来,上图第一个 复制代码进入https://tool.oschina.net/codeformat/css格式化 由于.aplayer-body已经开启了fixed定位,只要简单修改一下left并设置最高优先级即可收入侧边栏 我们只需要在css中加入以下代码即可实现收入侧边栏 在代码最后加入即可 .aplayer.aplayer-narrow
Vue-Aplayer 安装与配置完全指南
gitblog_07629的博客
09-13 323
Vue-Aplayer 安装与配置完全指南 vue-aplayer ???? A beautiful HTML5 music player for Vue.js 项目地址: https://gitcode.com/gh_mirrors/...
Hexo博客-butterfly主题添加音乐播放器以及更改播放器主题
Anychew的博客
03-14 2176
安装相关插件 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
用 TS + Vue 重写 APlayer HTML5 音乐播放器
weixin_34343308的博客
07-24 489
简介 @DIYgod/APlayer 是一款简洁漂亮的 HTML5 音乐播放器 (〃ﾉωﾉ) 在我第一次看到这款播放器颜值的时候让我眼前一亮，我非常崇拜那些能设计出好看界面的设计师 (* >ω<) 但是在用过之后发现还是有不足的地方 这是我曾经提过的 Issues 用了一段时间，很喜欢 APlayer 简洁的 UI，提一些...
Asp.Net MVC中Aplayer.js音乐播放器的使用
cnmeimei的博客
04-27 1056
1、前言 Aplater.js是一款可爱、漂亮的Js音乐播放器，以前就了解过也弄过一些，现在就用mp3的格式来在.Net里面开发。管网https://aplayer.js.org/ 2、入手 在项目里面只要添加一个jQuery.js跟APlayer.min.js 跟APlayer.min.css就可以了。看一个简单的栗子： <link rel="stylesheet" href...
基于Hexo的Butterfly主题设计源码
最新发布
09-23
该项目是基于Hexo的Butterfly主题设计源码，共计205个文件，其中包括107个Pug模板文件、45个Stylus样式文件、33个JavaScript脚本文件、12个YAML配置文件、2个Markdown文档、1个LICENSE文件、1个JSON数据文件、1个CSS...
hexo_butterfly_blog:使用Hexo + Butterfly主题搭建的博客
03-17
在这个项目“hexo_butterfly_blog”中，我们将深入探讨如何使用Hexo与Butterfly主题搭建一个个人博客。 首先，你需要在本地安装Node.js环境，因为Hexo依赖于Node.js。安装完成后，通过npm（Node包管理器）全局安装...
vue怎么实现【音频播放器】？css可根据自己的需求调整
weixin_50450473的博客
07-27 728
我这里采用的是音频插件，然后修改的样式的方式： 首先安装 音频插件 npm install --save vue-aplayer html：然后引入插件使用 css： <stylelang='scss'scoped> /deep/.aplayer{ box-shadow:inherit; background-color:#F7F7F7; border-radius:10px; width:100%; .aplayer-body{...
React + Vite 实现一个音乐网站（aplayer音乐播放器 ）
qq_44417818的博客
01-30 1332
react学习，制作音乐网站，又是充实的一天呢 ^-^
开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer
weixin_29094775的博客
05-31 2406
介绍APlayer是一个简约且漂亮的html5音乐播放器，支持多种模式，包括播放列表模式、吸底模式、迷你模式、MSE模式、HLS模式。Githubhttps://github.com/diygod/APlayer安装使用 npm:npm install aplayer --save使用 Yarn:yarn add aplayer使用const ap = new APlayer({container...
Aplayer音乐插件不会pjax?真正的网页背景音乐!
Dragon_1718的博客
08-22 563
前言 在网上无意中刷到一个大佬的博客文章，介绍了一种播放器，详细可见大佬的文章。在文章提到了一个播放器，梨花带雨。（适合我们这样的白嫖党(￥__￥)） 注册、生成歌单……都很简单，而且该播放器还附有教程，可能最后一点如何插入butterfly主题会有的困难，但也不是事～ 如何插入到butterfly主题 打开主题文件_config.yml，找到如下代码区域 把播放器代码，如上图插入到我框出来的区域即可，完成！ 效果展示：传送门 ...
Vue使用vue-aplayer实现音乐播放
搬运工
06-07 6542
Vue Nuxt 使用 vue-aplayer 组件实现音乐播放！
Hexo+Butterfly主题美化
唐先森的博客
03-06 1万+
前言 本博客基于Hexo框架搭建，用到hexo-theme-butterfly主题（本人博客Butterfly版本3.4.0），hexo-theme-butterfly是基于Molunerfinn的hexo-theme-melody的基础上进行开发的。???? Butterfly 已经更新到3.6.2，请先参考这系列文档Butterfly教程进行基本配置 。如果这篇文章帮到了你，请在留言板写下您的评语吧，感谢您的大力支持! 完整教程：传送门。 主题特点： 简单漂亮，文章内容美观易读 M......
Hexo-Butterfly主题优化-设置网站首页显示背景、文章最上方不显示背景
zzqwtc的博客
02-15 9697
我想保留 Butterfly主题网站主界面的图片 而不想每个文章中的上方都出现为其设置的缩略图 预期效果如下 主界面 文章页面 Butterfly 的配置文件中只提供了 index_img设置主界面图片，文章上方的图片由文章属性 cover 控制，如果为空，则为默认的蓝色界面无法去除 默认界面： 设置了 cover 属性的界面： 如果想将文章界面上面的图片去掉，就需要设置 disable_top_img 但是这样，网站首页的图片也无法显示。（不知道作者为什么要这样设置~） 解决方法：修改源码！！！（
Hexo主题增加音乐之APlayer音乐播放功能
深海如梦的博客
10-13 2888
关于 在个人的站点上，如果有音乐播放的功能，那么读者可以一遍阅读文章，一边欣赏音乐，是一件很愉快的事情。下面就以Hexo主题yilla-plus所建立的站点为例，分享增加音乐播放功能的步骤。 我的站点：https://yourhug.github.io/ 先上效果图 准备 APlayer，下载github压缩包，解压后把dist文件夹复制到\themes\yilia-plus\source目...
对如何在博客园中添加音乐播放器及设置自动播放的研究
CHTXRT的博客
01-15 1133
对于如何在博客园中添加音乐播放器及设置自动播放进行了一下浅薄的研究，稍微谈谈自己不太完善的方案，并在全网首先给出了在一定程度上解决了自动播放问题的方法，期待大佬给出更完善的方案。
如何使用Aplayer播放器
热门推荐
豪先生的博客
12-08 2万+
Aplayer 一、部署 1、Aplayer 官网体验网址：https://aplayer.js.org/ Aplayer的GitHub网址：https://github.com/MoePlayer/APlayer 中文文档手册网址：首页 – APlayer 使用方法很简单，加载Aplayer的js和css，在想要展先的位置调用即可。Aplayer支持很多模式，上图展示的效果为吸底模式，就是在网页的页面最左下角展示。本文以吸底模式为例进行说明，如果想采用其它模式，可以根据文档手册修改代码。...
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一百个Chocolate

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值