优化右侧公众号

2023-10-09 00:24:32 +08:00 · 2023-10-09 00:24:32 +08:00 · e013b959d7
parent 7df176b4c5
commit e013b959d7
3 changed files with 32 additions and 3 deletions
--- a/settings.yaml
+++ b/settings.yaml
@ -646,13 +646,26 @@ spec:
          value:
            wechatImgFace:
            wechatImgBack:
+            color: "#07C160"
+            wechatImg: "/themes/theme-hao/assets/images/gzh_cover.png"
+            url: "/wechat"
          children:
+            - $formkit: color
+              name: color
+              label: 背景颜色
+              value: "#07C160"
+            - $formkit: attachment
+              name: wechatImg
+              label: 背景图
+            - $formkit: url
+              name: url
+              label: 链接
            - $formkit: attachment
              name: wechatImgFace
-              placeholder: 公众号正面图
+              label: 公众号正面图
            - $formkit: attachment
              name: wechatImgBack
-              placeholder: 公众号背面图
+              label: 公众号背面图
              help: 图片可以从公众号后台下载物料或者自制
        - $formkit: group
          name: power
--- a/templates/assets/images/gzh_cover.png
+++ b/templates/assets/images/gzh_cover.png
--- a/templates/modules/widgets/aside/wechat.html
+++ b/templates/modules/widgets/aside/wechat.html
@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <div class="card-widget heo-right-widget" id="card-wechat" th:fragment="wechat"
-th:with="faceImg = ${theme.config.sidebar.wechat.wechatImgFace}, backImg=${theme.config.sidebar.wechat.wechatImgBack}">
+th:with="faceImg = ${theme.config.sidebar.wechat.wechatImgFace}, backImg=${theme.config.sidebar.wechat.wechatImgBack}"
+     th:attr="onclick='javascript:window.open(\''+ ${theme.config.sidebar.wechat.url} +'\')'">
    <div id="flip-wrapper">
        <div id="flip-content">
            <div class="face"
@ -10,5 +11,20 @@ th:with="faceImg = ${theme.config.sidebar.wechat.wechatImgFace}, backImg=${theme
                 th:style="'background: url('+ @{${#strings.isEmpty(backImg) ?  assets_link + '/images/wechat/wechat2.png' : backImg }} +') center center / 100% no-repeat;'"></div>
        </div>
    </div>
+
+    <style>
+        #aside-content .card-widget#card-wechat {
+            background: [(${theme.config.sidebar.wechat.color})];
+        }
+        #aside-content .card-widget#card-wechat::before {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            background: url([[${theme.config.sidebar.wechat.wechatImg}]]) center center no-repeat;
+            content: '';
+        }
+    </style>
 </div>
 </html>