新增：捐赠样式支持海报和二维码样式，默认海报

settings.yaml

@@ -604,14 +604,26 @@ spec:
               label:  默认开启
             - value: false
               label:  默认关闭
-        - $formkit: attachment
+        - $formkit: radio
-          name: donate_alipay
+          name: post_donate_style
-          label: 支付宝捐赠二维码
+          label: 文章打赏样式
-          placeholder: '请输入/选择图片路径'
+          value: donate_style_poster
+          help: '支持海报样式和二维码样式。'
+          options:
+            - value: donate_style_poster
+              label: 海报
+            - value: donate_style_qr
+              label: 二维码
         - $formkit: attachment
           name: donate_wechat
           label: 微信捐赠二维码
           placeholder: '请输入/选择图片路径'
+          help: '请输入/选择微信捐赠海报样式/仅二维码的图片。'
+        - $formkit: attachment
+          name: donate_alipay
+          label: 支付宝捐赠二维码
+          placeholder: '请输入/选择图片路径'
+          help: '请输入/选择支付宝捐赠海报样式/仅二维码的图片。'
     - group: sidebar
       label: '侧边栏配置'
       formSchema:

src/css/post.less

@@ -43,12 +43,58 @@
           border-radius: 5px;
           overflow: hidden;
           display: flex;
+
+          li {
+            margin-right: 10px;
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          img {
+            max-width: 200px;
+            max-height: 260px;
+            object-fit: cover;
+          }
         }
 
-        img {
+        .qr-code {
-          max-width: 200px;
+          border: 1px solid var(--theme);
-          max-height: 260px;
+          border-radius: 10px;
-          object-fit: cover;
+          width: 150px;
+          height: 150px;
+          position: relative;
+          overflow: hidden;
+
+          img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            display: block;
+            width: 100%;
+            height: 100%;
+            transform:translate(-50%,-50%);
+          }
+        }
+
+        .qr-type {
+          margin-top: 10px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          svg {
+            width: 1.6rem;
+            height: 1.6rem;
+            margin-right: 5px;
+          }
+
+          span {
+            font-weight: bold;
+            font-size: 1.05rem;
+            color: var(--main);
+          }
         }
       }
 
