feat: Add footer style 4，Adjust the font and font size and other styl…

…es，Add hidden author or unified author configuration
f2ccloud · May 6, 2023 · 4694c9b · 4694c9b
1 parent 8d79f3c
commit 4694c9b
Show file tree

Hide file tree

Showing 18 changed files with 248 additions and 50 deletions.
diff --git a/Makefile b/Makefile
@@ -7,7 +7,10 @@ build: clean
 	mkdir dist
 	cp -r templates dist
 	cp theme.yaml settings.yaml README.md dist
+	zip -r dist.zip ./dist
+
 
 clean:
 	echo "Clean dist folder"
 	rm -rf dist
+	rm -rf dist.zip
diff --git a/annotation-settings.yaml b/annotation-settings.yaml
@@ -0,0 +1,12 @@
+spec:
+  targetRef:
+    group: content.halo.run
+    kind: Category
+  formSchema:
+    - $formkit: "color"
+      name: "color"
+      label: "字体颜色"
+apiVersion: v1alpha1
+kind: AnnotationSetting
+metadata:
+  generateName: annotation-
diff --git a/settings.yaml b/settings.yaml
@@ -28,6 +28,33 @@ spec:
               value: true
             - label: 隐藏
               value: false
+        - $formkit: radio
+          name: hide_avatar
+          id: hide_avatar
+          key: hide_avatar
+          label: 隐藏作者头像
+          value: false
+          options:
+            - label: 是
+              value: true
+            - label: 否
+              value: false
+        - $formkit: radio
+          name: hide_author
+          id: hide_author
+          key: hide_author
+          label: 隐藏作者名称
+          value: false
+          options:
+            - label: 是
+              value: true
+            - label: 否
+              value: false
+        - $formkit: text
+          if: "$get(hide_author).value === false"
+          name: common_author
+          label: 统一作者名称
+          help: "为空显示原文章作者"
 
     - group: banner
       label: Banner
@@ -102,7 +129,7 @@ spec:
           key: module_one
           value: 模块一
           label: 模块一名称
-          help: 默认显示主菜单项
+          help: 默认显示前四个分类
         - $formkit: select
           if: "$get(index_menu).value === true"
           name: module_one_layout
@@ -115,7 +142,7 @@ spec:
               value: 4
             - label: 网格（一行五列）
               value: 5
-          help: 默认显示一行
+          help: 默认显示一行四列
         - $formkit: radio
           name: index_theme
           id: index_theme
@@ -327,6 +354,8 @@ spec:
               value: style_2
             - label: 风格三
               value: style_3
+            - label: 风格四
+              value: style_4
         - $formkit: attachment
           name: logo
           label: Logo
@@ -342,7 +371,7 @@ spec:
           name: slogan
           id: slogan
           key: slogan
-          if: "$get(style).value === style_2 || $get(style).value === style_1"
+          if: "$get(style).value !== style_3"
           label: 标语
 
         - $formkit: menuRadio
@@ -353,7 +382,7 @@ spec:
           label: 右侧菜单
 
         - $formkit: repeater
-          if: "$get(style).value === style_2 || $get(style).value === style_1"
+          if: "$get(style).value !== style_3"
           name: menus
           id: menus
           key: menus
@@ -364,6 +393,12 @@ spec:
               name: name
               label: 菜单
               validation: "required"
+
+        - $formkit: attachment
+          if: "$get(style).value === style_4"
+          name: qrcode
+          label: Qrcode
+          help: 关注二维码
 
         - $formkit: repeater
           name: social_media

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -81,7 +81,3 @@ body {
 }
 
 /*a标签增加指上下划线*/
