refactor: use repleater input type to define social_media

halo-dev · Nov 21, 2022 · fd7c925 · fd7c925
1 parent f260f28
commit fd7c925
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 60 deletions.
diff --git a/settings.yaml b/settings.yaml
@@ -91,13 +91,26 @@ spec:
     - group: sidebar
       label: 侧边栏
       formSchema:
-        - $formkit: code
-          language: javascript
-          height: 200px
+        - $formkit: repeater
           name: widgets
           label: 小部件
-          value: "popular-posts,categories,tags"
-          help: "目前提供的小部件有：profile（站点资料）, popular-posts（热门文章）, categories（文章分类）, tags（文章标签）。你可以随意组合或排序，以逗号隔开。"
+          value:
+            - value: popular-posts
+            - value: categories
+            - value: tags
+          children:
+            - $formkit: select
+              name: value
+              label: 部件
+              options:
+                - label: 站点资料
+                  value: profile
+                - label: 热门文章
+                  value: popular-posts
+                - label: 文章分类
+                  value: categories
+                - label: 文章标签
+                  value: tags
 
         - $formkit: group
           name: profile
@@ -108,6 +121,71 @@ spec:
               name: logo
               label: 站点资料 Logo
 
+        - $formkit: repeater
+          name: social_media
+          label: 社交媒体
+          value: []
+          children:
+            - $formkit: select
+              name: icon
+              label: 图标
+              options:
+                - label: 电子邮箱
+                  value: i-tabler-mail
+                - label: 微信
+                  value: i-simple-icons-wechat
+                - label: 腾讯 QQ
+                  value: i-simple-icons-tencentqq
+                - label: 新浪微博
+                  value: i-simple-icons-sinaweibo
+                - label: 知乎
+                  value: i-simple-icons-zhihu
+                - label: 豆瓣
+                  value: i-simple-icons-douban
+                - label: 哔哩哔哩
+                  value: i-simple-icons-bilibili
+                - label: 抖音 / TikTok
+                  value: i-simple-icons-tiktok
+                - label: Telegram
+                  value: i-simple-icons-telegram
+                - label: Facebook
+                  value: i-simple-icons-facebook
+                - label: Instagram
+                  value: i-simple-icons-instagram
+                - label: LinkedIn
+                  value: i-simple-icons-linkedin
+                - label: Twitter
+                  value: i-simple-icons-twitter
+                - label: Slack
+                  value: i-simple-icons-slack
+                - label: Discord
+                  value: i-simple-icons-discord
+                - label: YouTube
+                  value: i-simple-icons-youtube
+                - label: Steam
+                  value: i-simple-icons-steam
+                - label: GitHub
+                  value: i-simple-icons-github
+                - label: GitLab
+                  value: i-simple-icons-gitlab
+            - $formkit: text
+              name: name
+              label: 名称
+            - $formkit: text
+              name: url
+              label: 链接
+              validation: "required"
+            - $formkit: radio
+              name: url_type
+              label: 链接类型
+              value: normal
+              help: "如果选择了图片类型，那么在访客点击之后会使用弹框的形式加载"
+              options:
+                - label: 跳转链接
+                  value: normal
+                - label: 图片
+                  value: image
+
     - group: footer
       label: 页脚
       formSchema:
@@ -155,6 +233,71 @@ spec:
           key: menus
           label: 菜单组
 
