feat: 允许设置点赞按钮宽度高度位置

HowieHz · Jan 10, 2025 · 8896d35 · 8896d35
1 parent 2a88d96
commit 8896d35
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -282,7 +282,8 @@
 4. 允许关闭桌面端菜单中的分享按钮
 5. 允许选择是否启用文章与评论区间的分隔线
 6. 可在文章底部添加点赞按钮
-   - 允许设置大小
+   - 允许设置图标大小
+   - 允许设置是否展示获赞数
    - 允许设置位置（靠左，居中，靠右）
 7. 允许选择是否启用文章评论区
 8. 允许关闭移动端底部导航栏

diff --git a/i18n-settings/settings.en.yaml b/i18n-settings/settings.en.yaml
@@ -700,6 +700,40 @@ spec:
               label: Enable
             - value: false
               label: Disable
+        - $formkit: text
+          name: post_upvote_button_width
+          if: "$is_post_upvote_button_show === true"
+          label: Upvote button width
+          value: "1rem"
+          help: "Set the width of the upvote button. All CSS length units are allowed, such as: 5px, 1rem."
+        - $formkit: text
+          name: post_upvote_button_height
+          if: "$is_post_upvote_button_show === true"
+          label: Upvote button height
+          value: "1rem"
+          help: "Set the height of the upvote button. All CSS length units are allowed, such as: 5px, 1rem."
+        - $formkit: radio
+          name: is_show_post_upvote_count
+          if: "$is_post_upvote_button_show === true"
+          label: Display post upvote count
+          value: false
+          options:
+            - value: true
+              label: Enable
+            - value: false
+              label: Disable
+        - $formkit: select
+          name: post_upvote_button_position
+          if: "$is_post_upvote_button_show === true"
+          label: Upvote button position
+          value: "center"
+          options:
+            - label: "Left"
+              value: "left"
+            - label: "Center"
+              value: "center"
+            - label: "Right"
+              value: "right"
         - $formkit: radio
           name: is_post_comment_section_show
           label: Enable comment section

diff --git a/settings.yaml b/settings.yaml
@@ -700,6 +700,40 @@ spec:
               label: 开启
             - value: false
               label: 关闭
+        - $formkit: text
+          name: post_upvote_button_width
+          if: "$is_post_upvote_button_show === true"
+          label: 点赞按钮宽度
+          value: "1rem"
+          help: "设置点赞按钮的宽度。允许使用所有 CSS 长度单位，如：5px, 1rem。"
+        - $formkit: text
+          name: post_upvote_button_height
+          if: "$is_post_upvote_button_show === true"
+          label: 点赞按钮高度
+          value: "1rem"
+          help: "设置点赞按钮的高度。允许使用所有 CSS 长度单位，如：5px, 1rem。"
+        - $formkit: radio
+          name: is_show_post_upvote_count
+          if: "$is_post_upvote_button_show === true"
+          label: 展示文章获赞数
+          value: false
+          options:
+            - value: true
+              label: 开启
+            - value: false
+              label: 关闭
+        - $formkit: select
+          name: post_upvote_button_position
+          if: "$is_post_upvote_button_show === true"
+          label: 点赞按钮位置
+          value: "center"
+          options:
+            - label: "靠左"
+              value: "left"
+            - label: "居中"
+              value: "center"
+            - label: "靠右"
+              value: "right"
         - $formkit: radio
           name: is_post_comment_section_show
           label: 文章评论区

diff --git a/templates/post.html b/templates/post.html
@@ -71,17 +71,28 @@ <h1 class="posttitle" itemprop="name headline">
           class="upvote-button"
           th:href="|javascript:handleLike('${post.metadata.name}')|"
           th:data-post-name="${post.metadata.name}"
-          style="background-image: none"
+          th:style="'display: flex;
+            background-image: none;
+            justify-content:' + ${theme.config?.post_styles?.post_upvote_button_position} + ';'"
         >
           <span class="iconify">
-            <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              th:width="${theme.config?.post_styles?.post_upvote_button_width}"
+              th:height="${theme.config?.post_styles?.post_upvote_button_height}"
+              viewBox="0 0 24 24"
+            >
               <path
                 fill="currentColor"
                 d="m12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3Z"
               />
             </svg>
           </span>
-          <span th:data-post-name="${post.metadata.name}" th:text="${post.stats.upvote}"></span>
+          <span
+            th:if="${theme.config?.post_styles?.is_show_post_upvote_count}"
+            th:data-post-name="${post.metadata.name}"
+            th:text="${post.stats.upvote}"
+          ></span>
         </a>
       </th:block>
       <th:block th:if="${theme.config?.post_styles?.is_post_comment_section_show} and ${haloCommentEnabled}">