feat(vite): 资源拆分 & 样式优化

2024-11-29 19:21:06 +08:00
@@ -25,5 +25,6 @@
        ></a
      ></span>
    </div>
+    <halo:footer />
  </div>
 </footer>
@@ -24,7 +24,7 @@
          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z"/></svg>
        </th:block>
      </button>
-      <button id="theme-toggle" type="button">
+      <button type="button" x-data="themeMode()" @click="handleToggleThemeMode()">
        <th:block th:unless="${theme.config.basic.pixel_style}">
          <svg
            xmlns="http://www.w3.org/2000/svg"
@@ -46,21 +46,24 @@
      </button>
    </div>
    <nav class="menu">
-      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner menu__inner--desktop">
-        <li th:each="menuItem : ${menu.menuItems}">
+      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="menu__inner">
+        <li th:each="menuItem : ${menu.menuItems}" x-data="menu()" @mouseenter="handleToggleMenu()" @mouseleave="handleToggleMenu()">
          <a
            class="text-gray-600 hover:text-blue-600"
            th:href="${menuItem.status.href}"
-            th:text="${menuItem.status.displayName}"
+            th:text="${menuItem.status.displayName + (not #lists.isEmpty(menuItem.children) ? '▾' : '')}"
          ></a>
-          <ul
+          <ul 
            th:if="${not #lists.isEmpty(menuItem.children)}"
-            @mouseenter="open()"
-            @mouseleave="close()"
-            class="menu__sub-inner-more hidden"
+            class="menu__sub-inner" 
+            :class="{'hidden': !isOpen}"
          >
            <li th:each="childMenuItem : ${menuItem.children}">
-              <a th:href="${childMenuItem.status.href} " th:text="${childMenuItem.status.displayName} "></a>
+              <a 
+                class="text-gray-600 hover:text-blue-600" 
+                th:href="${childMenuItem.status.href} " 
+                th:text="${childMenuItem.status.displayName} "
+              ></a>
            </li>
          </ul>
        </li>
@@ -6,7 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" th:href="${theme.config.basic.favicon}">
    <title th:text="${site.title}"></title>
-    <link rel="stylesheet" th:href="@{/assets/dist/style.css?version=v1.0.1}" href="./assets/dist/style.css" />
+    <link rel="manifest" th:href="@{/assets/dist/manifest.json}" />
+    <link rel="stylesheet" th:href="@{/assets/dist/main.css?version={version}(version=${theme.spec.version})}" href="./assets/dist/style.css" />
  </head>
  <!-- 根据情况判断是否添加开启像素化样式 -->
  <body class="main" th:classappend="${theme.config.basic.pixel_style} ? 'pixel_style' : '' ">
@@ -27,6 +28,6 @@
        <th:block th:replace="${footer}" />
      </th:block>
    </div>
-    <script th:src="@{/assets/dist/main.iife.js?version=v1.0.1}"></script>
+    <script th:src="@{/assets/dist/main.js?version={version}(version=${theme.spec.version})}"></script>
  </body>
 </html>
@@ -46,7 +46,7 @@
          <div class="mt-3 flex items-center gap-4">
            <div
              class="journal-likes inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-red-700"
-              x-bind:class="{'text-red-700': upvoted(name)}"
+              :class="{'text-red-700': getIsUpvoted(name)}"
              @click="handleUpvote(name)"
            >
              <i class="!h-4 !w-4 i-pixelarticons-heart"></i>
@@ -60,7 +60,7 @@
            <div
              class="inline-flex cursor-pointer items-center text-sm text-gray-400 transition-all hover:text-black dark:hover:text-white"
              :class="{'!text-black':showComment && storedTheme == 'light','!text-white':showComment && storedTheme == 'dark' }"
-              x-on:click="showComment = !showComment"
+              @click="showComment = !showComment"
            >
              <i class="!h-4 !w-4 i-pixelarticons-comment"></i>
              <span class="ml-1" th:text="${moment.stats.approvedComment}"> </span>