github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加左下角音乐

This commit is contained in:
1152958806@qq.com 2023-07-04 13:40:49 +08:00
parent 3095480ce4
commit 7c69d76656
13 changed files with 194 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
settings.yaml
View File

@ -1555,4 +1555,44 @@ spec:
name: background
label: 背景
value: "/themes/theme-hao/assets/images/404s.gif"
- $formkit: radio
name: nav_musicEnable
id: nav_musicEnable
key: nav_musicEnable
label: 启用左下角音乐
value: false
options:
- label: 启用
value: true
- label: 禁用
value: false
- $formkit: group
name: nav_music
label: 左下角音乐配置项
if: "$get(nav_musicEnable).value"
value:
id:
server:
all_playlist:
children:
- $formkit: text
name: id
label: 音乐的id
help: 歌单的id，可以从音乐歌单分享的链接中获取
value: "8668419170"
- $formkit: text
name: server
label: 服务
help: 歌单的服务商，例如netease（网易云音乐）,tencent（腾讯）,kugou（酷狗）,xiami（小米音乐）,baidu（百度音乐）
value: "tencent"
- $formkit: url
name: all_playlist
label: 播放列表地址
help: 用于右键查看所有歌曲
value: "https://y.qq.com/n/ryqq/playlist/8668419170"
- $formkit: url
name: meting_api
label: 音乐图片api
value: "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r"

107
templates/assets/js/heo.js
View File