@@ -223,6 +269,15 @@
   .admire .donate-list ol {
     flex-wrap: wrap;
 
+    li {
+      margin-bottom: 10px;
+      margin-right: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
     img {
       width: 200px;
     }

templates/main/admire.html

@@ -2,19 +2,44 @@
      th:with="donate=${enableDonate && (!#strings.isEmpty(theme.config.post.donate_alipay) || !#strings.isEmpty(theme.config.post.donate_wechat))}">
     <div th:if="${donate || type == 'Post'}" class="admire">
         <div class="admire-content">
-            <button th:if="${donate}" class="donate">
+            <button th:if="${donate}" class="donate" type="button">
                 <i class="ri-bank-card-line"></i>
                 <span>打赏</span>
-                <div class="donate-list">
+                <div class="donate-list" th:if="${theme.config.post.post_donate_style == 'donate_style_poster'}">
                     <ol>
-                        <li th:if="${!#strings.isEmpty(theme.config.post.donate_alipay)}"><img
-                                th:src="${theme.config.post.donate_alipay}" alt="支付宝捐赠"></li>
                         <li th:if="${!#strings.isEmpty(theme.config.post.donate_wechat)}"><img
                                 th:src="${theme.config.post.donate_wechat}" alt="微信捐赠"></li>
+                        <li th:if="${!#strings.isEmpty(theme.config.post.donate_alipay)}"><img
+                                th:src="${theme.config.post.donate_alipay}" alt="支付宝捐赠"></li>
+                    </ol>
+                </div>
+
+                <div class="donate-list" th:if="${theme.config.post.post_donate_style == 'donate_style_qr'}">
+                    <ol>
+                        <li th:if="${!#strings.isEmpty(theme.config.post.donate_wechat)}">
+                            <div class="qr-code">
+                                <img
+                                        th:src="${theme.config.post.donate_wechat}" alt="微信捐赠">
+                            </div>
+                            <div class="qr-type">
+                                <svg t="1711411268266" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M0 488.96v-30.72C2.56 430.08 7.68 404.48 15.36 378.88c20.48-66.56 53.76-122.88 99.84-171.52C179.2 138.24 256 94.72 340.48 66.56c48.64-15.36 97.28-23.04 145.92-25.6 40.96-2.56 79.36 0 120.32 7.68 33.28 5.12 64 12.8 97.28 25.6 79.36 28.16 148.48 71.68 207.36 133.12 7.68 7.68 12.8 15.36 20.48 23.04-2.56 0-2.56 2.56-5.12 2.56-20.48 10.24-40.96 20.48-61.44 28.16-143.36 66.56-286.72 133.12-430.08 197.12-28.16 12.8-56.32 10.24-81.92-5.12-20.48-12.8-38.4-25.6-58.88-38.4-12.8-10.24-25.6-17.92-40.96-28.16-12.8-7.68-20.48-2.56-20.48 12.8v2.56c2.56 12.8 5.12 25.6 10.24 38.4 25.6 61.44 51.2 120.32 76.8 181.76 7.68 17.92 20.48 25.6 35.84 23.04 10.24 0 20.48-2.56 28.16-7.68 30.72-15.36 58.88-33.28 87.04-51.2 156.16-92.16 309.76-184.32 465.92-276.48 10.24-7.68 23.04-12.8 33.28-20.48 0 2.56 2.56 2.56 2.56 5.12 5.12 10.24 10.24 17.92 12.8 28.16 28.16 61.44 40.96 125.44 35.84 192-2.56 28.16-7.68 56.32-15.36 84.48-17.92 61.44-48.64 115.2-92.16 163.84-51.2 56.32-115.2 99.84-184.32 128-40.96 15.36-81.92 28.16-122.88 35.84-28.16 5.12-56.32 7.68-81.92 7.68h-46.08c-20.48-2.56-40.96-2.56-58.88-5.12-30.72-5.12-61.44-12.8-89.6-23.04H322.56c-12.8 7.68-23.04 15.36-35.84 23.04-28.16 17.92-53.76 33.28-81.92 48.64-5.12 2.56-12.8 5.12-17.92 5.12s-10.24-2.56-10.24-10.24c0-5.12 0-12.8 2.56-17.92 5.12-38.4 12.8-74.24 20.48-112.64 0-5.12 0-7.68-5.12-10.24-15.36-12.8-30.72-23.04-46.08-38.4-51.2-46.08-92.16-102.4-117.76-166.4C20.48 599.04 12.8 568.32 7.68 537.6c-2.56-12.8-2.56-25.6-2.56-40.96-5.12 0-5.12-2.56-5.12-7.68z" fill="#6BCC03" p-id="6640"></path></svg>
+                                <span>微信</span>
+                            </div>
+                        </li>
+                        <li th:if="${!#strings.isEmpty(theme.config.post.donate_alipay)}">
+                            <div class="qr-code">
+                                <img
+                                        th:src="${theme.config.post.donate_alipay}" alt="支付宝捐赠">
+                            </div>
+                            <div class="qr-type">
+                                <svg t="1711409378030" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="1453"></path></svg>
+                                <span>支付宝</span>
+                            </div>
+                        </li>
                     </ol>
                 </div>
             </button>
-            <button th:if="${type == 'Post'}" class="agree like" th:data-id="${post.metadata.name}"
+            <button th:if="${type == 'Post'}" type="button" class="agree like" th:data-id="${post.metadata.name}"
                     th:data-likes="${post.stats.upvote}">
                 <i class="ri-thumb-up-line"></i>
                 <span>赞<span th:text="${post.stats.upvote}"></span></span>

theme.yaml

@@ -22,6 +22,6 @@ spec:
   settingName: theme-dream-setting
   configMapName: theme-dream-configMap
   # 版本号
-  version: 1.0.0.13
+  version: 1.0.0.29
   # 最低支持的 Halo 版本
   require: ">=2.6.0"