Merge pull request #334 from chengzhongxue/main

侧边栏添加Steam卡片,音乐卡片

settings.yaml

@@ -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（小板报）, steam（Steam卡片）, music（音乐卡片）, friend-link（通讯录）, recent-posts（近期文章）, comments（最新评论）, categories（文章分类）, tags（文章标签）, stat（统计）, tags-stat（标签&归档&统计）。你可以随意组合或排序，以逗号隔开。
           value:
             indexWidgets:
             postWidgets:
@@ -623,6 +623,53 @@ 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: group
+          name: steam
+          label: Steam卡片
+          help: 文档请看：https://github.com/yuyinws/steam-card
+          value:
+            key:
+          children:
+            - $formkit: url
+              name: steamUrl
+              label: 跳转地址
+              value: /
+            - $formkit: textarea
+              name: cardSteam
+              label: 卡片
+              value: https://card-steam.0206.ink/card/76561198144527983/gradient1,badge,bg-game-1111460,games,screenshots,badges
+              help: https://card-steam.0206.ink/card/76561198144527983/gradient1,badge,bg-game-1111460,games,screenshots,badges
         - $formkit: number
           name: recentPost
           label: 最新文章
@@ -2570,4 +2617,4 @@ spec:
                   name: end_time
                   label: 结束时间
                   placeholder: 请输入结束时间(小时)
-                  help: 可以与开始时间相同，表示一个小时内的问候
+                  help: 可以与开始时间相同，表示一个小时内的问候

templates/assets/js/heo.js

@@ -192,9 +192,16 @@ var heo = {
 
     //作者卡片问好
     sayhi: function () {
-        if (document.querySelector('#author-info__sayhi')) {
+        if (GLOBAL_CONFIG.profileStyle == 'default') {
-            document.getElementById("author-info__sayhi").innerHTML = getTimeState() + "！我是";
+            if (document.querySelector('#author-info__sayhi')) {
+                document.getElementById("author-info__sayhi").innerHTML = getTimeState() + "！我是";
+            }
+        }else{
+            if (document.querySelector('#author-info__sayhi')) {
+                document.getElementById("author-info__sayhi").innerHTML = getTimeState();
+            }
         }
+
     },
 
     // 添加标签

templates/assets/zhheo/custom.css

@@ -191,3 +191,189 @@ 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;
+}
+/* 小板报 */
+
+
+/* Steam卡片 */
+#aside-content .item-headline-steam {
+    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-steam span {
+    margin-left: 6px
+}
+
+
+#flip-steam {
+    width: 100%;
+    height: 100%;
+    transition: transform .3s
+}
+
+#flip-steam::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200%;
+    background: linear-gradient(to right,transparent,#fff,transparent);
+    transform: translateX(-200%);
+    transition: transform .5s linear;
+    z-index: 1
+}
+
+#flip-steam:hover::before {
+    transform: translateX(100%) skewX(-60deg)
+}
+
+#aside-content #flip-wrapper-card #flip-steam .stimg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    z-index: 0
+}
+
+#aside-content #flip-wrapper-card #flip-steam .back.stimg {
+    display: none
+}
+
+@media screen and (max-width: 768px) {
+    .card-steam {
+        height:130px!important
+    }
+}
+
+.card-steam {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    padding: 0!important;
+    cursor: pointer;
+    border: none!important;
+    height: 105px;
+    margin-top: 0!important;
+    background: 0 0!important
+}
+
+/* Steam卡片 */

templates/modules/widgets/aside/music.html

@@ -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>

templates/modules/widgets/aside/steam.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- Steam卡片 -->
+<div th:fragment="steam">
+    <div class="item-headline-steam"><i class="fa-brands fa-steam"></i><span>Steam卡片</span></div>
+
+    <div class="card-widget card-steam"
+         th:attr="onclick='javascript:window.open(\''+ ${theme.config.sidebar.steam.steamUrl} +'\')'">
+        <div id="flip-wrapper-card">
+            <div id="flip-steam">
+                <div class="stimg"
+                     th:style="'background:url('+${theme.config.sidebar.steam.cardSteam}+') center center/100% no-repeat'">
+
+                </div>
+                <div class="back stimg" th:style="'background:url(' + assets_link + '/images/blank.webp) center center/100% no-repeat'"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+</html>

templates/modules/widgets/aside/welcome.html

@@ -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>