hexo博客yilia-puls主题使用aplayer音乐插件
文章目录
- hexo博客yilia-puls主题使用aplayer音乐插件
- 一、安装并启用aplayer插件
- 二、添加aplayer插件到主页
- 1.直接拉取仓库到本地。
- 2.自己进行配置
- 三、一些问题
hexo博客yilia-puls主题使用aplayer音乐插件
由于yilia-puls
使用的网易云插件放歌比较麻烦,所以添加了aplayer
音乐插件,支持播放歌单,可以在我的博客查看效果兔子的个人博客 - Hexo Blog (gitee.io)。经过测试,能够支持QQ音乐和网易云音乐歌单(其他的只是我没测,酷狗除外,确定不支持了)。
一、安装并启用aplayer插件
安装aplayer插件
直接使用
npm install --save hexo-tag-aplayer
安装即可。使用aplayer插件
在博客的根目录下的
_config.yml
,注意不是主题的_config.yml
文件,下添加如下代码。aplayer:meting: true
文章中使用
只需要在文章对应位置添加如下代码即可,详细的配置项的意义见MoePlayer/hexo-tag-aplayer: Embed aplayer in Hexo posts/pages (github.com)
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" %}
二、添加aplayer插件到主页
和上一篇博客说的一样,同样可以自己配置,或者直接拉取修改好的代码。修改完效果如下
1.直接拉取仓库到本地。
我已经将代码修改后向yilia-plus
的原作者JoeyBling/hexo-theme-yilia-plus: 一个简洁优雅的hexo主题提出了PR请求,等待同意后,拉取更新即可,如果不想等,拉取我从原作者fork的仓库下来也行ProudRabbit/hexo-theme-yilia-plus,拉取到你的博客主题下之后进行配置即可,最好先备份下你原来的配置,防止配置丢失。在主题的配置文件_config.yml
的169
行,将歌单信息填写进去即可。
我的hexo版本
hexo: 4.2.1
hexo-cli: 3.1.0
os: Windows_NT 10.0.19042 win32 x64
node: 12.18.2
v8: 7.8.279.23-node.39
uv: 1.38.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 6
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0
# Header-菜单
menu:主页: /技术笔记: https://zhousiwei.gitee.io/ibooks/随笔: /tags/随笔/# subNav-子导航
subNav:- github: "#"- github: "#" # (支持设置多个)- gitee: "#" # 码云- jianshu: "#" #简书# - cnblog: "#"# - blog: "#"# - csdn: "#"# - rss: "#"# - zhihu: "#"# - qq: "img/2434387555.jpg"# - weixin: "img/weixin_.png"# - weibo: "#"# - douban: "#"# - segmentfault: "#"# - bilibili: "#"# - acfun: "#"# - mail: "mailto:zhousiwei0911@qq.com"# - facebook: "#"# - google: "#"# - twitter: "#"# - linkedin: "#"# 悬停预览图片效果
hover_effect:## `global` 0: Set separately, 1: Enable global 2: Close global## `global` 0: 分开设置, 1: 全局启用, 2: 全局关闭global: 2# SubNav-导航subNav: true# RSS订阅(关于如何配置启用:https://www.jianshu.com/p/2aaac7a19736)
rss: /atom.xml# 是否需要修改 root 路径
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 / 设为 /blog/。
# 新版本已弃用,请在博客根目录文件进行配置
# root: /# Content# 文章太长,截断按钮文字(在需要截断的行增加此标记:<!--more-->)
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false# Open link in a new tab | 是否在新窗口打开链接
open_in_new:article: true # 文章链接menu: true # 导航菜单subNav: true # 子菜单# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay: /img/alipay.jpg
# 微信二维码图片地址
weixin: /img/weixin.png# 目录
# 目录设定:0-不显示目录; 1-文章对应的md文件里有toc:true属性,才有目录; 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置,如果你的目录标题习惯有标号,置为true即可隐藏hexo重复的序号;否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录,不存在的…'# 是否有快速回到顶部的按钮
top: true# Miscellaneous
# 百度统计
baidu_analytics: ''
google_analytics: ''# 网站图标
favicon: /favicon.ico# 你的头像url
avatar: /img/head.jpg# 是否开启分享
share_jia: true# 评论:1、畅言;2、Disqus;3、Gitment;4、Giteement 5、beaudar-表达
# 不需要使用某项,直接设置值为false,或注释掉
# 具体请参考wiki:https://github.com/JoeyBling/hexo-theme-yilia-plus/wiki# 1、畅言
changyan_appid: false
changyan_conf: false# 2、Disqus 在hexo根目录的config里也有disqus_shortname字段,优先使用yilia-plus的
disqus: false# 3、Gitment----基于GitHub的评论系统(关闭请设置gitment_owner为false)
# 关于如何集成:https://www.jianshu.com/p/ac7658cc912f
gitment_owner: false #你的 GitHub ID
# 是否使用官方js(false可以提升访问速度,本地修改过一部分的js,官方js可能会出现服务器不稳定,不太建议使用)
gitment_remote: false
gitment_repo: '' #存储评论的 repo name(需要在Github创建)
gitment_oauth:client_id: '' #client IDclient_secret: '' #client secret# 4、Giteement----【国内用户建议使用这个,相对比较快】
# 关于如何集成:https://www.jianshu.com/p/f5c4633524c7
# 基于码云的评论系统(https://gitee.com/zhousiwei/giteement)
giteement:enable: false # 是否启用码云评论系统# 是否使用官方js(false可以提升访问速度)remote: falseredirect_uri: '' # 应用回调地址(请和配置的第三方应用保持一致)# 不能更改(网上开源项目`https://github.com/Rob--W/cors-anywhere`作者提供的专门用来跨域服务器的配置)oauth_uri: https://cors-anywhere.herokuapp.com/https://gitee.com/oauth/tokengiteeID: '' # 你的码云账号英文名# 存储评论的 repo name(需要在码云仓库创建公开仓库)repo: ''gitment_oauth:client_id: '' #client IDclient_secret: '' #client secret# 5、beaudar-表达 评论,由于giteement和gitment都不能使用了,所以使用beaudar
# 插件配置地址 https://beaudar.lipk.org/
beaudar:enable: truerepo: '' # 仓库名称 注意直接从GitHub上复制 / 左右可能有空格,注意删除issue_term: 'pathname' # beaudar 生成的博客文章 ↔️ Issue 映射关系label: 'comment' # issue 标签,选择将分配给 Beaudar 创建的问题的标签theme: 'github-light' # beaudar 主题# 访问量统计功能(不蒜子)
busuanzi:enable: truesite_visit: true # 站点访问量显示article_visit: true # 文章访问量显示# 音乐插件
music:enable: true # 是否使用音乐插件text: '' # 提示文本(关闭请设置为false)cloudMusic: # 网易云音乐插件enable: false # 使用网易云# 播放器尺寸类型(1:长尺寸、2:短尺寸)type: 2id: 30245064 # 网易云分享的音乐ID(更换音乐请更改此配置项) 572578819 奏之曲 5308028 My Soul 30245064再次,四月是你的谎言 33785991 badApple 八音盒版autoPlay: false # 是否开启自动播放# aplayer 音乐插件,https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md# 确保安装了 npm install --save hexo-tag-aplayer,并且在hexo的配置文件_config.yml文件中添加以下两行# aplayer:# meting: true# 如果想在文章中使用 在文章对应位置添加 以下代码即可# {% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" ... %}aplayer: # aplayer 音乐插件enable: true # 使用aplayerid: '7786619105' # 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字server: 'tencent' # 必须值 音乐平台: netease, tencent, kugou, xiami, baidutype: 'playlist' # 必须值 song, playlist, album, search, artistfixed: true # false 开启固定模式 true 开启吸底模式loop: none # 列表循环模式:all, one,noneorder: random # 列表播放模式: list, randomvolume: 0.4 # 播放器音量listfolded: true # 指定音乐播放列表是否折叠autoplay: false # 自动播放,移动端浏览器暂时不支持此功能mutex: true # 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停listmaxheight: 400px # 播放列表的最大长度preload: none # 音乐文件预载入模式,可选项: none, metadata, autotheme: #00b9f1 # 播放器风格色彩设置# 页面点击小红心
clickLove:# (关闭请设置为false)enable: true# GitHub Ribbons(https://github.blog/2008-12-19-github-ribbons/)
github:# (关闭请设置为false)url: https://github.com/JoeyBling/hexo-theme-yilia-plus# 页脚 Litten(此配置项已弃用)
# 帮助我们让更多人可以更方便使用Hexo,请尽量不要修改此主题配置
pageFooter:litten: GitHub:<a href="https://github.com/JoeyBling/hexo-theme-yilia-plus" target="_blank">hexo-theme-yilia-plus</a># 开启百度站长平台自动推送(https://ziyuan.baidu.com/linksubmit/index)
baidu_push: false# 版权声明
# 版权声明type设定:0-关闭版权声明; 1-文章对应的md文件里有copyright: true属性,才有版权声明; 2-所有文章均有版权声明
copyright_type: 2
# 版权声明自定义文本(关闭请设置为false)
copyright_text: # 网站成立年份(默认为 2018,若填入年份小于当前年份,则显示为 2018-2019 类似的格式)
since: 2018# Progress Bar | 页面加载进度条
# Demo: http://github.hubspot.com/pace/docs/welcome/
# type: barber-shop|big-counter|bounce|center-atom|center-circle|
# center-radar|center-simple|corner-indicator|flash|flat-top|
# loading-bar|mac-osx|minimal
# color: black|blue|green|orange|pink|purple|red|silver|white|yellow|
progressBar:enable: falsetype: 'minimal' # Keep Quotes | 保留引号避免出错(某些type会导致样式重叠排版错误)color: blue# Apple Touch icon 苹果图标(关闭请设置为false)
apple_touch_icon: '/apple-touch-icon-180x180.png'# Tab Title Change | 标签页标题切换
tab_title_change:enable: trueleft_tab_title: '(つェ⊂) 我藏好了哦~ 'return_tab_title: '(*´∇`*) 被你发现啦~ '# https://github.com/willin/hexo-wordcount
# 是否开启字数统计(关闭请设置enable为false)
# 也可以单独在md文件里Front-matter设置`no_word_count: true`属性,来自定义关闭字数统计
word_count:enable: true# 只在文章详情显示(不在首页显示)only_article_visit: true# 文字输入特效
# https://github.com/disjukr/activate-power-mode
activate_power_mode:enable: true# 使输入模式丰富多彩colorful: true# 是否开启摇动shake: false# 飘雪特效
# https://github.com/MlgmXyysd/snow.js
snow:enable: truetype: 1 # 1 小雪花 2 大雪花# https://github.com/hustcc/canvas-nest.js
# 配置详见: https://github.com/hustcc/canvas-nest.js#configuration
# 动态线条效果,会向鼠标集中
canvas_nest:enable: truecolor: '28,28,28' # 线条颜色, default: '0,0,0'; RGB values: (R,G,B).(note: 使用 ',' 分开.)pointColor: '26,1,57' # 点的颜色, default: '0,0,0'; RGB values: (R,G,B).(note: 使用 ',' 分开.)opacity: '0.5' # 线条不透明度 (0~1), default: 0.5. 1不透明count: '99' # 线条数量, default: 99.zIndex: '-1' # z-index 背景属性, default: -1.# 看板娘动态模型插件
## https://github.com/JoeyBling/live2d-widget.js
live2d:# (关闭请设置为false)enable: false# 模型名称(取值请参考:https://github.com/JoeyBling/hexo-theme-yilia-plus/wiki/live2d%E6%A8%A1%E5%9E%8B%E5%8C%85%E5%B1%95%E7%A4%BA)model: hibikidisplay:position: right # 显示位置:left/right(default: 'right')width: 145 # 模型的长度(default: 150)height: 315 # 模型的高度(default: 300)hOffset: 50 # 水平偏移(default: 0)#vOffset: -20 # 垂直偏移(default: -20)mobile:show: false # 是否在移动设备上显示(default: true)scale: 0.6 # 移动设备上的缩放(default: 0.5)react:opacity: 0.8 # 模型透明度(default: 0.7)# 样式定制 - 一般不需要修改,除非有很强的定制欲望…
style:# 头像上面的背景颜色# header: '#D3D1DC'header: '#4d4d4d'gif:# 是否启用左侧边栏动态图效果enable: false# 自定义背景图路径(默认可以不设置,提供默认背景图)# path: /img/biubiubiu.gif# 右滑板块背景slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'# slider的设置
slider:# 是否默认展开tags板块showTags: true# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
# friends: false
smart_menu:innerArchive: '所有文章'friends: '友链'aboutme: '关于我'# 友情链接
friends:技术笔记: #网站名称#网站地址url: https://zhousiwei.gitee.io/ibooks/#网站图片(可忽略不写)img: https://zhousiwei.gitee.io/ibooks/favicon.ico#网站简介(可忽略不写)description: 记录工作和学习过程中的笔记:Java、前端开发、Hexo博客、聚合支付、Linux笔记、ElasticSearch、ELK日志分析GitHub:url: https://github.com/JoeyBling码云:url: https://gitee.com/zhousiwei简书:url: https://www.jianshu.com/u/02cbf31a043aCSDN:url: https://blog.csdn.net/qq_30930805# 关于我
aboutme: 主要涉及技术:<br>Java后端开发、聚合支付、<br>公众号开发、开源爱好者、Linux<br><br>联系QQ:2434387555<br><br>很惭愧<br><br>只做了一点微小的工作<br>谢谢大
2.自己进行配置
- 修改
yilia-plus/layout/_partial/left-col.ejs
文件,将原来网易云音乐所在的代码用替换为以下代码
<% if (theme.music){ %><%# "打开音乐插件" %><% if (theme.music.text || theme.music.text==null){ %><% var musicText=( theme.music.text==null || theme.music.text==true ) ? "这似乎是首纯音乐,请尽情的欣赏它吧!" : theme.music.text; %><p style="font-size: 12px;"><%-musicText%> <p><% } %><% if (theme.music.cloudMusic.enable){ %><%# "网易云音乐插件" %><%# "bottom:120px; left:auto;position:absolute; width:85%" %><% var defaultHeight=theme.music.cloudMusic.type==1 ? '32' : '66' ; %><% var defaultIframeHeight=theme.music.cloudMusic.type==1 ? '52' : '86' ; %><div><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240"height="<%=defaultIframeHeight%>"src="//music.163.com/outchain/player?type=2&id=<%=theme.music.cloudMusic.id||1334445174%>&auto=<%=theme.music.cloudMusic.autoPlay?1:0%>&height=<%=defaultHeight%>"></iframe></div><% } %><% if (theme.music.aplayer.enable){ %><%# "aplayer音乐插件" %><div id="aplayer-hjnObCgk" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="<%=theme.music.aplayer.id%>"data-server="<%=theme.music.aplayer.server%>" data-type="<%=theme.music.aplayer.type%>" data-loop="<%=theme.music.aplayer.loop%>"data-order="<%=theme.music.aplayer.order%>" data-lrctype="0" data-listfolded="<%=theme.music.aplayer.listfolded%>" data-fixed="<%=theme.music.aplayer.fixed%>" data-autoplay="<%=theme.music.aplayer.autoplay%>" data-volume="<%=theme.music.aplayer.volume%>" data-mutex="<%=theme.music.aplayer.mutex%>" data-listmaxheight="<%=theme.music.aplayer.listmaxheight%>" data-preload="<%=theme.music.aplayer.preload%>" data-theme="<%=theme.music.aplayer.theme%>"></div><% } %>
<% } %>
- 修改
yilia-plus/_config.yml
文件
将原来网易云音乐的配置项改为以下内容。
# 音乐插件
music:enable: true # 是否使用音乐插件text: '' # 提示文本(关闭请设置为false)cloudMusic: # 网易云音乐插件enable: false # 使用网易云# 播放器尺寸类型(1:长尺寸、2:短尺寸)type: 2id: 30245064 # 网易云分享的音乐ID(更换音乐请更改此配置项) 572578819 奏之曲 5308028 My Soul 30245064再次,四月是你的谎言 33785991 badApple 八音盒版autoPlay: false # 是否开启自动播放# aplayer 音乐插件,https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md# 确保安装了 npm install --save hexo-tag-aplayer,并且在hexo的配置文件_config.yml文件中添加以下两行# aplayer:# meting: true# 如果想在文章中使用 在文章对应位置添加 以下代码即可# {% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" ... %}aplayer: # aplayer 音乐插件enable: true # 使用aplayerid: '7786619105' # 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字server: 'tencent' # 必须值 音乐平台: netease, tencent, kugou, xiami, baidutype: 'playlist' # 必须值 song, playlist, album, search, artistfixed: true # false 开启固定模式 true 开启吸底模式loop: none # 列表循环模式:all, one,noneorder: random # 列表播放模式: list, randomvolume: 0.4 # 播放器音量listfolded: true # 指定音乐播放列表是否折叠autoplay: false # 自动播放,移动端浏览器暂时不支持此功能mutex: true # 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停listmaxheight: 400px # 播放列表的最大长度preload: none # 音乐文件预载入模式,可选项: none, metadata, autotheme: #00b9f1 # 播放器风格色彩设置
三、一些问题
在PC端的音乐软件需要先将歌单分享到QQ空间或者微博,然后用浏览器打开生成的歌单链接才能获取到歌单的id
,网页URL最后的那一串数字就是歌单id。
hexo博客yilia-puls主题使用aplayer音乐插件相关推荐
- hexo博客yilia主题_缺失模块_解决方案
hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...
- Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...
- hexo博客yilia主题 如何自定义个人博客的背景图片
hexo博客yilia主题 博客背景的设置 个人博客系列文章目录 hexo博客yilia主题 所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
- hexo博客搭建及主题优化(一)
个人博客 个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客 介 ...
- Hexo博客(Snail主题)搭建回顾概览
Hexo博客(Snail主题)搭建回顾概览 笔者搭建博客地址:saltyfishyjk's Blog 文章目录 Hexo博客(Snail主题)搭建回顾概览 Part 0 前言 写作背景 定位 您在这里 ...
- Hexo博客搭建之主题构建(melody)
前言 上一章主要记录和说明Hexo的基础搭建和使用技巧. 本章, 我们主要记录下Hexo博客中关于主题的使用. 主题的选用后, 其实就是大量的配置. 以及第三方的集成, 是一件苦工, 但不难. 但是实 ...
- 给自己的hexo博客个性化Volantis主题
文章目录 准备工作 一.搭建一个大致框架 二.在_config.yml的一些基础配置 三.在_config.volantis.yml的进阶配置 1.首先我们要创建页面 2.自定义导航栏 3.自定义友链 ...
- hexo博客yilia主题添加复制代码块功能
博客中的复制代码块功能还是挺实用的,本文参考自 这个博客,感谢并膜拜这位大佬,该博客应该是yilia主题添加复制代码块功能的首创,详细记录了整个过程,看起来比较繁琐(无贬义),所以我单独整理一份最终版 ...
- Hexo博客yilia主题文章添加目录
参考文章 添加目录的文章有一些是自己添加css文件和修主题配置 作者也更新了文章大体目录的功能 打开配置文件themes/yilia/_config.yml 你可以选择toc设置为1 或者2 toc: ...
- Hexo博客yilia主题添加Gitment评论系统
gitment是imsun利用github上的issues做的评论系统,我这里大力推荐,原因有三: 注册简单,只要填写APP名和主页地址 实现方便,只要简单的配置 没有广告,这个很重要 注册OAuth ...
最新文章
- UESTC 1811 Hero Saving Princess
- ubuntu 配置nfs server
- ES6 -Set 和 Map 数据结构
- python3基础语法-Python3入门(三)——Python基础语法
- 设置char变量指定位为0或1
- php和python和javascript_Node.js与PHP、Python的字符处理性能对比
- canal数据同步(canal安装)
- loj2090. 「ZJOI2016」旅行者
- JAVA学习笔记-Scanner的使用
- 问题 L: 超超的中等意思
- C++ 2022常见知识点
- ubuntu hadoop安装教程
- 信号与系统 --- 傅里叶变换时/频对照表(个人学习笔记)
- Linux brctl 命令,虚拟网络设备 LinuxBridge 管理工具
- SS服务未启动,核心功能不可用的解决办法
- 老师常用选择题,选择框,单选框,以及各行业产品配置表单选配置明细等
- 《大数据之路:阿里巴巴大数据实践》-第4篇 数据应用篇 -第16章 数据应用
- HTML基础学习(菜鸟教程和W3school参考手册)
- 台式计算机能分享热点吗,台式机能做wifi热点吗
- C++Primer Excise Ch1