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-28 22:17:10 +08:00
parent 5ab2e8a298
commit 92992e9677
4 changed files with 170 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
settings.yaml
View File

@ -427,7 +427,7 @@ spec:
- $formkit: group
name: widgetss
label: 侧边栏内容
help: 目前提供的小部件有：profile（站点资料）, wechat（微信）,friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
help: 目前提供的小部件有：profile（站点资料）, wechat（微信）,welcome（小板报）,music（音乐卡片）, friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
value:
indexWidgets:
postWidgets:
@ -623,6 +623,37 @@ spec:
label: 纬度坐标
help: 示例：22.582401
placeholder: 请输入纬度坐标
- $formkit: group
name: music
label: 音乐卡片
help: 文档请看：https://github.com/zonemeen/netease-recent-profile
value:
key:
children:
- $formkit: url
name: musicUrl
label: 跳转地址
value: /music
- $formkit: textarea
name: lightMsimg
label: 浅色卡片
value: https://card-music.0206.ink/?id=59878659&theme=card&themeColor=e60026&mode=light&size=300&show_random=1
help: https://card-music.0206.ink/?id=59878659&theme=card&themeColor=e60026&mode=light&size=300&show_random=1
- $formkit: textarea
name: lightBackMsimg
label: 浅色翻页卡片
value: https://card-music.0206.ink/?id=59878659&size=60&type=1&mode=light&title=%E6%9C%80%E8%BF%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
help: https://card-music.0206.ink/?id=59878659&size=60&type=1&mode=light&title=%E6%9C%80%E8%BF%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
- $formkit: textarea
name: darkMsimg
label: 深色卡片
value: https://card-music.0206.ink/?id=59878659&theme=card&themeColor=e60026&mode=dark&size=300&show_random=1
help: https://card-music.0206.ink/?id=59878659&theme=card&themeColor=e60026&mode=dark&size=300&show_random=1
- $formkit: textarea
name: darkBackMsimg
label: 深色翻页卡片
value: https://card-music.0206.ink/?id=59878659&size=60%E2%80%A6F%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
help: https://card-music.0206.ink/?id=59878659&size=60%E2%80%A6F%91%E5%B8%B8%E5%90%AC%E6%A6%9C%E5%8D%95&number=6
- $formkit: number
name: recentPost
label: 最新文章

103
templates/assets/zhheo/custom.css
View File

@ -191,3 +191,106 @@ ul li {
/* 音乐天地 */
#aside-content .item-headline-music {
padding-bottom: 0;
margin-left: 8px;
margin-top: 15px;
margin-bottom: 5px;
font-size: 1em;
font-weight: 700;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center
}
#aside-content .item-headline-music span {
margin-left: 6px
}
#flip-wrapper-card {
-webkit-perspective: 1000;
perspective: 1000
}
#flip-wrapper-card {
position: relative;
width: 100%;
height: 100%;
z-index: 1
}
#flip-music {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: cubic-bezier(0, 0, 0, 1.29) .3s
}
#aside-content #flip-wrapper-card #flip-music .msimg {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-size: 100%
}
#aside-content #flip-wrapper-card #flip-music .back.msimg {
display: block;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
background-size: 100%
}
#flip-wrapper-card:hover #flip-music {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
@media screen and (max-width: 768px) {
.card-music {
height: 520px !important
}
}
.card-music {
display: flex;
justify-content: center;
align-content: center;
padding: 0 !important;
cursor: pointer;
border: none !important;
height: 405px;
margin-top: 0 !important;
background: 0 0 !important
}
/* 音乐天地 */
/* 小板报 */
#welcome-info {
overflow: hidden;
border-radius: 14px;
--hao-welcome-color: #49B1F5;
--hao-ip-color: #49B1F5;
--hao-gl-size: 16px !important;
}
#aside-content .card-announcement .item-headline i{
color: red;
}
/* 小板报 */

34
templates/modules/widgets/aside/music.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 音乐卡片 -->
<div th:fragment="music">
<div class="item-headline-music"><i class="haofont hao-icon-music"></i><span>音乐天地</span></div>
<div class="card-widget card-music"
th:attr="onclick='javascript:window.open(\''+ ${theme.config.sidebar.music.musicUrl} +'\')'">
<div id="flip-wrapper-card">
<div id="flip-music">
<div class="msimg"
th:style="'background:url('+${theme.config.sidebar.music.lightMsimg}+') center center/100% no-repeat'">
</div>
<div class="back msimg"
th:style="'background:url('+${theme.config.sidebar.music.lightBackMsimg}+') center center/100% no-repeat'">
</div>
</div>
</div>
</div>
<style>
[data-theme=dark] #aside-content #flip-wrapper-card #flip-music .msimg {
background: url("[(${theme.config.sidebar.music.darkMsimg})]") center center/100% no-repeat !important
}
[data-theme=dark] #aside-content #flip-wrapper-card #flip-music .back.msimg {
background: url("[(${theme.config.sidebar.music.darkBackMsimg})]") center center/100% no-repeat !important
}
</style>
</div>
</html>

16
templates/modules/widgets/aside/welcome.html
View File

@ -1,25 +1,11 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 小板报 -->
<div class="card-widget card-announcement" th:fragment="welcome">
<div class="item-headline"><i class="haofont hao-icon-bullhorn"
style="font-size: 0.9rem;font-weight: 700;"></i><span>小板报</span></div>
<div id="welcome-info"></div>
<style>
#welcome-info {
overflow: hidden;
border-radius: 14px;
--hao-welcome-color: #49B1F5;
--hao-ip-color: #49B1F5;
--hao-gl-size: 16px !important;
}
#aside-content .card-announcement .item-headline i{
color: red;
}
</style>
</div>
</html>