草庐IT

Hexo-Butterfly音乐播放器的添加

ty_xiumud 2024-05-01 原文

说明:该配置基于Butterfly主题版本为 4.2.0,基本参考官方教程,不修改pug文件,主题已经集成了相关的设置,该博文对其部分内容进行补充。参考链接在文章末尾给出。
我的个人博客主页:GuoDong の Blog ,镜像 Gitee 。CSDN在渲染可能与个人博客渲染不同,欢迎点击我的主页。博客会在两个平台同步更新。欢迎点击我的主页。

文章目录

插件的安装与配置

安装 hexo-tag-aplayer 这款插件。执行如下指令:

npm install --save hexo-tag-aplayer

插件配置方式为修改Hexo 的配置文件中进行如下修改。就是你的Hexo根目录下的_config.yml文件。

aplayer:
  meting: true
  asset_inject: false

开启主题配置文件中的aplayerInject如下所示

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

主题配置文件的就是自己建立的_config.butterfly.yml文件。建议使用vscode,可以进行全局搜索。更加方便进行修改。
至此就已经可以使用了。下面介绍两种最常用的使用。

普通界面播放器

以本博客为例,在博客的音乐页面(\source\music\index.md文件)添加如下:

{% meting "7422861869" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:400px" "preload:none" "theme:#ad7a86"%}

常用的选项如下所示:
server可选:netease(网易云音乐),tencent(QQ音乐),kugou(酷狗音乐),xiami(虾米音乐),baidu(百度音乐)。建议网易云
type可选:song(歌曲),playlist(歌单),album(专辑),search(搜索关键字),artist(歌手)。添加单曲选的歌曲,歌单选择playlist,可以自行尝试。
id获取示例: 打开网易云音乐,选择喜欢的歌单,在网页版打开,获取歌单list,填入即可。使用的时候将上边的ID号换为自己喜欢的歌单即可。注意歌单中不能包括VIP音乐,否则无法解析。建议单独建立一个歌单,以后有喜欢的音乐添加进去,网页也会自动同步添加。
lrcType设置为 -1默认显示歌词,放在fixed模式下比较合适。

基本上修改的参数以上就已经足够了。ID获取的方式如下。完整的参数表见附录,也可以去参考链接中查看。

也可以直接添加HTMI格式。

<div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-preload="auto" data-theme="#3F51B5"></div>

需要修改的参数已经给出,可以自行修改。

全局吸底Aplayer模式

把 aplayer代码 插入到主题配置文件的 inject.bottom 即可。

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="7422861869" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-lrcType="-1"> </div>

需要修改的参数就只有data-id、data-server、data-type、data-autoplay="true"、data-lrcType="-1"一些常用的参数,可以自行根据需要修改。

最后,如果你想切换页面时,音乐不会中断。请把主题配置文件的 pjax 设为 true即可。

pjax:
 enable: ture
 exclude:

演示

1,普通列表模式

对应代码注意这里将 "listmaxheight:100px"列表高度调整为100,为了方便展示

{% meting "7422861869" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:100px" "preload:none" "autoplay = false" "theme:#ad7a86"%}

{% meting “7422861869” “netease” “playlist” “autoplay” “mutex:false” “listmaxheight:100px” “preload:none” “theme:#ad7a86”%}

2,单曲播放

插入单曲使用如下方式

<div class="aplayer no-destroy" data-id="1441758494" data-server="netease" data-type="song"  data-autoplay="true" data-lrcType="-1"> </div>

3,迷你模式

<div class="aplayer no-destroy" data-id="1441758494" data-server="netease" data-type="song" data-mini="true" data-autoplay="true" data-lrcType="-1"> </div>

附录

参考链接

hexo-tag-aplayer的GitHub地址
aplayer官方说明文档
butterfly官方教程

Aplayer完整配置可选参数表

下面是官方所示的完整可选配置参数。

NameDefaultDescription
containerdocument.querySelector(‘.aplayer’)player container
fixedfalseenable fixed mode, see more details
minifalseenable mini mode, see more details
autoplayfalseaudio autoplay
theme‘#b7daff’main color
loop‘all’player loop play, values: ‘all’, ‘one’, ‘none’
order‘list’player play order, values: ‘list’, ‘random’
preload‘auto’values: ‘none’, ‘metadata’, ‘auto’
volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
audio-audio info, should be an object or object array
audio.name-audio name
audio.artist-audio artist
audio.url-audio url
audio.cover-audio cover
audio.lrc-see more details
audio.theme-main color when switching to this audio, it has priority over the above theme
audio.type‘auto’values: ‘auto’, ‘hls’, ‘normal’ or other custom type, see more details
customAudioType-see more details
mutextrueprevent to play multiple player at the same time, pause other players when this player start play
lrcType0see more details
listFoldedfalseindicate whether list should folded at first
listMaxHeight-list max height
storageName‘aplayer-setting’localStorage key that store player setting

有关Hexo-Butterfly音乐播放器的添加的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗? - 2

    当我使用Bundler时,是否需要在我的Gemfile中将其列为依赖项?毕竟,我的代码中有些地方需要它。例如,当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试,但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/4758609/

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  3. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  4. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象? - 2

    当谈到运行时自省(introspection)和动态代码生成时,我认为ruby​​没有任何竞争对手,可能除了一些lisp方言。前几天,我正在做一些代码练习来探索ruby​​的动态功能,我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角,因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  5. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义,如果我打开classMyClass,并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义,我仍然想要与类定义相同的行为,但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了,我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同,类似于super,但不一定是子类? 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  6. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  7. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  8. ruby-on-rails - 在 Ruby on Rails 中添加 boolean 列值 - 2

    我正在开发一个创建网络博客的RubyonRails项目。我希望将一个名为featured的boolean数据库字段添加到Post模型中。该字段应该可以通过我添加的事件管理界面进行编辑。我使用了以下代码,但我什至没有在网站上显示另一列。$railsgeneratemigrationaddFeaturedfeatured:boolean$rakedb:migrate我是RubyonRails的新手,非常感谢任何帮助。我的index.html.erb文件中的相关代码(views):FeaturedPost架构.rb:ActiveRecord::Schema.define(:version=>

  9. ruby - 如何将便捷类方法添加到 ruby​​ 中的 Singleton 类 - 2

    假设我有一个这样的单例类:classSettingsincludeSingletondeftimeout#lazy-loadtimeoutfromconfigfile,orwhateverendend现在,如果我想知道使用什么超时,我需要编写如下内容:Settings.instance.timeout但我宁愿将其缩短为Settings.timeout使这项工作有效的一个明显方法是将设置的实现修改为:classSettingsincludeSingletondefself.timeoutinstance.timeoutenddeftimeout#lazy-loadtimeoutfromc

  10. ruby-on-rails - 向 Rails 3 添加 Ruby 扩展方法的最佳实践? - 2

    我有一个要在我的Rails3项目中使用的数组扩展方法。它应该住在哪里?我有一个应用程序/类,我最初把它放在(array_extensions.rb)中,在我的config/application.rb中我加载路径:config.autoload_paths+=%W(#{Rails.root}/应用程序/类)。但是,当我转到railsconsole时,未加载扩展。是否有一个预定义的位置可以放置我的Rails3扩展方法?或者,一种预先定义的方式来添加它们?我知道Rails有自己的数组扩展方法。我应该将我的添加到active_support/core_ext/array/conversion

随机推荐