+        - $formkit: repeater
+          name: social_media
+          label: 社交媒体
+          value: []
+          children:
+            - $formkit: select
+              name: icon
+              label: 图标
+              options:
+                - label: 电子邮箱
+                  value: i-tabler-mail
+                - label: 微信
+                  value: i-simple-icons-wechat
+                - label: 腾讯 QQ
+                  value: i-simple-icons-tencentqq
+                - label: 新浪微博
+                  value: i-simple-icons-sinaweibo
+                - label: 知乎
+                  value: i-simple-icons-zhihu
+                - label: 豆瓣
+                  value: i-simple-icons-douban
+                - label: 哔哩哔哩
+                  value: i-simple-icons-bilibili
+                - label: 抖音 / TikTok
+                  value: i-simple-icons-tiktok
+                - label: Telegram
+                  value: i-simple-icons-telegram
+                - label: Facebook
+                  value: i-simple-icons-facebook
+                - label: Instagram
+                  value: i-simple-icons-instagram
+                - label: LinkedIn
+                  value: i-simple-icons-linkedin
+                - label: Twitter
+                  value: i-simple-icons-twitter
+                - label: Slack
+                  value: i-simple-icons-slack
+                - label: Discord
+                  value: i-simple-icons-discord
+                - label: YouTube
+                  value: i-simple-icons-youtube
+                - label: Steam
+                  value: i-simple-icons-steam
+                - label: GitHub
+                  value: i-simple-icons-github
+                - label: GitLab
+                  value: i-simple-icons-gitlab
+            - $formkit: text
+              name: name
+              label: 名称
+            - $formkit: text
+              name: url
+              label: 链接
+              validation: "required"
+            - $formkit: radio
+              name: url_type
+              label: 链接类型
+              value: normal
+              help: "如果选择了图片类型，那么在访客点击之后会使用弹框的形式加载"
+              options:
+                - label: 跳转链接
+                  value: normal
+                - label: 图片
+                  value: image
+
     - group: beian
       label: 备案设置
       formSchema:

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -27,19 +27,7 @@ body {
 }
 
 .menu-sticky {
-  @apply fixed top-0 left-0 right-0 z-10 bg-black/80 drop-shadow-md backdrop-blur-lg;
-}
-
-.menu-sticky li a {
-  @apply text-white hover:text-gray-300;
-}
-
-.menu-sticky .menu-dropdown li a {
-  @apply text-gray-600 hover:text-blue-600;
-}
-
-.menu-sticky #site-title {
-  @apply text-white;
+  @apply fixed top-0 left-0 right-0 z-10 drop-shadow-md backdrop-blur-lg;
 }
 
 .toc-list-item > .toc-list {

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -39,4 +39,25 @@ module.exports = {
       },
     })),
   ],
+  safelist: [
+    "i-tabler-mail",
+    "i-simple-icons-wechat",
+    "i-simple-icons-tencentqq",
+    "i-simple-icons-sinaweibo",
+    "i-simple-icons-zhihu",
+    "i-simple-icons-douban",
+    "i-simple-icons-bilibili",
+    "i-simple-icons-tiktok",
+    "i-simple-icons-telegram",
+    "i-simple-icons-facebook",
+    "i-simple-icons-instagram",
+    "i-simple-icons-linkedin",
+    "i-simple-icons-twitter",
+    "i-simple-icons-slack",
+    "i-simple-icons-discord",
+    "i-simple-icons-youtube",
+    "i-simple-icons-steam",
+    "i-simple-icons-github",
+    "i-simple-icons-gitlab",
+  ],
 };
diff --git a/templates/assets/dist/style.css b/templates/assets/dist/style.css
diff --git a/templates/modules/footer.html b/templates/modules/footer.html
@@ -89,12 +89,25 @@
     </div>
   </div>
   <hr class="my-6 border-gray-200 dark:border-slate-700 sm:mx-auto lg:my-8" />
-  <div class="container mx-auto sm:flex sm:items-center">
+  <div class="container mx-auto sm:flex sm:items-center sm:justify-between">
     <span class="text-sm text-gray-500 dark:text-slate-300 sm:text-center">
       ©
       <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. Powered by
       <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
     </span>
+    <div
+      th:with="social_medias = ${theme.config.footer.social_media}"
+      class="mt-4 flex space-x-6 sm:mt-0 sm:justify-center"
+    >
+      <a
+        th:each="social_media : ${social_medias}"
+        th:href="${social_media.url}"
+        class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+        th:title="${social_media.name}"
+      >
+        <div th:classappend="${social_media.icon}" class="h-5 w-5"></div>
+      </a>
+    </div>
   </div>
 </footer>
diff --git a/templates/modules/header.html b/templates/modules/header.html
@@ -65,7 +65,7 @@
         <div class="flex items-center">
           <ul class="flex items-center gap-4">
             <li class="sm:hidden" x-on:click="overlayMenu = true">
