add: 赞赏展示样式3新增背景图可选设置

carolcoral · May 31, 2024 · e8a21aa · e8a21aa
1 parent 8a5cd22
commit e8a21aa
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 10 deletions.
diff --git a/gradle.properties b/gradle.properties
@@ -1 +1 @@
-version=1.5.0
+version=1.5.1
diff --git a/src/main/java/site/xindu/afdian/config/ThemeSettingConfig.java b/src/main/java/site/xindu/afdian/config/ThemeSettingConfig.java
@@ -18,18 +18,26 @@ public class ThemeSettingConfig {
      */
     private String themeStyle = "afdian";
 
-    /**
-     * 顶部图片URL
-     */
-    private String rewardTopImgUrl = "";
-
     /**
      * 顶部图片文字
      */
     private String rewardTopTitle = "";
 
+    // 样式2
+
     /**
      * 启用顶部头像滚动
      */
     private Boolean enableRewardRoll = false;
+
+    /**
+     * 顶部图片URL
+     */
+    private String rewardTopImgUrl = "";
+
+    // 样式3
+
+    private Boolean enableTheme3Img = false;
+
+    private String theme3ImgUrl = "";
 }
diff --git a/src/main/java/site/xindu/afdian/service/AfdianRouter.java b/src/main/java/site/xindu/afdian/service/AfdianRouter.java
@@ -75,11 +75,25 @@ private void extracted(HashMap<String, Object> model, String theme) {
                     ).defaultIfEmpty(
                         "https://youimg1.c-ctrip.com/target/100m1b000001bj6if96CC.jpg");
                 model.put("rewardTopImgUrl", rewardTopImgUrl);
-                Mono<Boolean> enableRewardRoll = this.settingFetcher.get(THEME_SETTING).map(setting ->
-                    setting.get("enableRewardRoll").asBoolean()
-                ).defaultIfEmpty(false);
+                Mono<Boolean> enableRewardRoll =
+                    this.settingFetcher.get(THEME_SETTING).map(setting ->
+                        setting.get("enableRewardRoll").asBoolean()
+                    ).defaultIfEmpty(false);
                 model.put("enableRewardRoll", enableRewardRoll);
                 break;
+            case "afdian3":
+                Mono<String> theme3ImgUrl =
+                    this.settingFetcher.get(THEME_SETTING).map(setting ->
+                        setting.get("theme3ImgUrl").asText()
+                    ).defaultIfEmpty(
+                        "https://youimg1.c-ctrip.com/target/100m1b000001bj6if96CC.jpg");
+                model.put("theme3ImgUrl", theme3ImgUrl);
+                Mono<Boolean> enableTheme3Img =
+                    this.settingFetcher.get(THEME_SETTING).map(setting ->
+                        setting.get("enableTheme3Img").asBoolean()
+                    ).defaultIfEmpty(false);
+                model.put("enableTheme3Img", enableTheme3Img);
+                break;
             default:
                 break;
         }

diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
@@ -69,4 +69,22 @@ spec:
           label: 顶部图片URL
           if: $get(themeStyle).value == 'afdian2' && $get(enableRewardRoll).value
           placeholder: 请输入顶部图片地址
+          value: https://youimg1.c-ctrip.com/target/100m1b000001bj6if96CC.jpg
+        - $formkit: radio
+          name: enableTheme3Img
+          id: enableTheme3Img
+          key: enableTheme3Img
+          label: 背景图片设置
+          if: $get(themeStyle).value == 'afdian3'
+          value: false
+          options:
+            - label: 启用
+              value: true
+            - label: 禁用
+              value: false
+        - $formkit: url
+          name: theme3ImgUrl
+          label: 背景图片URL
+          if: $get(themeStyle).value == 'afdian3' && $get(enableTheme3Img).value
+          placeholder: 请输入背景图片URL
           value: https://youimg1.c-ctrip.com/target/100m1b000001bj6if96CC.jpg
diff --git a/src/main/resources/templates/afdian3.html b/src/main/resources/templates/afdian3.html
@@ -34,7 +34,8 @@
                         <a class="tags-group-icon" target="_blank"
                            th:attr="href='https://afdian.net/u/'+'${sponsor.user.user_id}'" title="">
                             <img th:src="${sponsor.user.avatar}"
-                                 th:attr="title=${sponsor.user.name}" data-ll-status="loaded" class="entered loaded"></a>
+                                 th:attr="title=${sponsor.user.name}" data-ll-status="loaded"
+                                 class="entered loaded"></a>
                     </div>
                 </div>
             </div>
@@ -106,4 +107,16 @@
        color: #5d0ac7;
    }
 </style>
+<th:block th:if="${enableTheme3Img}">
+    <style>
+        .tags-group-all.nowrapMove {
+            transform: rotate(0);
+            padding-bottom: 2rem;
+            background-image: url([[${theme3ImgUrl}]]);
+            z-index: -1;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+    </style>
+</th:block>
 </html>