@ -69,12 +69,12 @@ var heo = {
//监测是否在页面开头
addNavBackgroundInit: function() {
var e = 0
, t = 0;
, t = 0;
document.body && (e = document.body.scrollTop),
document.documentElement && (t = document.documentElement.scrollTop),
0 != (e - t > 0 ? e : t) && (document.getElementById("page-header").classList.add("nav-fixed"),
document.getElementById("page-header").classList.add("nav-visible"),
$("#cookies-window").hide())
document.getElementById("page-header").classList.add("nav-visible"),
$("#cookies-window").hide())
},
// 标签页面
@ -223,9 +223,9 @@ var heo = {
// 刷新即刻短文瀑布流
reflashEssayWaterFall: function() {
document.querySelector("#waterfall") && setTimeout((function() {
waterfall("#waterfall"),
document.getElementById("waterfall").classList.add("show")
}
waterfall("#waterfall"),
document.getElementById("waterfall").classList.add("show")
}
), 500)
},
@ -292,12 +292,12 @@ var heo = {
//隐藏cookie窗口
hidecookie: function() {
heo_cookiesTime = setTimeout((()=>{
document.getElementById("cookies-window").classList.add("cw-hide"),
setTimeout((()=>{
$("#cookies-window").hide()
document.getElementById("cookies-window").classList.add("cw-hide"),
setTimeout((()=>{
$("#cookies-window").hide()
}
), 1e3)
}
), 1e3)
}
), 3e3)
},
@ -354,59 +354,48 @@ var heo = {
},
//切换音乐播放状态
musicToggle: function () {
let msgPlay = '<i class="fa-solid fa-play"></i><span>播放音乐</span>' // 此處可以更改為你想要顯示的文字
let msgPause = '<i class="fa-solid fa-pause"></i><span>暂停音乐</span>' // 同上，但兩處均不建議更改
if (heo_musicPlaying) {
document.querySelector("#nav-music").classList.remove("playing");
document.getElementById("menu-music-toggle").innerHTML = msgPlay;
document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
document.querySelector("#consoleMusic").classList.remove("on");
heo_musicPlaying = false;
} else {
document.querySelector("#nav-music").classList.add("playing");
document.getElementById("menu-music-toggle").innerHTML = msgPause;
document.querySelector("#consoleMusic").classList.add("on");
heo_musicPlaying = true;
}
document.querySelector('meting-js').aplayer.toggle();
rm.hideRightMenu();
musicToggle: function() {
heo_musicPlaying ? (document.querySelector("#nav-music").classList.remove("playing"),
document.getElementById("menu-music-toggle").innerHTML = '<i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span>',
document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停",
document.querySelector("#consoleMusic").classList.remove("on"),
btf.snackbarShow("暂停音乐", false, 2000),
heo_musicPlaying = !1) : (document.querySelector("#nav-music").classList.add("playing"),
document.getElementById("menu-music-toggle").innerHTML = '<i class="anzhiyufont anzhiyu-icon-pause"></i><span>暂停音乐</span>',
document.querySelector("#consoleMusic").classList.add("on"),
btf.snackbarShow("播放音乐", false, 2000),
heo_musicPlaying = !0),
document.querySelector("meting-js").aplayer.toggle(),
rm.hideRightMenu()
},
//音乐上一曲
musicSkipBack: function () {
document.querySelector('meting-js').aplayer.skipBack();
rm.hideRightMenu();
musicSkipBack: function() {
document.querySelector("meting-js").aplayer.skipBack(),
rm.hideRightMenu()
},
//音乐下一曲
musicSkipForward: function () {
document.querySelector('meting-js').aplayer.skipForward();
rm.hideRightMenu();
musicSkipForward: function() {
document.querySelector("meting-js").aplayer.skipForward(),
rm.hideRightMenu()
},
//获取音乐中的名称
musicGetName: function () {
var x = $('.aplayer-title')
// var x = document.getElementsByClassName('txt');
// for (var i = x.length - 1; i >= 0; i--) {
// console.log(x[i].innerText)
// }
var arr = []
for (var i = x.length - 1; i >= 0; i--) {
arr[i] = x[i].innerText
// console.log(x[i].innerText)
}
return arr[0]
musicGetName: function() {
for (var e = $(".aplayer-title"), t = [], o = e.length - 1; o >= 0; o--)
t[o] = e[o].innerText;
return t[0]
},
// 显示打赏中控台
rewardShowConsole: function () {
$('.console-card-group-reward').attr('style', 'display: flex');
$('.console-card-group').attr('style', 'display: none');
document.querySelector("#console").classList.add("show");
heo.initConsoleState()
},
//显示中控台
@ -414,8 +403,8 @@ var heo = {
$('.console-card-group-reward').attr('style', 'display: none');
$('.console-card-group').attr('style', 'display: flex');
document.querySelector("#console").classList.add("show");
},
//隐藏中控台
@ -446,19 +435,15 @@ var heo = {
hideAsideBtn: () => { // Hide aside
const $htmlDom = document.documentElement.classList
$htmlDom.contains('hide-aside')
? saveToLocal.set('aside-status', 'show', 2)
: saveToLocal.set('aside-status', 'hide', 2)
? saveToLocal.set('aside-status', 'show', 2)
: saveToLocal.set('aside-status', 'hide', 2)
$htmlDom.toggle('hide-aside')
},
},
//初始化console图标
initConsoleState: function () {
//初始化隐藏边栏
const $htmlDom = document.documentElement.classList
$htmlDom.contains('hide-aside')
? document.querySelector("#consoleHideAside").classList.add("on")
: document.querySelector("#consoleHideAside").classList.remove("on")
initConsoleState: function() {
document.documentElement.classList.contains("hide-aside") ? document.querySelector("#consoleHideAside").classList.add("on") : document.querySelector("#consoleHideAside").classList.remove("on")
},
}

3
templates/assets/libs/aplayer/APlayer.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
templates/assets/libs/aplayer/APlayer.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
templates/assets/libs/aplayer/Meting2.min.js vendored Normal file
View File

@ -0,0 +1 @@
"use strict";function _objectSpread(a){for(var b=1;b<arguments.length;b++){var c=null==arguments[b]?{}:arguments[b],d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){_defineProperty(a,b,c[b])})}return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}class MetingJSElement extends HTMLElement{connectedCallback(){window.APlayer&&window.fetch&&(this._init(),this._parse())}disconnectedCallback(){this.lock||this.aplayer.destroy()}_camelize(a){return a.replace(/^[_.\- ]+/,"").toLowerCase().replace(/[_.\- ]+(\w|$)/g,(a,b)=>b.toUpperCase())}_init(){let a={};for(let b=0;b<this.attributes.length;b+=1)a[this._camelize(this.attributes[b].name)]=this.attributes[b].value;let b=["server","type","id","api","auth","auto","lock","name","title","artist","author","url","cover","pic","lyric","lrc"];this.meta={};for(var c=0;c<b.length;c++){let d=b[c];this.meta[d]=a[d],delete a[d]}this.config=a,this.api=this.meta.api||window.meting_api||"https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r",this.meta.auto&&this._parse_link()}_parse_link(){let a=[["music.163.com.*song.*id=(\\d+)","netease","song"],["music.163.com.*album.*id=(\\d+)","netease","album"],["music.163.com.*artist.*id=(\\d+)","netease","artist"],["music.163.com.*playlist.*id=(\\d+)","netease","playlist"],["music.163.com.*discover/toplist.*id=(\\d+)","netease","playlist"],["y.qq.com.*song/(\\w+).html","tencent","song"],["y.qq.com.*album/(\\w+).html","tencent","album"],["y.qq.com.*singer/(\\w+).html","tencent","artist"],["y.qq.com.*playsquare/(\\w+).html","tencent","playlist"],["y.qq.com.*playlist/(\\w+).html","tencent","playlist"],["xiami.com.*song/(\\w+)","xiami","song"],["xiami.com.*album/(\\w+)","xiami","album"],["xiami.com.*artist/(\\w+)","xiami","artist"],["xiami.com.*collect/(\\w+)","xiami","playlist"]];for(var b=0;b<a.length;b++){let c=a[b],d=new RegExp(c[0]),e=d.exec(this.meta.auto);if(null!==e)return this.meta.server=c[1],this.meta.type=c[2],void(this.meta.id=e[1])}}_parse(){if(this.meta.url){let a={name:this.meta.name||this.meta.title||"Audio name",artist:this.meta.artist||this.meta.author||"Audio artist",url:this.meta.url,cover:this.meta.cover||this.meta.pic,lrc:this.meta.lrc||this.meta.lyric||"",type:this.meta.type||"auto"};return a.lrc||(this.meta.lrcType=0),this.innerText&&(a.lrc=this.innerText,this.meta.lrcType=2),void this._loadPlayer([a])}let a=this.api.replace(":server",this.meta.server).replace(":type",this.meta.type).replace(":id",this.meta.id).replace(":auth",this.meta.auth).replace(":r",Math.random());fetch(a).then(a=>a.json()).then(a=>this._loadPlayer(a))}_loadPlayer(a){let b={audio:a,mutex:!0,lrcType:this.meta.lrcType||3,storageName:"metingjs"};if(a.length){let a=_objectSpread({},b,this.config);for(let b in a)("true"===a[b]||"false"===a[b])&&(a[b]="true"===a[b]);let c=document.createElement("div");a.container=c,this.appendChild(c),this.aplayer=new APlayer(a)}}}window.customElements&&!window.customElements.get("meting-js")&&(window.MetingJSElement=MetingJSElement,window.customElements.define("meting-js",MetingJSElement));

61
templates/assets/zhheo/zhheoblog.css
View File

@ -6155,7 +6155,7 @@ html {
}
/* 导航栏音乐 */
@media screen and (max-width: 1300px) {
@media screen and (max-width: 798px) {
#nav-music {
display: none !important;
}
@ -6173,10 +6173,16 @@ html {
transform-origin: left bottom;
box-shadow: var(--heo-shadow-border);
border-radius: 40px;
overflow: hidden;
user-select: none;
}
#nav-music:active {
transform: scale(0.97);
#nav-music span {
user-select: none;
}
#nav-music div {
user-select: none;
}
#nav-music.playing {
@ -6186,7 +6192,7 @@ html {
@-webkit-keyframes playingShadow {
0% {
box-shadow: 0 0px 12px -3px var(--heo-none);
box-shadow: 0 0px 12px -6px var(--heo-none);
}
50% {
@ -6194,7 +6200,7 @@ html {
}
100% {
box-shadow: 0 0px 12px -3px var(--heo-none);
box-shadow: 0 0px 12px -6px var(--heo-none);
}
}
@ -6204,7 +6210,7 @@ html {
border-radius: 40px;
z-index: 1;
transition: 0.3s;
-webkit-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg)scale(1);
border: var(--style-border-always);
-webkit-animation: changeright 24s linear infinite;
animation-play-state: paused;
@ -6212,7 +6218,7 @@ html {
#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
box-shadow: 0 0 14px #ffffffa6;
-webkit-transform: rotate(0deg) scale(1.1);
-webkit-transform: rotate(0deg)scale(1.1);
border-color: var(--heo-white);
animation-play-state: running;
}
@ -6220,27 +6226,27 @@ html {
@-webkit-keyframes changeright {
0% {
-webkit-transform: rotate(0deg) scale(1.1);
-webkit-transform: rotate(0deg)scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}
25% {
-webkit-transform: rotate(90deg) scale(1.1);
box-shadow: 0 0 14px #ffffff;
-webkit-transform: rotate(90deg)scale(1.1);
box-shadow: 0 0 10px #ffffff;
}
50% {
-webkit-transform: rotate(180deg) scale(1.1);
-webkit-transform: rotate(180deg)scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}
75% {
-webkit-transform: rotate(270deg) scale(1.1);
box-shadow: 0 0 14px #ffffff;
-webkit-transform: rotate(270deg)scale(1.1);
box-shadow: 0 0 10px #ffffff;
}
100% {
-webkit-transform: rotate(360deg) scale(1.1);
-webkit-transform: rotate(360deg)scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}
}
@ -6287,7 +6293,7 @@ html {
}
#nav-music .aplayer {
background: var(--card-bg);
background: var(--heo-card-bg);
border-radius: 60px;
height: 41px;
display: flex;
@ -6303,6 +6309,7 @@ html {
border: var(--style-border-hover);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: translateZ(0);
}
#nav-music .aplayer .aplayer-notice {
@ -6380,6 +6387,11 @@ html {
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
height: 100%;
background: none;
opacity: 0;
}
#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
opacity: 1;
}
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
@ -6391,6 +6403,11 @@ html {
opacity: 0.1;
background-color: var(--heo-white) !important;
-webkit-animation: lightBar 5s ease infinite;
animation-play-state: paused;
}
#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
animation-play-state: running;
}
@-webkit-keyframes lightBar {
@ -6408,7 +6425,6 @@ html {
}
}
/* 歌词 */
#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
width: 0;
@ -6424,20 +6440,21 @@ html {
opacity: 1;
}
#nav-music .aplayer .aplayer-lrc p {
color: #ffffffb3;
filter: blur(0.8px);
}
#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
color: var(--heo-white);
border: none;
filter: blur(0px);
}
#nav-music .aplayer .aplayer-lrc:after,
#nav-music .aplayer .aplayer-lrc:before {
#nav-music .aplayer .aplayer-lrc:after, #nav-music .aplayer .aplayer-lrc:before {
display: none;
}
#nav-music .aplayer .aplayer-lrc p {
color: #ffffffb3;
}
/* 导航栏隐藏文字 */
/* #menus > div.menus_items > div > a > span{
display: none;

1
templates/modules/head.html
View File

@ -171,6 +171,7 @@
loadingBox: [[${theme.config.other.loadingBox}]],
loadProgressBar: [[${theme.config.other.loadProgressBar}]],
error404Enable: [[${theme.config.other.error_404Enable}]],
allPlaylist: [[${theme.config.other.nav_music.all_playlist}]],
date_suffix: {
just: '刚刚',
min: '分钟前',

19
templates/modules/layouts/layout.html
View File

@ -20,6 +20,11 @@
<div th:replace="~{modules/sidebar :: sidebar}"></div>
<!-- 左下角音乐 -->
<th:block th:if="${theme.config.other.nav_musicEnable}" >
<div th:replace="~{modules/nav-music :: nav-music}"></div>
</th:block>
<!-- 内容 -->
<th:block th:replace="${content}"></th:block>
@ -70,6 +75,20 @@
<script th:src="@{/assets/libs/view-image/view-image.min.js}"></script>
<!--左下角音乐-->
<th:block th:if="${theme.config.other.nav_musicEnable}" >
<script>var meting_api = '[[${theme.config.other.nav_music.meting_api}]]'; </script>
<link rel="stylesheet" th:href="@{/assets/libs/aplayer/APlayer.min.css}" media="all" onload="this.media='all'">
<script th:src="@{/assets/libs/aplayer/APlayer.min.js}"></script>
<script th:src="@{/assets/libs/aplayer/Meting2.min.js}"></script>
</th:block>
<script th:src="@{/assets/libs/pjax/pjax.min.js}"></script>
<!-- swiper 在瞬间滚动时会使用 -->

11
templates/modules/nav-music.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 音乐 -->
<div th:fragment="nav-music" class="needEndHide" id="nav-music" onclick="heo.musicToggle()">
<div id="nav-music-hoverTips">播放音乐</div>
<meting-js th:id="${theme.config.other.nav_music.id}" th:server="${theme.config.other.nav_music.server}" type="playlist" mutex="true" preload="none" theme="var(--heo-main)" data-lrctype="0" order="random">
</meting-js>
</div>
</html>

25
templates/modules/right-menu.html
View File

@ -3,7 +3,7 @@
<!-- 右键菜单 -->
<div th:fragment="right-menu" th:if="${theme.config.rightMenu.switch}">
<script th:src="@{/assets/zhheo/rightmenu.js}"></script>
<div id="rightMenu" >
<div id="rightMenu">
<div class="rightMenu-group rightMenu-small">
<div class="rightMenu-item" id="menu-backward"><i class="iconfont icon-arrow-left"></i></div>
<div class="rightMenu-item" id="menu-forward"><i class="iconfont icon-arrow-right"></i></div>
@ -47,6 +47,28 @@
<i class="iconfont icon-baidu"></i>
<span>百度搜索</span>
</div>
<div class="rightMenu-item" id="menu-music-toggle" style="">
<i class="anzhiyufont anzhiyu-icon-play"></i>
<span>播放音乐</span>
</div>
<div class="rightMenu-item" id="menu-music-back" style="">
<i class="anzhiyufont anzhiyu-icon-backward"></i>
<span>切换到上一首</span>
</div>
<div class="rightMenu-item" id="menu-music-forward" style="">
<i class="anzhiyufont anzhiyu-icon-forward"></i>
<span>切换到下一首</span>
</div>
<div class="rightMenu-item" id="menu-music-playlist"
th:attr="onclick='javascript:window.open(\''+ ${theme.config.other.nav_music.all_playlist} +'\')'"
style="">
<i class="anzhiyufont anzhiyu-icon-radio"></i>
<span>查看所有歌曲</span>
</div>
<div class="rightMenu-item" id="menu-music-copyMusicName" style="">
<i class="anzhiyufont anzhiyu-icon-copy"></i>
<span>复制歌名</span>
</div>
</div>
<div class="rightMenu-group rightMenu-line rightMenuOther">
<a class="rightMenu-item menu-link" id="menu-randomPost" onclick="toRandomPost()">
@ -87,4 +109,5 @@
addRightMenuClickEvent();
</script>
</div>
</html>

4
templates/modules/widgets/aside/comments.html
View File

@ -19,11 +19,11 @@
let commenthtml = '';
res.forEach((items)=>{
commenthtml += `<div class="aside-list-item">
<a class="thumbnail" href="${items.url}">
<a class="thumbnail" href="${items.url + '#' + items.id}">
<img loading="lazy" alt="dasda" src="${items.avatar}">
</a>
<div class="content">
<a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;" href="${items.url}" title="test">
<a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;" href="${items.url + '#' + items.id}" title="test">
${items.commentText}
</a>
<div class="name">

8
templates/modules/widgets/console.html
View File

@ -98,9 +98,11 @@
<!--<div class="console-btn-item" id="assist-open" onclick="heo.hideConsole()" title="无障碍工具栏"><a-->
<!-- class="assist-btn"><i class="fa-duotone fa-wheelchair"></i></a>-->
<!--</div>-->
<!--<div class="console-btn-item" id="consoleMusic" onclick="heo.musicToggle()" title="音乐开关"><a-->
<!-- class="music-switch"><i class="fa-duotone fa-music"></i></a>-->
<!--</div>-->
<div th:if="${theme.config.other.nav_musicEnable}" class="console-btn-item" id="consoleMusic" onclick="heo.musicToggle()" title="音乐开关">
<a class="music-switch" data-pjax-state="">
<i class="anzhiyufont anzhiyu-icon-music"></i>
</a>
</div>
</div>
<div class="console-mask" href="javascript:void(0);" onclick="heo.hideConsole()" rel="external nofollow">
</div>

2
templates/post.html
View File

@ -263,7 +263,7 @@
th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
<div class="content is-center" >
<div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}]]
[[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]
</div>
<div class="title" style="color: white" th:text="${recommandPost.spec.title}"></div>
</div>