-              <div class="i-tabler-menu-2 text-lg text-gray-600 hover:text-blue-600 dark:text-slate-100"></div>
+              <span class="i-tabler-menu-2 text-lg text-gray-600 hover:text-blue-600 dark:text-slate-100"></span>
             </li>
             <li
               th:if="${theme.config.style.enable_change_color_scheme}"

diff --git a/templates/modules/overlay-menu.html b/templates/modules/overlay-menu.html
@@ -81,24 +81,15 @@ <h1 class="text-2xl font-medium dark:text-slate-50" th:text="${site.title}"></h1
                       <span class="text-xs font-light text-gray-600 dark:text-slate-300">访问量</span>
                     </div>
                   </div>
-                  <div class="grid grid-cols-6 items-center gap-5">
-                    <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-                      <span class="i-simple-icons-wechat text-[#07C160]"></span>
-                    </div>
-                    <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-                      <span class="i-simple-icons-bilibili text-[#00A1D6]"></span>
-                    </div>
-                    <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-                      <span class="i-simple-icons-github text-[#181717]"></span>
-                    </div>
-                    <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-                      <span class="i-simple-icons-twitter text-[#1DA1F2]"></span>
-                    </div>
-                    <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-                      <span class="i-simple-icons-telegram text-[#26A5E4]"></span>
-                    </div>
-                    <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-                      <span class="i-simple-icons-feedly text-[#2BB24C]"></span>
+                  <div
+                    th:with="social_medias = ${theme.config.sidebar.social_media}"
+                    class="grid grid-cols-6 items-center gap-5"
+                  >
+                    <div
+                      th:each="social_media : ${social_medias}"
+                      class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100"
+                    >
+                      <span class="text-[#07C160]" th:classappend="${social_media.icon}"></span>
                     </div>
                   </div>
                   <div class="w-full" th:with="menu = ${menuFinder.getPrimary()}">

diff --git a/templates/modules/sidebar.html b/templates/modules/sidebar.html
@@ -1,10 +1,10 @@
 <aside th:fragment="sidebar (prepend)" class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
-  <th:block th:with="widgets = ${#strings.listSplit(theme.config.sidebar.widgets,',')} ">
+  <th:block th:with="widgets = ${theme.config.sidebar.widgets} ">
     <th:block th:if="${prepend != null}">
       <th:block th:replace="${prepend}" />
     </th:block>
     <th:block th:each="widget : ${widgets}">
-      <th:block th:replace="~{'modules/widgets/'+${widget}}" />
+      <th:block th:replace="~{'modules/widgets/'+${widget.value}}" />
     </th:block>
   </th:block>
 </aside>
diff --git a/templates/modules/widgets/profile.html b/templates/modules/widgets/profile.html
@@ -34,25 +34,15 @@
         ><span class="text-xs font-light text-gray-600 dark:text-slate-300">访问量</span>
       </div>
     </div>
-    <div class="grid grid-cols-6 items-center gap-5">
-      <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-        <span class="i-simple-icons-wechat text-[#07C160]"></span>
-      </div>
-      <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-        <span class="i-simple-icons-bilibili text-[#00A1D6]"></span>
-      </div>
-      <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-        <span class="i-simple-icons-github text-[#181717]"></span>
-      </div>
-      <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-        <span class="i-simple-icons-twitter text-[#1DA1F2]"></span>
-      </div>
-      <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-        <span class="i-simple-icons-telegram text-[#26A5E4]"></span>
-      </div>
-      <div class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100">
-        <span class="i-simple-icons-feedly text-[#2BB24C]"></span>
-      </div>
+    <div th:with="social_medias = ${theme.config.sidebar.social_media}" class="grid grid-cols-6 items-center gap-5">
+      <a
+        th:each="social_media : ${social_medias}"
+        class="flex cursor-pointer items-center justify-center rounded p-1 hover:bg-gray-100 dark:hover:bg-slate-700"
+        th:href="${social_media.url}"
+        target="_blank"
+      >
+        <span class="text-gray-600 dark:text-slate-400" th:classappend="${social_media.icon}"></span>
+      </a>
     </div>
   </div>
 </div>