添加首页文章卡片擦亮效果

settings.yaml

@@ -343,6 +343,15 @@ spec:
           label: 随机封面
           value: https://source.unsplash.com/random/600x400/?blog,scenery,night,desert,sea
           help:  未设置文章封面时，将使用随机封面 (二次元随机图地址：https://www.dmoe.cc/random.php)
+        - $formkit: radio
+          name: articleCardPolish
+          label: 首页文章卡片(擦亮效果)
+          value: false
+          options:
+            - label: 显示
+              value: true
+            - label: 隐藏
+              value: false
 
     - group: sidebar
       label: 侧栏

templates/modules/post-list.html

@@ -80,6 +80,25 @@
                 </span>
             </div>
         </div>
+
+        <!-- 文章卡片擦亮效果 -->
+        <style th:if="${theme.config.layout.articleCardPolish}">
+            #recent-posts > .recent-post-item:not(a)::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 200%;
+                background: linear-gradient(to right, transparent, white, transparent);
+                transform: translateX(-200%);
+                transition: transform 0.5s linear;
+                z-index: 1;
+            }
+            #recent-posts > .recent-post-item:not(a):hover::before {
+                transform: translateX(100%) skewX(-60deg);
+            }
+        </style>
     </div>
 
     <!-- 分页 -->