-
-.prose h1 {
-  font-size: 2em !important;
-}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 const { Icons } = require("tailwindcss-plugin-icons");
+const plugin = require('tailwindcss/plugin')
 module.exports = {
   content: ["./templates/**/*.html", "./src/main.ts"],
   darkMode: "class",
@@ -9,6 +10,64 @@ module.exports = {
         7: "7",
         8: "8",
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            h1 : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            h2 : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            h3 : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            h4 : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            ul : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            li : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            dl : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            p : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            img : {
+              marginTop: '0.5em !important',
+              marginBottom: '0.5em !important',
+            },
+            dd : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            ol : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            pre : {
+              marginTop: '0.25em !important',
+              marginBottom: '0.25em !important',
+            },
+            hr : {
+              marginTop: '1.25em !important',
+              marginBottom: '1.25em !important',
+            },
+          },
+        },
+      },
     },
     container: {
       padding: {

diff --git a/templates/archives.html b/templates/archives.html
@@ -10,7 +10,7 @@
       id="post-list"
       th:if="${archives.total gt 0}"
       th:with="archivesItems=${archives.items},list_layout=${theme.config.layout.post_list_layout}"
-      class="mt-6 grid grid-cols-1 gap-6"
+      class="mt-10 grid grid-cols-1 gap-6"
       th:classappend="${list_layout == 'grid_3' ? 'md:grid-cols-2 xl:grid-cols-3' : ''} + ' ' + ${list_layout == 'grid_2' ? 'md:grid-cols-2' : ''}"
     >
       <th:block th:each="archive : ${archivesItems}">

diff --git a/templates/assets/dist/style.css b/templates/assets/dist/style.css
diff --git a/templates/categories.html b/templates/categories.html
@@ -11,7 +11,7 @@
         id="post-list"
         th:if="${posts.total gt 0}"
         th:with="postItems=${posts.items},list_layout=${theme.config.layout.post_list_layout}"
-        class="mt-6 grid grid-cols-1 gap-6"
+        class="mt-10 grid grid-cols-1 gap-6"
         th:classappend="${list_layout == 'grid_3' ? 'md:grid-cols-2 xl:grid-cols-3' : ''} + ' ' + ${list_layout == 'grid_2' ? 'md:grid-cols-2' : ''}"
       >
         <th:block th:each="post : ${postItems}">

diff --git a/templates/category.html b/templates/category.html
@@ -10,7 +10,7 @@
       id="post-list"
       th:if="${posts.total gt 0}"
       th:with="postItems=${posts.items},list_layout=${theme.config.layout.post_list_layout}"
-      class="mt-6 grid grid-cols-1 gap-6"
+      class="mt-10 grid grid-cols-1 gap-6"
       th:classappend="${list_layout == 'grid_3' ? 'md:grid-cols-2 xl:grid-cols-3' : ''} + ' ' + ${list_layout == 'grid_2' ? 'md:grid-cols-2' : ''}"
     >
       <th:block th:each="post : ${postItems}">

diff --git a/templates/modules/featured-post-card.html b/templates/modules/featured-post-card.html
@@ -41,15 +41,16 @@
     <p class="font-sm font-light line-clamp-6 dark:text-zinc-200" th:text="${post.status.excerpt}"></p>
     <div class="mt-4 flex flex-1 items-center justify-start gap-2">
       <img
+        th:if="${not theme.config.layout.hide_avatar}"
         th:src="${post.owner.avatar ?: #theme.assets('/images/default-avatar.svg')}"
         th:title="${post.owner.displayName}"
         th:alt="${post.owner.displayName}"
         class="h-8 w-8 rounded-full border drop-shadow-sm dark:border-zinc-700"
       />
       <span
         class="text-sm font-medium text-zinc-900 dark:text-zinc-100"
-        th:if="${#strings.isEmpty(post.owner.avatar)}"
-        th:text="${post.owner.displayName}"
+        th:if="${not theme.config.layout.hide_author}"
+        th:text="${not #strings.isEmpty(theme.config.layout.common_author) ? theme.config.layout.common_author : post.owner.displayName}"
       ></span>
       <span
         class="text-sm tabular-nums text-zinc-600 dark:text-zinc-300"

diff --git a/templates/modules/footer.html b/templates/modules/footer.html
@@ -191,16 +191,104 @@
   </span>
 </footer>
 
+
+
+<footer th:if="${theme.config.footer.style == 'style_4'}" class="mt-10 bg-[#202942] py-8 dark:bg-zinc-800">
+  <div class="container mx-auto px-4">
+    <div class="flex flex-wrap text-center lg:text-left">
+      <div class="w-full px-4 lg:w-4/12">
+        <a href="/">
+          <div class="grid grid-cols-12 gap-2">
+            <div class="col-span-2" >
+              <img
+                th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
+                th:src="${theme.config.footer.logo ?: site.logo}"
+                class=" h-16 w-16"
+                th:alt="${site.title}"
+              />
+            </div>
+            <div class="col-span-10">
+              <h4
+                class="text-3xl font-semibold text-zinc-50 dark:text-zinc-200"
+                th:text="${theme.config.footer.title}"
+              ></h4>
+              <h5
+                class="mt-0 mb-2 text-base text-[#adb5bd] dark:text-zinc-200"
+                th:text="${theme.config.footer.slogan}"
+              ></h5>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div class="w-full px-4 lg:w-6/12">
+        <div class="items-top mb-6 flex flex-wrap" th:if="${not #lists.isEmpty(theme.config.footer.menus)}">
+          <th:block th:each="menuName : ${theme.config.footer.menus}">
+            <div
+              class="ml-auto w-full sm:w-6/12 md:w-5/12 md:pl-4 xl:w-3/12"
+              th:with="menu = ${menuFinder.getByName(menuName.name)}"
+            >
+              <span
+                class="mb-2 block text-xl font-semibold uppercase text-zinc-50 dark:text-zinc-200"
+                th:text="${menu.spec.displayName}"
+              >
+              </span>
+              <ul class="list-unstyled hover-within" th:with="menuItems = ${menu.menuItems}">
+                <li th:each="menuItem : ${menuItems}">
+                  <a
+                    class="pb-2 text-sm text-[#adb5bd] hover:text-zinc-100 dark:text-zinc-200"
+                    th:href="@{${menuItem.status.href}}"
+                    th:text="${menuItem.status.displayName}"
+                  >
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </th:block>
+        </div>
+      </div>
+      <div class="w-full px-4 text-center lg:w-2/12">
+        <div th:if="${not #strings.isEmpty(theme.config.footer.qrcode)}" classx="sm:w-full sm:text-center">
+          <h2 class="mb-6 text-lg font-semibold text-zinc-50">关注我们</h2>
+          <img th:src="${theme.config.footer.qrcode}" width="150px" class="mx-auto"/>
+        </div>
+      </div>
+    </div>
+  </div>
+  <hr class="my-6 border-slate-700 sm:mx-auto lg:my-8" />
+  <div>
+    <div class="flex flex-wrap items-center justify-center font-light md:justify-between">
+      <div class="mx-auto w-full px-4 text-center md:w-4/12">
+        <span class="dark:hover:text-whit hover:text-zinc-900 text-sm font-light text-[#adb5bd] sm:text-center">
+          <a
+            href="https://beian.miit.gov.cn/"
+            class="hover:underline"
+            target="_blank"
+            th:href="${theme.config.beian.icp_link}"
+            th:text="${theme.config.beian.icp_text}"
+          ></a>
+        </span>
+        <div class="text-sm text-[#adb5bd] sm:text-center font-light dark:text-zinc-300">
+          Copyright ©
+          <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
+          <a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. <br />Powered by
+          <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
 <a
-  class="fixed bottom-24 right-10 m-0 hidden h-10 w-10 rounded-full border-[1px] border-solid border-zinc-300 text-center leading-10"
+  class="fixed bottom-[6.5rem] right-10 m-0 hidden h-10 w-10 rounded-full border-[1px] border-solid border-zinc-300 text-center leading-10"
   id="back-to-top"
   href="Javascript:scroll(0,0)"
 >
   <span class="i-tabler-chevron-up text-lg text-[#7ca5e7] transition-all">至顶</span>
 </a>
 
 <a
-  class="fixed bottom-24 right-10 m-0 hidden h-10 w-10 rounded-full border-[1px] border-solid border-zinc-300 text-center leading-10"
+  class="fixed bottom-[6.5rem] right-10 m-0 hidden h-10 w-10 rounded-full border-[1px] border-solid border-zinc-300 text-center leading-10"
   id="back-to-down"
   href="Javascript:scroll(0,document.documentElement.scrollHeight)"
 >

diff --git a/templates/modules/index/popular-posts.html b/templates/modules/index/popular-posts.html
@@ -17,7 +17,7 @@
         class="flex w-full flex-1 items-center justify-between gap-2 opacity-0 transition duration-1000 group-hover:opacity-100"
       >
         <a
-          class="mr-20 rounded-xl px-2 text-xs font-light tabular-nums hover:text-gray-900"
+          class="mr-2 rounded-xl px-2 text-xs font-light tabular-nums hover:text-gray-900"
           th:style="'color:'+${#annotations.getOrDefault(post.categories[0], 'color', '#0c7be0')}+';background-color:'+${#annotations.getOrDefault(post.categories[0], 'color', '')}+'30'"
           th:if="${#lists.size(post.categories)} gt 0"
           th:href="@{${post.categories[0].status.permalink}}"

diff --git a/templates/modules/layout.html b/templates/modules/layout.html
@@ -14,7 +14,8 @@
       main.initColorScheme("[[${theme.config.style.color_scheme}]]",[[${theme.config.style.enable_change_color_scheme}]])
     </script>
   </head>
-  <body class="dark:bg-zinc-900" x-data="search" th:classappend="${isSidebar == false ? 'bg-[#F8F9FC]' : 'bg-zinc-0'}">
+  <body class="dark:bg-zinc-900" x-data="search" 
+        th:classappend="${isSidebar == false ? 'bg-[#F8F9FC]' : 'bg-[#F2F2F2]'}">
     <th:block th:if="${header != null}">
       <th:block th:replace="${header}" />
     </th:block>
@@ -54,7 +55,7 @@
       </div>
 
       <th:block th:if="${isSidebar == true}">
-        <div class="col-span-1 p-2">
+        <div class="col-span-1 px-2">
           <th:block th:if="${sidebar != null}">
             <th:block th:replace="${sidebar}" />
           </th:block>