hexo-theme-hydrogen 1.1.0

package/source/js/main.js

@@ -0,0 +1,366 @@
+/**
+ * 主脚本文件
+ */
+(function () {
+  "use strict";
+
+  // ===== 主题切换 =====
+  function initThemeToggle() {
+    const toggle = document.querySelector(".theme-toggle");
+    if (!toggle) return;
+
+    // 获取保存的主题或系统偏好
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    const defaultTheme =
+      document.documentElement.dataset.defaultTheme || "auto";
+
+    let currentTheme;
+    if (savedTheme) {
+      currentTheme = savedTheme;
+    } else if (defaultTheme === "auto") {
+      currentTheme = prefersDark ? "dark" : "light";
+    } else {
+      currentTheme = defaultTheme;
+    }
+
+    setTheme(currentTheme);
+
+    // 点击切换
+    toggle.addEventListener("click", function () {
+      const isDark = document.documentElement.dataset.theme === "dark";
+      const newTheme = isDark ? "light" : "dark";
+      setTheme(newTheme);
+      localStorage.setItem("theme", newTheme);
+    });
+
+    // 监听系统主题变化
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", function (e) {
+        if (!localStorage.getItem("theme")) {
+          setTheme(e.matches ? "dark" : "light");
+        }
+      });
+  }
+
+  function setTheme(theme) {
+    document.documentElement.dataset.theme = theme;
+  }
+
+  // ===== 移动端菜单 =====
+  function initMobileMenu() {
+    const menuToggle = document.querySelector(".menu-toggle");
+    const mobileNav = document.querySelector(".mobile-nav");
+
+    if (!menuToggle || !mobileNav) return;
+
+    menuToggle.addEventListener("click", function () {
+      mobileNav.classList.toggle("active");
+      menuToggle.classList.toggle("active");
+    });
+
+    // 点击导航链接后关闭菜单
+    mobileNav.querySelectorAll(".mobile-nav-link").forEach(function (link) {
+      link.addEventListener("click", function () {
+        mobileNav.classList.remove("active");
+        menuToggle.classList.remove("active");
+      });
+    });
+
+    // 点击外部关闭
+    document.addEventListener("click", function (e) {
+      if (!menuToggle.contains(e.target) && !mobileNav.contains(e.target)) {
+        mobileNav.classList.remove("active");
+        menuToggle.classList.remove("active");
+      }
+    });
+  }
+
+  // ===== TOC 高亮 =====
+  function initTocHighlight() {
+    const toc = document.querySelector(".toc-content");
+    if (!toc) return;
+
+    const headings = document.querySelectorAll(
+      ".markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4"
+    );
+    if (headings.length === 0) return;
+
+    const headerHeight =
+      parseInt(
+        getComputedStyle(document.documentElement).getPropertyValue(
+          "--header-height"
+        )
+      ) || 64;
+    const offset = headerHeight + 20;
+
+    let activeLink = null;
+
+    function updateActiveHeading() {
+      let current = null;
+
+      headings.forEach(function (heading) {
+        const rect = heading.getBoundingClientRect();
+        if (rect.top <= offset) {
+          current = heading;
+        }
+      });
+
+      if (current) {
+        const id = current.id;
+        const link = toc.querySelector('a[href="#' + id + '"]');
+
+        if (link && link !== activeLink) {
+          if (activeLink) {
+            activeLink.parentElement.classList.remove("active");
+          }
+          link.parentElement.classList.add("active");
+          activeLink = link;
+        }
+      }
+    }
+
+    window.addEventListener("scroll", throttle(updateActiveHeading, 100));
+    updateActiveHeading();
+  }
+
+  // ===== 图片灯箱 =====
+  function initLightbox() {
+    const images = document.querySelectorAll(".markdown-body img");
+    if (images.length === 0) return;
+
+    // 创建灯箱
+    const lightbox = document.createElement("div");
+    lightbox.className = "lightbox";
+    lightbox.innerHTML = '<img src="" alt="">';
+    document.body.appendChild(lightbox);
+
+    const lightboxImg = lightbox.querySelector("img");
+
+    images.forEach(function (img) {
+      img.style.cursor = "zoom-in";
+      img.addEventListener("click", function () {
+        lightboxImg.src = img.src;
+        lightboxImg.alt = img.alt;
+        lightbox.classList.add("active");
+        document.body.style.overflow = "hidden";
+      });
+    });
+
+    lightbox.addEventListener("click", function () {
+      lightbox.classList.remove("active");
+      document.body.style.overflow = "";
+    });
+
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape" && lightbox.classList.contains("active")) {
+        lightbox.classList.remove("active");
+        document.body.style.overflow = "";
+      }
+    });
+  }
+
+  // ===== 图片懒加载 =====
+  function initLazyLoad() {
+    const images = document.querySelectorAll(
+      '.markdown-body img[loading="lazy"]'
+    );
+
+    if ("IntersectionObserver" in window) {
+      const observer = new IntersectionObserver(
+        function (entries) {
+          entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+              const img = entry.target;
+              if (img.dataset.src) {
+                img.src = img.dataset.src;
+                img.removeAttribute("data-src");
+              }
+              observer.unobserve(img);
+            }
+          });
+        },
+        {
+          rootMargin: "100px",
+        }
+      );
+
+      images.forEach(function (img) {
+        observer.observe(img);
+      });
+    }
+  }
+
+  // ===== 代码复制按钮 =====
+  function initCodeCopy() {
+    const codeBlocks = document.querySelectorAll(".markdown-body pre");
+
+    codeBlocks.forEach(function (pre) {
+      const wrapper = document.createElement("div");
+      wrapper.className = "code-wrapper";
+      wrapper.style.position = "relative";
+
+      const button = document.createElement("button");
+      button.className = "code-copy-btn";
+      button.innerHTML =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>';
+      button.title = "复制代码";
+      button.style.cssText =
+        "position: absolute; top: 8px; right: 8px; padding: 6px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity 0.2s; color: var(--text-secondary);";
+
+      pre.parentNode.insertBefore(wrapper, pre);
+      wrapper.appendChild(pre);
+      wrapper.appendChild(button);
+
+      wrapper.addEventListener("mouseenter", function () {
+        button.style.opacity = "1";
+      });
+
+      wrapper.addEventListener("mouseleave", function () {
+        button.style.opacity = "0";
+      });
+
+      button.addEventListener("click", function () {
+        const code = pre.querySelector("code");
+        const text = code ? code.textContent : pre.textContent;
+
+        navigator.clipboard.writeText(text).then(function () {
+          button.innerHTML =
+            '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+          button.style.color = "var(--success)";
+
+          setTimeout(function () {
+            button.innerHTML =
+              '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>';
+            button.style.color = "var(--text-secondary)";
+          }, 2000);
+        });
+      });
+    });
+  }
+
+  // ===== 平滑滚动到锚点 =====
+  function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
+      anchor.addEventListener("click", function (e) {
+        const href = this.getAttribute("href");
+        if (href === "#") return;
+
+        const target = document.querySelector(href);
+        if (target) {
+          e.preventDefault();
+          const headerHeight =
+            parseInt(
+              getComputedStyle(document.documentElement).getPropertyValue(
+                "--header-height"
+              )
+            ) || 64;
+          const top =
+            target.getBoundingClientRect().top +
+            window.pageYOffset -
+            headerHeight -
+            20;
+
+          window.scrollTo({
+            top: top,
+            behavior: "smooth",
+          });
+
+          // 更新 URL
+          history.pushState(null, null, href);
+        }
+      });
+    });
+  }
+
+  // ===== 回到顶部 =====
+  function initBackToTop() {
+    const button = document.createElement("button");
+    button.className = "back-to-top";
+    button.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>';
+    button.title = "回到顶部";
+    button.style.cssText =
+      "position: fixed; bottom: 24px; right: 24px; z-index: 100; width: 48px; height: 48px; display: none; align-items: center; justify-content: center; background: var(--primary-color); color: white; border: none; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-lg); transition: all 0.3s;";
+    document.body.appendChild(button);
+
+    window.addEventListener(
+      "scroll",
+      throttle(function () {
+        if (window.pageYOffset > 300) {
+          button.style.display = "flex";
+        } else {
+          button.style.display = "none";
+        }
+      }, 100)
+    );
+
+    button.addEventListener("click", function () {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    });
+  }
+
+  // ===== 外部链接处理 =====
+  function initExternalLinks() {
+    document.querySelectorAll(".markdown-body a").forEach(function (link) {
+      if (link.hostname !== window.location.hostname) {
+        link.setAttribute("target", "_blank");
+        link.setAttribute("rel", "noopener noreferrer");
+      }
+    });
+  }
+
+  // ===== 工具函数 =====
+  function throttle(func, wait) {
+    let timeout = null;
+    let previous = 0;
+
+    return function () {
+      const now = Date.now();
+      const remaining = wait - (now - previous);
+      const context = this;
+      const args = arguments;
+
+      if (remaining <= 0 || remaining > wait) {
+        if (timeout) {
+          clearTimeout(timeout);
+          timeout = null;
+        }
+        previous = now;
+        func.apply(context, args);
+      } else if (!timeout) {
+        timeout = setTimeout(function () {
+          previous = Date.now();
+          timeout = null;
+          func.apply(context, args);
+        }, remaining);
+      }
+    };
+  }
+
+  // ===== 初始化 =====
+  function init() {
+    initThemeToggle();
+    initMobileMenu();
+    initTocHighlight();
+    initLightbox();
+    initLazyLoad();
+    initCodeCopy();
+    initSmoothScroll();
+    initBackToTop();
+    initExternalLinks();
+  }
+
+  // DOM 加载完成后初始化
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

