hexo-theme-gnix 5.0.4 → 5.0.6

package/layout/comment/twikoo.jsx

@@ -5,17 +5,6 @@ const {
   lazy_load_css,
 } = require("../../include/util/common");
 
-/**
- * Twikoo comment JSX component.
- *
- * @see https://twikoo.js.org/quick-start.html
- * @example
- * <Twikoo
- *     envId="env_id"
- *     region="ap-guangzhou"
- *     lang="zh-CN"
- *     jsUrl="/path/to/Twikoo.js" />
- */
 class Twikoo extends Component {
   render() {
     const { envId, region, lang, jsUrl } = this.props;
@@ -36,21 +25,6 @@ twikoo.init(window.twikooConfig);
   }
 }
 
-/**
- * Cacheable Twikoo comment JSX component.
- * <p>
- * This class is supposed to be used in combination with the <code>locals</code> hexo filter
- * ({@link module:hexo/filter/locals}).
- *
- * @see module:util/cache.cacheComponent
- * @example
- * <Twikoo.Cacheable
- *     comment={{
- *         env_id: "env_id",
- *         region: "ap-guangzhou",
- *         lang: "zh-CN",
- *     }} />
- */
 Twikoo.Cacheable = cacheComponent(Twikoo, "comment.twikoo", (props) => {
   const { comment, helper, page, config } = props;
 

package/layout/common/navbar.jsx

@@ -1,4 +1,8 @@
-const { Component, Fragment, cacheComponent } = require("../../include/util/common");
+const {
+  Component,
+  Fragment,
+  cacheComponent,
+} = require("../../include/util/common");
 
 function isSameLink(a, b) {
   function santize(url) {
@@ -17,14 +21,13 @@ function isSameLink(a, b) {
 
 const renderLinkIcon = (link) => {
   if (!link.icon) return null;
-  // start with '<' means svg icon
   if (link.icon === "travellings") {
     return (
-      <svg viewBox="0 0 448 512" role="img" aria-label="Travellings Icon">
-        <path
-          fill="var(--text)"
-          d="M96 0C43 0 0 43 0 96v256c0 48 35.2 87.7 81.1 94.9l-46 46c-7 7-2 19.1 7.9 19.1h39.7c8.5 0 16.6-3.4 22.6-9.4L160 448h128l54.6 54.6c6 6 14.1 9.4 22.6 9.4h39.7c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96zM64 128c0-17.7 14.3-32 32-32h80c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32zm208-32h80c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32h-80c-17.7 0-32-14.3-32-32v-96c0-17.7 14.3-32 32-32M64 352a32 32 0 1 1 64 0a32 32 0 1 1-64 0m288-32a32 32 0 1 1 0 64a32 32 0 1 1 0-64"
-        ></path>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <title>train_4_line</title>
+        <g id="train_4_line" fill="currentColor">
+          <path d="M14.72 2a5 5 0 0 1 4.855 3.802l.049.217 1.4 7c.496 2.482-.929 4.83-3.14 5.663l-.21.073L19.6 20.2a1 1 0 0 1-1.095 1.669L18.4 21.8 14.667 19H9.333L5.6 21.8a1 1 0 0 1-1.296-1.518L4.4 20.2l1.926-1.445c-2.26-.735-3.768-3.031-3.39-5.503l.04-.233 1.4-7a5 5 0 0 1 4.68-4.014L9.28 2h5.442Zm0 2H9.28a3 3 0 0 0-2.943 2.412l-1.4 7A3 3 0 0 0 7.88 17h8.242a3 3 0 0 0 2.942-3.588l-1.4-7A3 3 0 0 0 14.72 4m-6.47 9.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5m7.5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5M14.61 6a1.5 1.5 0 0 1 1.416 1.005l.039.131.75 3a1.5 1.5 0 0 1-1.324 1.858L15.36 12H8.64a1.5 1.5 0 0 1-1.481-1.735l.026-.129.75-3a1.5 1.5 0 0 1 1.319-1.13L9.39 6zm-.39 2H9.78l-.5 2h5.44z"></path>
+        </g>
       </svg>
     );
   }
@@ -33,13 +36,18 @@ const renderLinkIcon = (link) => {
 
 class Navbar extends Component {
   render() {
-    const { siteUrl, menu, links, showSearch, searchTitle } = this.props;
+    const { siteUrl, menu, links, searchTitle } = this.props;
 
     return (
       <nav class="navbar navbar-main" onclick="handleNavbarClick(event);">
         <div class="navbar-container">
-          <a href={siteUrl} style={"font-family: homemade-apple; color: var(--text); display: flex; align-items: center; padding: 0 1em;"}>
-              GnixAij
+          <a
+            href={siteUrl}
+            style={
+              "font-family: homemade-apple; color: var(--text); display: flex; align-items: center; padding: 0 1em;"
+            }
+          >
+            GnixAij
           </a>
           <div class="navbar-menu">
             {Object.keys(menu).length ? (
@@ -56,35 +64,6 @@ class Navbar extends Component {
               </div>
             ) : null}
             <div class="navbar-end">
-              <button
-                type="button"
-                class="navbar-item theme-selector-trigger"
-                title="Choose Theme"
-                onclick="window.openThemeModal?.()"
-              >
-                <svg viewBox="0 0 14 14" role="img" aria-label="Theme Selector">
-                  <g fill="none">
-                    <path
-                      fill="var(--red)"
-                      d="M14 12.5v-3A1.5 1.5 0 0 0 12.5 8H3a3 3 0 1 0 0 6h9.5a1.5 1.5 0 0 0 1.5-1.5"
-                    ></path>
-                    <path
-                      fill="var(--blue)"
-                      d="M12.339 3.783L10.218 1.66a1.5 1.5 0 0 0-2.122 0L.88 8.88a3 3 0 0 0 4.24 4.24l7.218-7.217a1.5 1.5 0 0 0 0-2.121"
-                    ></path>
-                    <path
-                      fill="var(--green)"
-                      d="M4.5 0h-3A1.5 1.5 0 0 0 0 1.5V11a3 3 0 0 0 6 0V1.5A1.5 1.5 0 0 0 4.5 0"
-                    ></path>
-                    <path
-                      fill="var(--base)"
-                      fill-rule="evenodd"
-                      d="M1.395 3.375a.625.625 0 1 0 0 1.25h3.21a.625.625 0 1 0 0-1.25zm0 4.5a.625.625 0 1 0 0 1.25h3.21a.625.625 0 1 0 0-1.25z"
-                      clip-rule="evenodd"
-                    ></path>
-                  </g>
-                </svg>
-              </button>
               {Object.keys(links).length ? (
                 <Fragment>
                   {Object.keys(links).map((name) => {
@@ -103,26 +82,32 @@ class Navbar extends Component {
                   })}
                 </Fragment>
               ) : null}
-              {showSearch ? (
-                <button
-                  type="button"
-                  class="navbar-item search"
-                  title={searchTitle}
-                >
-                  <svg viewBox="0 0 14 14" role="img" aria-label="Search Icon">
-                    <g fill="none" fill-rule="evenodd" clip-rule="evenodd">
-                      <path
-                        fill="var(--text)"
-                        d="M.5.125a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h4.756A4.5 4.5 0 0 1 5 9.625c0-1.271.527-2.42 1.375-3.238v-4.96A2 2 0 0 0 4.5.126zm7.125 1.303v4.105a4.5 4.5 0 0 1 6.347 3.584H14V.625a.5.5 0 0 0-.5-.5h-4a2 2 0 0 0-1.875 1.303"
-                      />
-                      <path
-                        fill="var(--blue)"
-                        d="M7.75 9.625a1.75 1.75 0 1 1 3.5 0a1.75 1.75 0 0 1-3.5 0m1.75-3.25a3.25 3.25 0 1 0 1.706 6.017l1.263 1.263a.75.75 0 0 0 1.06-1.06l-1.262-1.264A3.25 3.25 0 0 0 9.5 6.375"
-                      />
-                    </g>
-                  </svg>
-                </button>
-              ) : null}
+              <button
+                type="button"
+                class="navbar-item"
+                id="theme-selector-trigger"
+                title="Choose Theme"
+                onclick="window.openThemeModal?.()"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <title>brightness_fill</title>
+                  <g id="brightness_fill" fill="currentColor">
+                    <path d="M12 18.5a1.5 1.5 0 0 1 1.493 1.356L13.5 20v1a1.5 1.5 0 0 1-2.993.144L10.5 21v-1a1.5 1.5 0 0 1 1.5-1.5m4.596-1.904a1.5 1.5 0 0 1 2.008-.103l.114.103.707.707a1.5 1.5 0 0 1-2.008 2.225l-.114-.103-.707-.707a1.5 1.5 0 0 1 0-2.122m-11.314 0a1.5 1.5 0 0 1 2.225 2.008l-.103.114-.707.707a1.5 1.5 0 0 1-2.225-2.008l.103-.114zM12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12m0 3a3 3 0 0 0-.176 5.995L12 15zm-8 1.5a1.5 1.5 0 0 1 .144 2.993L4 13.5H3a1.5 1.5 0 0 1-.144-2.993L3 10.5zm17 0a1.5 1.5 0 0 1 .144 2.993L21 13.5h-1a1.5 1.5 0 0 1-.144-2.993L20 10.5zM4.575 4.575a1.5 1.5 0 0 1 2.008-.103l.114.103.707.707a1.5 1.5 0 0 1-2.008 2.225l-.114-.103-.707-.707a1.5 1.5 0 0 1 0-2.122m12.728 0a1.5 1.5 0 0 1 2.225 2.008l-.103.114-.707.707a1.5 1.5 0 0 1-2.225-2.008l.103-.114zM12 1.5a1.5 1.5 0 0 1 1.493 1.356L13.5 3v1a1.5 1.5 0 0 1-2.993.144L10.5 4V3A1.5 1.5 0 0 1 12 1.5"></path>
+                  </g>
+                </svg>
+              </button>
+              <button
+                type="button"
+                class="navbar-item search"
+                title={searchTitle}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <title>search_line</title>
+                  <g id="search_line" fill="currentColor">
+                    <path d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0"></path>
+                  </g>
+                </svg>
+              </button>
             </div>
           </div>
           <button
@@ -144,7 +129,7 @@ class Navbar extends Component {
 module.exports = cacheComponent(Navbar, "common.navbar", (props) => {
   const { config, helper, page } = props;
   const { url_for, _p, __ } = helper;
-  const { logo, title, navbar, widgets, search } = config;
+  const { logo, title, navbar, widgets } = config;
 
   const hasTocWidget =
     Array.isArray(widgets) && widgets.find((widget) => widget.type === "toc");
@@ -182,7 +167,6 @@ module.exports = cacheComponent(Navbar, "common.navbar", (props) => {
     links,
     showToc,
     tocTitle: _p("widget.catalogue", Infinity),
-    showSearch: search?.type,
     searchTitle: __("search.search"),
   };
 });

package/layout/common/scripts.jsx

@@ -26,6 +26,7 @@ module.exports = class extends Component {
         <script
           defer
           src="/js/host/medium-zoom/dist/medium-zoom.min.js"
+          onLoad={`const zoom = mediumZoom(".article img", { background: "hsla(from var(--mantle) / 0.9)" })`}
         ></script>
         <script async src="/js/shiki/shiki.js"></script>
         <script async src="/js/instant-page.min.js" type="module"></script>

package/layout/common/theme_selector.jsx

@@ -3,7 +3,6 @@ class ThemeSelector extends Component {
   render() {
     return (
       <div
-        class="theme-selector-modal"
         id="theme-selector-modal"
         onclick="window.handleThemeModalClick?.(event)"
       >

package/layout/common/toc.jsx

@@ -29,7 +29,6 @@ class FloatingToc extends Component {
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            aria-label="Table of Contents"
           >
             <title>Table of Contents</title>
             <line x1="8" y1="6" x2="21" y2="6"></line>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-gnix",
-  "version": "5.0.4",
+  "version": "5.0.6",
   "author": "Efterklang <gaojiaxing0220@gmail.com>",
   "license": "MIT",
   "description": "Second generation of Hexo theme Icarus, now with Catppuccin flavor and night mode support.",

package/source/css/default.css

@@ -425,7 +425,7 @@ body {
   top: env(safe-area-inset-top);
   left: 0;
   right: 0;
-  transition: transform 0.3s ease-in-out;
+  /* transition: transform 0.3s ease-in-out; */
   z-index: 100;
   font-family: var(--font-sans-serif);
   border-bottom: 0.5px solid var(--surface0);
@@ -437,12 +437,11 @@ body {
   width: auto;
   display: flex;
   min-height: 4rem;
-}
-
-.navbar button {
-  background: 0 0;
-  border: none;
-  cursor: pointer;
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
 }
 
 .navbar-main.navbar--hidden {
@@ -458,8 +457,18 @@ body {
   position: relative;
   flex-grow: 0;
   flex-shrink: 0;
+}
+
+.navbar-end {
   svg {
-    width: 15px;
+    width: 1.2em;
+  }
+  .navbar-item {
+    &:hover {
+      scale: 1.1;
+      transition: all 0.2s ease;
+      color: var(--lavender);
+    }
   }
 }
 
@@ -467,7 +476,7 @@ body {
 
 /* #region Theme Selector */
 
-.theme-selector-modal {
+#theme-selector-modal {
   position: fixed;
   inset: 0;
   z-index: 100;
@@ -495,7 +504,7 @@ body {
     opacity 0.2s ease;
 }
 
-.theme-selector-modal.is-active {
+#theme-selector-modal.is-active {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
@@ -573,16 +582,6 @@ body {
   opacity: 1;
 }
 
-.theme-selector-trigger {
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    color: var(--blue);
-    transform: scale(1.1);
-  }
-}
-
 /* #endregion Theme Selector */
 
 /* #region Pagination */
@@ -1024,40 +1023,36 @@ body {
 }
 
 table {
-  table-layout: fixed;
-  word-wrap: break-word;
   width: 100%;
-  border-collapse: separate;
+  border-collapse: collapse;
   border-spacing: 0;
-  border-radius: 8px;
-  overflow: hidden;
+  overflow: auto;
   margin: 1rem 0;
   font-size: 1rem;
-  border: 1px solid var(--surface0);
 }
 
-table td,
-table th {
+td,
+th {
   vertical-align: middle;
   padding: 0.75em 1em;
 }
 
-table thead th {
+thead th {
   font-weight: 700;
   border-bottom: 1px solid var(--surface0);
   padding: 1em;
 }
 
-table td:not([align]),
-table th:not([align]) {
+td:not([align]),
+th:not([align]) {
   text-align: left;
 }
 
-table tbody tr td {
+tbody tr td {
   border-bottom: 1px solid var(--surface0);
 }
 
-table tbody tr:last-child td {
+tbody tr:last-child td {
   border-bottom: none;
 }
 

package/source/css/responsive/mobile.css

@@ -13,7 +13,6 @@ span.year {
 
 table {
   font-size: 14px;
-  word-wrap: break-word;
 }
 
 table th,
@@ -52,4 +51,4 @@ table td {
 .pagination-list li {
   flex-grow: 1;
   flex-shrink: 1;
-}
+}

package/source/js/main.js

@@ -92,21 +92,10 @@ function syncRelatedTabs(syncId) {
 
 // #region Keyboard Shortcuts
 
-function initKeyboardShortcuts() {
-  // 移除旧事件（防止PJAX重复绑定）
-  document.removeEventListener("keydown", handleKeyDown);
-  document.addEventListener("keydown", handleKeyDown, {
-    capture: true, // 捕获阶段监听，优先于浏览器默认处理
-    passive: false, // 允许调用 preventDefault
-  });
-}
-
-// 抽离键盘事件处理函数
 function handleKeyDown(e) {
   const isModifier = e.metaKey || e.ctrlKey;
   if (!isModifier) return;
 
-  // 性能优化 2: 如果用户在输入框内输入，不触发快捷键
   const tag = e.target.tagName;
   if (tag === "INPUT" || tag === "TEXTAREA" || e.target.isContentEditable) {
     return;
@@ -118,10 +107,7 @@ function handleKeyDown(e) {
     if (searchBtn) searchBtn.click();
   } else if ((e.shiftKey && e.code === "KeyP") || e.code === "KeyP") {
     e.preventDefault();
-    const themeBtn = document.querySelector(
-      "button.navbar-item.theme-selector-trigger",
-    );
-    if (themeBtn) themeBtn.click();
+    window.openThemeModal?.();
   }
 }
 
@@ -150,7 +136,7 @@ function initializeTableOfContents() {
   });
 
   if (headers.length > 0) {
-    // 先移除旧的滚动事件（防止PJAX重复绑定）
+    // 先移除旧的滚动事件
     window.removeEventListener("scroll", handleTocScroll, { passive: true });
 
     function handleTocScroll() {
@@ -192,13 +178,10 @@ function initializeTableOfContents() {
 // #endregion
 
 function initLogic() {
-  initKeyboardShortcuts();
   initializeTableOfContents();
   initializeTabs();
-  if (typeof mediumZoom === "function") {
-    mediumZoom(".article img", {
-      background: "hsla(from var(--mantle) / 0.9)",
-    });
+  if (document.getElementById("twikoo")) {
+    twikoo?.init(window.twikooConfig);
   }
 }
 
@@ -210,14 +193,6 @@ document.addEventListener("DOMContentLoaded", () => {
 if (typeof swup !== "undefined") {
   swup.hooks.on("page:view", () => {
     initLogic();
-
-    // Re-initialize Twikoo if available
-    if (typeof twikoo !== "undefined" && window.twikooConfig) {
-      const twikooContainer = document.getElementById("twikoo");
-      if (twikooContainer) {
-        twikoo.init(window.twikooConfig);
-      }
-    }
   });
 }
 
@@ -245,3 +220,22 @@ function handleNavbarClick(e) {
     }
   }
 }
+
+function tableWrapFix() {
+  document.querySelectorAll(".content table").forEach((table) => {
+    // if width exceeds container, wrap it
+    const wrapper = document.createElement("div");
+    Object.assign(wrapper.style, {
+      width: "100%",
+      overflowX: "auto",
+    });
+    table.parentNode.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+  });
+}
+
+tableWrapFix();
+document.addEventListener("keydown", handleKeyDown, {
+  capture: true, // 捕获阶段监听，优先于浏览器默认处理
+  passive: false, // 允许调用 preventDefault
+});