feat: 首页多元列表支持显示文章分类、标签、阅读量

README.md

@@ -255,16 +255,17 @@
 
 1. 允许设定主页 HTML 标题，而不是取值于“Halo 设置 - 基本设置 - 站点标题”
 2. 允许同时开启一言和个人简介
-3. 允许用户修改/隐藏主页上的固定文本 _[guqing/halo-theme-higan#86](https://github.com/guqing/halo-theme-higan/issues/86)_
-
-   - 中文默认值相较于原主题的变化
-     - Find me on -> 与我联系（首页样式 - 社交资料图标左侧文字）
-     - Writing -> 近期发布（首页样式 - 首页文章列表标题）
-     - Read article -> 阅读全文（首页样式 - 多元列表跳转文章链接所用提示文字）
-   - 注：目前版本设置此选项仅能控制开启或关闭
-   - 现为支持 i18n，如想编辑此文字，请到 halo 主题目录（themes），找到 howiehz-higan 文件夹里的 i18n 文件夹，找到对应语言的 properties 文件，修改保存即可（如中文是 zh.properties）
-
-4. 允许自由选择是否开关文章列表置顶图标，以及选择图标位置
+3. 允许隐藏社交资料图标左侧文字
+4. 允许隐藏文字列表标题
+5. 允许用户修改主页上的固定文本 _[guqing/halo-theme-higan#86](https://github.com/guqing/halo-theme-higan/issues/86)_
+   - 现为支持国际化（i18n），如想编辑固定文字，请到 halo 主题目录（themes），找到 howiehz-higan 文件夹里的 i18n 文件夹，找到对应语言的 properties 文件，修改保存即可（如中文是 zh.properties）
+6. 允许自定义多元列表
+   - 允许显示文章分类
+   - 允许显示文章标签
+   - 允许显示文章阅读量
+   - 允许隐藏文章摘要
+   - 允许隐藏跳转文章链接所用提示文字
+7. 允许自由选择是否开关文章列表置顶图标，以及选择图标位置
 
 #### 增加于“文章页样式”
 

i18n-settings/settings.en.yaml

@@ -484,6 +484,46 @@ spec:
               value: "simple-post-list"
             - label: "Summary list"
               value: "post-list-summary"
+        - $formkit: radio
+          name: is_show_post_categories_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: Display post categories in post list summary
+          value: true
+          options:
+            - label: Enable
+              value: true
+            - label: Disable
+              value: false
+        - $formkit: radio
+          name: is_show_post_tags_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: Display post tags in post list summary
+          value: true
+          options:
+            - label: Enable
+              value: true
+            - label: Disable
+              value: false
+        - $formkit: radio
+          name: is_show_post_views_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: Display post views in post list summary
+          value: true
+          options:
+            - label: Enable
+              value: true
+            - label: Disable
+              value: false
+        - $formkit: radio
+          name: is_show_post_excerpt_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: Display post excerpt in post list summary
+          value: true
+          options:
+            - label: Enable
+              value: true
+            - label: Disable
+              value: false
         - $formkit: radio
           name: is_show_index_post_list_permalink_text
           if: "$post_list_layout === 'post-list-summary'"

settings.yaml

@@ -484,6 +484,46 @@ spec:
               value: "simple-post-list"
             - label: "多元列表"
               value: "post-list-summary"
+        - $formkit: radio
+          name: is_show_post_categories_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: 多元列表显示文章分类
+          value: true
+          options:
+            - label: 开启
+              value: true
+            - label: 关闭
+              value: false
+        - $formkit: radio
+          name: is_show_post_tags_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: 多元列表显示文章标签
+          value: true
+          options:
+            - label: 开启
+              value: true
+            - label: 关闭
+              value: false
+        - $formkit: radio
+          name: is_show_post_views_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: 多元列表显示文章阅读量
+          value: true
+          options:
+            - label: 开启
+              value: true
+            - label: 关闭
+              value: false
+        - $formkit: radio
+          name: is_show_post_excerpt_in_post_list_summary
+          if: "$post_list_layout === 'post-list-summary'"
+          label: 多元列表显示文章摘要
+          value: true
+          options:
+            - label: 开启
+              value: true
+            - label: 关闭
+              value: false
         - $formkit: radio
           name: is_show_index_post_list_permalink_text
           if: "$post_list_layout === 'post-list-summary'"

src/styles/main.css

@@ -1184,6 +1184,13 @@ html[data-color-scheme="dark"] article .content div.dark {
   line-height: 1.25;
 }
 
+.article-category .category-link {
+  background-image: linear-gradient(transparent, transparent 0.625rem, var(--color-link) 0.625rem, var(--color-link));
+  background-position: bottom;
+  background-size: 100% 0.375rem;
+  background-repeat: repeat-x;
+}
+
 .article-tag .tag-link {
   background-image: linear-gradient(transparent, transparent 0.625rem, var(--color-link) 0.625rem, var(--color-link));
   background-position: bottom;
@@ -1219,9 +1226,9 @@ html[data-color-scheme="dark"] article .content div.dark {
     display: inline;
   }
 
-  .post-publish-time + .post-update-time:before,
-  .article-tag:before,
-  .article-category:before {
+  article header .post-publish-time + .post-update-time:before,
+  article header .article-tag:before,
+  article header .article-category:before {
     content: "|";
   }
 }

templates/fragments/posts.html

@@ -90,9 +90,50 @@ <h2 class="static m-0 text-base font-semibold tracking-tight color-text">
               </span>
               <th:block th:text="${#temporals.format(post.spec.publishTime, 'MMMM dd yyyy')}"></th:block>
             </time>
-            <p class="p-0 mb-0 relative z-10 mt-2 text-sm color-accent-3" th:text="${post.status?.excerpt}">
-              文章概要替换位
-            </p>
+            <th:block th:if="${theme.config?.index_styles?.is_show_post_categories_in_post_list_summary}">
+              <div
+                class="article-category p-0 mb-0 relative z-20 mt-0.5 text-sm color-accent-3"
+                th:if="${!#lists.isEmpty(post.categories)}"
+              >
+                <span class="iconify" data-icon="fa-solid:archive" data-inline="false"></span>
+                <th:block th:each="category : ${post.categories}">
+                  <a
+                    class="category-link"
+                    th:href="@{${category.status?.permalink}}"
+                    th:text="${category.spec?.displayName}"
+                  >
+                    文章分类名替换位
+                  </a>
+                </th:block>
+              </div>
+            </th:block>
+            <th:block th:if="${theme.config?.index_styles?.is_show_post_tags_in_post_list_summary}">
+              <div
+                class="article-tag p-0 mb-0 relative z-20 mt-0.5 text-sm color-accent-3"
+                th:if="${!#lists.isEmpty(post.tags)}"
+              >
+                <span class="iconify" data-icon="fa-solid:tag" data-inline="false"></span>
+                <th:block th:each="tag : ${post.tags}">
+                  <a class="tag-link" th:href="@{${tag.status?.permalink}}" th:text="${tag.spec?.displayName}">
+                    文章标签名替换位
+                  </a>
+                </th:block>
+              </div>
+            </th:block>
+            <th:block th:if="${theme.config?.index_styles?.is_show_post_views_in_post_list_summary}">
+              <div
+                class="p-0 mb-0 relative z-10 mt-0.5 text-sm color-accent-3"
+                th:title="|#{page.post.visit-stats} ${post.stats?.visit}|"
+              >
+                <span class="iconify" data-icon="mdi:eye-outline" data-inline="false"></span>
+                <span th:text="${post.stats?.visit}">文章阅读量替换位</span>
+              </div>
+            </th:block>
+            <th:block th:if="${theme.config?.index_styles?.is_show_post_excerpt_in_post_list_summary}">
+              <p class="p-0 mb-0 relative z-10 mt-2 text-sm color-accent-3" th:text="${post.status?.excerpt}">
+                文章概要替换位
+              </p>
+            </th:block>
             <div
               aria-hidden="true"
               class="relative z-10 mt-4 flex items-center text-sm font-medium color-accent-1"

templates/index.html

@@ -60,7 +60,7 @@ <h2 class="h1" th:if="${theme.config?.index_styles?.is_show_index_post_list_titl
       </h2>
       <th:block th:insert="~{fragments/posts :: post-list-summary(${posts})}"></th:block>
     </th:block>
-    <th:block th:unless="${theme?.config.index_styles?.post_list_layout=='post-list-summary'}">
+    <th:block th:if="${theme?.config.index_styles?.post_list_layout=='simple-post-list'}">
       <th:block th:insert="~{fragments/posts :: simple-post-list(${posts})}"></th:block>
     </th:block>
   </th:block>

templates/post.html

@@ -57,7 +57,7 @@ <h1 class="posttitle" itemprop="name headline">
 
           <span th:title="|#{page.post.visit-stats} ${post.stats?.visit}|">
             <span class="iconify" data-icon="mdi:eye-outline" data-inline="false"></span>
-            <span th:text="${post.stats?.visit}"></span>
+            <span th:text="${post.stats?.visit}">文章阅读量替换位</span>
           </span>
         </div>
       </header>