package/source/js/search.js

@@ -0,0 +1,267 @@
+/**
+ * 本地搜索功能
+ */
+(function () {
+  "use strict";
+
+  let searchData = null;
+  let searchModal = null;
+  let searchInput = null;
+  let searchResults = null;
+  let isLoading = false;
+
+  // 初始化搜索
+  function initSearch() {
+    searchModal = document.getElementById("search-modal");
+    searchInput = document.getElementById("search-input");
+    searchResults = document.getElementById("search-results");
+
+    if (!searchModal || !searchInput || !searchResults) {
+      return;
+    }
+
+    // 绑定搜索按钮
+    const searchToggle = document.querySelector(".search-toggle");
+    if (searchToggle) {
+      searchToggle.addEventListener("click", openSearch);
+    }
+
+    // 绑定关闭按钮
+    const closeBtn = searchModal.querySelector(".search-close");
+    if (closeBtn) {
+      closeBtn.addEventListener("click", closeSearch);
+    }
+
+    // 点击遮罩关闭
+    searchModal.addEventListener("click", function (e) {
+      if (e.target === searchModal) {
+        closeSearch();
+      }
+    });
+
+    // ESC 关闭
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape" && searchModal.classList.contains("active")) {
+        closeSearch();
+      }
+      // Ctrl/Cmd + K 打开搜索
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        openSearch();
+      }
+    });
+
+    // 搜索输入
+    let debounceTimer = null;
+    searchInput.addEventListener("input", function () {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(function () {
+        performSearch(searchInput.value.trim());
+      }, 300);
+    });
+  }
+
+  // 打开搜索
+  function openSearch() {
+    if (!searchModal) return;
+
+    searchModal.classList.add("active");
+    document.body.style.overflow = "hidden";
+
+    // 加载搜索数据
+    loadSearchData();
+
+    // 聚焦输入框
+    setTimeout(function () {
+      searchInput.focus();
+    }, 100);
+  }
+
+  // 关闭搜索
+  function closeSearch() {
+    if (!searchModal) return;
+
+    searchModal.classList.remove("active");
+    document.body.style.overflow = "";
+    searchInput.value = "";
+    searchResults.innerHTML = "";
+  }
+
+  // 获取站点根路径
+  function getSiteRoot() {
+    return (window.STARTER_CONFIG && window.STARTER_CONFIG.root) || '/';
+  }
+
+  // 加载搜索数据
+  function loadSearchData() {
+    if (searchData || isLoading) return;
+
+    isLoading = true;
+    searchResults.innerHTML = '<div class="search-loading">加载中...</div>';
+
+    const root = getSiteRoot();
+    const searchUrl = root + 'search.json';
+    fetch(searchUrl)
+      .then(function (response) {
+        return response.json();
+      })
+      .then(function (data) {
+        searchData = data;
+        isLoading = false;
+        searchResults.innerHTML =
+          '<div class="search-tip">输入关键词开始搜索</div>';
+      })
+      .catch(function (error) {
+        console.error("加载搜索数据失败:", error);
+        isLoading = false;
+        searchResults.innerHTML =
+          '<div class="search-error">加载失败，请刷新重试</div>';
+      });
+  }
+
+  // 执行搜索
+  function performSearch(query) {
+    if (!query) {
+      searchResults.innerHTML =
+        '<div class="search-tip">输入关键词开始搜索</div>';
+      return;
+    }
+
+    if (!searchData) {
+      searchResults.innerHTML = '<div class="search-loading">加载中...</div>';
+      return;
+    }
+
+    const keywords = query.toLowerCase().split(/\s+/).filter(Boolean);
+    const results = [];
+
+    searchData.forEach(function (item) {
+      let score = 0;
+      const matchedKeywords = [];
+
+      keywords.forEach(function (keyword) {
+        // 标题匹配（权重最高）
+        if (item.title && item.title.toLowerCase().includes(keyword)) {
+          score += 10;
+          matchedKeywords.push(keyword);
+        }
+
+        // 标签匹配
+        if (
+          item.tags &&
+          item.tags.some(function (tag) {
+            return tag.toLowerCase().includes(keyword);
+          })
+        ) {
+          score += 5;
+          matchedKeywords.push(keyword);
+        }
+
+        // 内容匹配
+        if (item.content && item.content.toLowerCase().includes(keyword)) {
+          score += 1;
+          matchedKeywords.push(keyword);
+        }
+      });
+
+      if (score > 0) {
+        results.push({
+          item: item,
+          score: score,
+          matchedKeywords: [...new Set(matchedKeywords)],
+        });
+      }
+    });
+
+    // 按分数排序
+    results.sort(function (a, b) {
+      return b.score - a.score;
+    });
+
+    renderResults(results.slice(0, 10), keywords);
+  }
+
+  // 渲染搜索结果
+  function renderResults(results, keywords) {
+    if (results.length === 0) {
+      searchResults.innerHTML =
+        '<div class="search-empty">没有找到相关结果</div>';
+      return;
+    }
+
+    searchResults.innerHTML = results
+        .map(function (result) {
+          const item = result.item;
+
+          // 高亮标题
+          let title = escapeHtml(item.title);
+          keywords.forEach(function (keyword) {
+            const regex = new RegExp("(" + escapeRegExp(keyword) + ")", "gi");
+            title = title.replace(regex, "<mark>$1</mark>");
+          });
+
+          // 高亮摘要
+          let excerpt = item.excerpt || "";
+          excerpt = escapeHtml(excerpt);
+          keywords.forEach(function (keyword) {
+            const regex = new RegExp("(" + escapeRegExp(keyword) + ")", "gi");
+            excerpt = excerpt.replace(regex, "<mark>$1</mark>");
+          });
+
+          // 标签
+          let tagsHtml = "";
+          if (item.tags && item.tags.length) {
+            tagsHtml =
+                '<div class="search-result-tags">' +
+                item.tags
+                    .slice(0, 3)
+                    .map(function (tag) {
+                      return (
+                          '<span class="search-tag">' + escapeHtml(tag) + "</span>"
+                      );
+                    })
+                    .join("") +
+                "</div>";
+          }
+
+          const root = getSiteRoot();
+          return (
+              '<a href="' +
+              root +
+              item.url +
+              '" class="search-result-item">' +
+              '<div class="search-result-title">' +
+              title +
+              "</div>" +
+              (excerpt
+                  ? '<div class="search-result-excerpt">' + excerpt + "...</div>"
+                  : "") +
+              tagsHtml +
+              (item.date
+                  ? '<div class="search-result-date">' + item.date + "</div>"
+                  : "") +
+              "</a>"
+          );
+        })
+        .join("");
+  }
+
+  // HTML 转义
+  function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // 正则转义
+  function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  // DOM 加载完成后初始化
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initSearch);
+  } else {
+    initSearch();
+  }
+})();