hexo-theme-solitude 3.0.20 → 4.0.0

package/source/css/_search/local-search.styl

@@ -1,67 +1,145 @@
+html.search-open
+  overflow hidden
+
 .search-dialog
   position fixed
-  top 5rem
-  left 50%
+  inset 0
   z-index 1001
   display none
-  margin-left -15rem
+  margin auto
   padding 1rem
   width 30rem
+  height fit-content
+  max-height 90dvh
+  overflow hidden
   box-shadow var(--efu-shadow-lightblack)
   background var(--efu-card-bg)
   border var(--style-border)
-  transition 0.3s
-  border-radius 8px
+  border-radius 12px
+  transition .3s
   animation slide-in .6s ease 0s 1 normal none running
   gap 16px
-  flex-direction: column
+  flex-direction column
 
   &:hover
     border var(--style-border-hover)
     box-shadow var(--efu-shadow-theme)
-    +maxWidth768()
-      border none
-
-  +maxWidth768()
-    top 0
-    left 0
-    margin 0
-    width 100%
-    height 100%
-    border 0
 
   .search-dialog-title
-    font-weight 700
     color var(--efu-main)
     font-size 1.4em
+    font-weight 700
     line-height 1
 
   .search-close-button
+    display inline-flex
+    align-items center
+    justify-content center
+    flex 0 0 32px
+    width 32px
+    height 32px
+    margin-left 4px
+    padding 4px
     color var(--efu-gray)
+    background transparent
+    border 0
+    border-radius 50%
     font-size 1.4em
     line-height 1
     cursor pointer
-    transition color .2s ease-in-out 0s
+    transition color .2s ease-in-out, background .2s ease-in-out
 
     &:hover
       color var(--efu-main)
+      background var(--efu-main-op)
+
+  .search-wrap
+    display flex
+    min-height 0
+    overflow hidden
+    flex-direction column
+    gap 16px
+
+  .search-box
+    position relative
+    width 100%
+    max-width 100%
+    margin 0 auto
+
+    input
+      width 100%
+      height 44px
+      padding .25rem .7rem
+      outline 0
+      color var(--efu-fontcolor)
+      background var(--efu-secondbg)
+      border var(--style-border)
+      border-radius 12px
+      caret-color var(--efu-theme)
+
+      &:focus
+        border var(--style-border-hover)
+
+      &::placeholder
+        color var(--efu-gray)
+        opacity .8
+
+  #search-suggestions
+    display flex
+    flex-wrap wrap
+    gap 8px
+
+    &[hidden]
+      display none
+
+    .tag-list
+      min-height 30px
+      padding 3px 8px
+      color var(--efu-fontcolor)
+      background transparent
+      border var(--style-border-always)
+      border-radius 8px
+      line-height 1.2
+      cursor pointer
+      transition color .2s ease-in-out, background .2s ease-in-out, border-color .2s ease-in-out
+
+      &:hover,
+      &:focus-visible
+        color var(--efu-white)
+        background var(--efu-main)
+        border-color var(--efu-main)
+        outline 0
 
   #search-results
-    max-height calc(80vh - 130px)
+    display flex
+    max-height calc(90dvh - 250px)
+    min-height 0
+    margin 0
+    padding 0
     overflow-y auto
-    margin-top 8px
+    flex 1
+    flex-direction column
+    list-style none
+
+    &[hidden]
+      display none
 
     .search-result-item
+      width 100%
       padding-left 0
       font-weight 700
+      line-height 1.5
 
       .search-result-title
+        display block
         position relative
-        transition color .2s ease-in-out 0s
+        width 100%
+        padding 3px 0
+        overflow hidden
+        color var(--efu-fontcolor)
         white-space nowrap
         text-overflow ellipsis
-        overflow hidden
-        display block
+        transition color .2s ease-in-out
 
         &:hover
           color var(--efu-hovertext)
@@ -70,39 +148,50 @@
           color var(--efu-theme)
           font-style normal
 
-    +maxWidth768()
-      max-height 80vh !important
+    .search-result-empty,
+    .search-result-error,
+    .search-result-loading
+      color var(--efu-secondtext)
 
   #search-pagination
+    &:empty
+      display none
+
     .pagination-list
+      display flex
+      justify-content center
+      gap 8px
+      margin 0
       padding 0
-      text-align center
-
-      .pagination-item
-        color var(--efu-fontcolor)
-        display inline-block
-        min-width 1.2rem
-        height 1.2rem
-        text-align center
-        line-height 1.2rem
-        cursor pointer
-
-        &:hover
-          color var(--efu-main)
+      list-style none
+
+    .pagination-button
+      display inline-flex
+      align-items center
+      justify-content center
+      min-width 1.2rem
+      height 1.2rem
+      padding 0
+      color var(--efu-fontcolor)
+      background transparent
+      border 0
+      border-radius 4px
+      cursor pointer
 
-        &.select
-          border-radius 4px
-          background var(--efu-main)
-          color var(--efu-white)
-          cursor default
+      &:hover
+        color var(--efu-main)
 
-          &:hover
-            color var(--efu-white)
+      &.select
+        color var(--efu-white)
+        background var(--efu-main)
+        cursor default
 
   #search-tips
+    width 100%
     color var(--efu-secondtext)
-    right 0
-    margin auto
+
+    &:empty
+      display none
 
     .search-result-count
       color var(--efu-gray)
@@ -111,51 +200,38 @@
       b
         color var(--efu-main)
 
-  .search-box
-    position relative
-    margin 0 auto
-    max-width 100%
-    width 100%
-
-    input
-      height 100%
-      width 100%
-      border-radius 8px
-      border var(--style-border)
-      padding 0.25rem 0.7rem;
-      outline 0
-      background var(--efu-secondbg)
-      color var(--efu-fontcolor)
-      caret-color var(--efu-theme)
-
-      &::placeholder
-        color var(--efu-gray)
-        opacity .8
+.search-nav
+  display flex
+  align-items center
+  justify-content space-between
 
 #search-mask
   position fixed
   inset 0
   z-index 1000
   display none
-  background rgba(0, 0, 0, 0.6)
+  background var(--efu-maskbgdeep)
   backdrop-filter blur(12px)
   -webkit-backdrop-filter blur(12px)
   transform translateZ(0)
-  background var(--efu-maskbgdeep)
 
-#search-hits
-  .tag-list
-    padding 4px 8px
-    border-radius 8px
-    margin-right 0.5rem
-    margin-top 0.5rem
-    border var(--style-border-always)
+@media screen and (max-width: 767px)
+  .search-dialog
+    inset 0
+    width 100vw
+    height var(--search-height, 100dvh)
+    max-height none
+    margin 0
+    border 0
+    border-radius 0
 
     &:hover
-      background var(--efu-main)
-      color var(--efu-white)
+      border 0
+      box-shadow var(--efu-shadow-lightblack)
 
-.search-nav
-  display: flex
-  justify-content: space-between
-  align-content: center
+    .search-wrap
+      flex 1
+
+    #search-results
+      max-height none
+      flex 1

package/source/css/var.styl

@@ -6,12 +6,12 @@ $dark_theme = convert(hexo-config('theme_color.dark'))
 $dark_theme_op = convert(hexo-config('theme_color.dark') + '23')
 $dark_theme_op_deep = convert(hexo-config('theme_color.dark') + 'dd')
 $dark_theme_none = convert(hexo-config('theme_color.dark') + '00')
+$dark_nav_hover_text = convert(hexo-config('theme_color.nav_hover_text.dark'))
 $light_theme = convert(hexo-config('theme_color.light'))
 $light_theme_op = convert(hexo-config('theme_color.light') + '23')
 $light_theme_op_deep = convert(hexo-config('theme_color.light') + 'dd')
 $light_theme_none = convert(hexo-config('theme_color.light') + '00')
-
-$todayCardColor = convert(hexo-config('hometop.recommendList.color'))
+$light_nav_hover_text = convert(hexo-config('theme_color.nav_hover_text.light'))
 
 // code
 if hexo-config('highlight.theme') == 'default'

package/source/js/archive-page.js

@@ -0,0 +1,191 @@
+import { Solitude } from "./core/api.js";
+
+export const archivePageController = (() => {
+  const createElement = (tag, className, text) => {
+    const element = document.createElement(tag);
+    if (className) element.className = className;
+    if (text !== undefined) element.textContent = text;
+    return element;
+  };
+
+  const controller = {
+    init() {
+      const shell = document.getElementById('archives-page');
+      const dataElement = document.getElementById('archive-page-data');
+      if (!shell || !dataElement || shell.dataset.archiveInitialized === 'true') return;
+
+      let posts;
+      try {
+        posts = JSON.parse(dataElement.content?.textContent || dataElement.textContent || '[]');
+      } catch (error) {
+        this.renderState(shell, '文章数据加载失败，请稍后再试。');
+        console.error('Failed to parse archive data:', error);
+        return;
+      }
+
+      shell.dataset.archiveInitialized = 'true';
+      this.shell = shell;
+      this.list = shell.querySelector('#archives-page-list');
+      this.yearList = shell.querySelector('#archives-year-filter-list');
+      this.pagination = shell.querySelector('#pagination .pagination');
+      this.paginationSection = shell.querySelector('.archive-page-section-pagination');
+      this.posts = Array.isArray(posts) ? posts : [];
+      this.perPage = Math.max(Number(shell.dataset.perPage) || 10, 1);
+      this.years = [...new Set(this.posts.map(post => String(post.year)))].sort((a, b) => Number(b) - Number(a));
+      this.activeYear = this.years.includes(shell.dataset.initialYear) ? shell.dataset.initialYear : 'all';
+      this.currentPage = Math.max(Number(shell.dataset.initialPage) || 1, 1);
+
+      this.renderYears();
+      this.bindEvents();
+      this.render();
+    },
+
+    bindEvents() {
+      this.shell.addEventListener('click', event => {
+        const yearButton = event.target.closest('.archive-year-button');
+        if (yearButton) {
+          this.activeYear = yearButton.dataset.year;
+          this.currentPage = 1;
+          this.render();
+          return;
+        }
+
+        const pageButton = event.target.closest('[data-archive-page]');
+        if (!pageButton || pageButton.disabled) return;
+        this.currentPage = Number(pageButton.dataset.archivePage);
+        this.render();
+        this.shell.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      });
+    },
+
+    renderYears() {
+      this.yearList.replaceChildren();
+      this.years.forEach(year => {
+        const button = createElement('button', 'archive-year-button', year);
+        button.type = 'button';
+        button.dataset.year = year;
+        button.setAttribute('aria-pressed', 'false');
+        this.yearList.appendChild(button);
+      });
+    },
+
+    render() {
+      const filteredPosts = this.activeYear === 'all'
+        ? this.posts
+        : this.posts.filter(post => String(post.year) === this.activeYear);
+      const totalPages = Math.max(Math.ceil(filteredPosts.length / this.perPage), 1);
+      this.currentPage = Math.min(this.currentPage, totalPages);
+
+      this.shell.querySelectorAll('.archive-year-button').forEach(button => {
+        const active = button.dataset.year === this.activeYear;
+        button.classList.toggle('is-active', active);
+        button.setAttribute('aria-pressed', String(active));
+      });
+
+      this.list.replaceChildren();
+      if (!filteredPosts.length) {
+        this.renderState(this.shell, '当前年份下暂无文章。');
+      } else {
+        const start = (this.currentPage - 1) * this.perPage;
+        filteredPosts.slice(start, start + this.perPage).forEach(post => {
+          this.list.appendChild(this.createPostItem(post));
+        });
+      }
+
+      this.renderPagination(totalPages);
+    },
+
+    createPostItem(post) {
+      const item = createElement('a', 'archive-page-item');
+      item.href = post.url;
+      item.title = post.title;
+
+      const thumb = createElement('div', 'archive-page-thumb');
+      const image = createElement('img');
+      image.src = post.cover;
+      image.alt = post.title;
+      image.loading = 'lazy';
+      image.addEventListener('error', () => thumb.classList.add('is-fallback'), { once: true });
+      const fallback = createElement('span', 'archive-page-thumb-fallback', (post.title || '文').trim().charAt(0) || '文');
+      thumb.append(image, fallback);
+
+      const main = createElement('div', 'archive-page-item-main');
+      const title = createElement('div', 'archive-page-item-title', post.title);
+      const meta = createElement('div', 'archive-page-item-meta');
+      meta.append(
+        createElement('span', 'archive-page-item-category', post.primaryCategory || '未分类'),
+        createElement('span', 'archive-page-item-divider', '/'),
+        createElement('span', 'archive-page-item-date', post.dateLabel)
+      );
+      main.append(title, meta);
+
+      const arrow = createElement('div', 'archive-page-item-arrow');
+      const arrowIcon = createElement('i', 'solitude fas fa-chevron-right');
+      arrow.setAttribute('aria-hidden', 'true');
+      arrow.appendChild(arrowIcon);
+      item.append(thumb, main, arrow);
+      return item;
+    },
+
+    renderPagination(totalPages) {
+      this.pagination.replaceChildren();
+      this.paginationSection.hidden = totalPages <= 1;
+      if (totalPages <= 1) return;
+
+      this.pagination.appendChild(this.createPageButton(this.currentPage - 1, '上一页', 'archive-page-extend prev', this.currentPage === 1, 'fa-chevron-left'));
+
+      this.getPageRange(totalPages).forEach(page => {
+        if (page === 'space') {
+          this.pagination.appendChild(createElement('span', 'archive-page-space', '...'));
+          return;
+        }
+        const button = this.createPageButton(page, String(page), 'archive-page-number', false);
+        if (page === this.currentPage) {
+          button.classList.add('is-current');
+          button.setAttribute('aria-current', 'page');
+        }
+        this.pagination.appendChild(button);
+      });
+
+      this.pagination.appendChild(this.createPageButton(this.currentPage + 1, '下一页', 'archive-page-extend next', this.currentPage === totalPages, 'fa-chevron-right'));
+    },
+
+    createPageButton(page, label, className, disabled, iconName) {
+      const button = createElement('button', className);
+      button.type = 'button';
+      button.disabled = disabled;
+      button.dataset.archivePage = String(page);
+      button.setAttribute('aria-label', label);
+      if (iconName === 'fa-chevron-left') button.appendChild(createElement('i', `solitude fas ${iconName}`));
+      button.appendChild(createElement('span', '', label));
+      if (iconName === 'fa-chevron-right') button.appendChild(createElement('i', `solitude fas ${iconName}`));
+      return button;
+    },
+
+    getPageRange(totalPages) {
+      if (totalPages <= 7) return Array.from({ length: totalPages }, (_, index) => index + 1);
+      if (this.currentPage <= 4) return [1, 2, 3, 4, 5, 'space', totalPages];
+      if (this.currentPage >= totalPages - 3) return [1, 'space', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+      return [1, 'space', this.currentPage - 1, this.currentPage, this.currentPage + 1, 'space', totalPages];
+    },
+
+    renderState(shell, message) {
+      const list = shell.querySelector('#archives-page-list');
+      if (!list) return;
+      list.replaceChildren(createElement('div', 'archive-page-state', message));
+    },
+
+    destroy() {
+      this.shell = null;
+      this.list = null;
+      this.yearList = null;
+      this.pagination = null;
+      this.paginationSection = null;
+      this.posts = [];
+    }
+  };
+
+  return controller;
+})();
+
+export const initArchivePage = () => archivePageController.init();

package/source/js/core/actions.js

@@ -0,0 +1,48 @@
+export const initActionDelegation = (api) => {
+  if (document.documentElement.dataset.solitudeActions === "true") return;
+  document.documentElement.dataset.solitudeActions = "true";
+
+  const dispatch = (event) => {
+    if (!(event.target instanceof Element)) return;
+    const element = event.target.closest("[data-solitude-action]");
+    if (!element) return;
+    const action = api[element.dataset.solitudeAction];
+    if (typeof action !== "function") return;
+
+    if (element.dataset.solitudePrevent === "true") event.preventDefault();
+    if (element.dataset.solitudeStop === "true") event.stopPropagation();
+
+    let argument;
+    if (element.dataset.solitudeTarget) argument = element.dataset.solitudeTarget;
+    else if (element.dataset.solitudeUrl) argument = element.dataset.solitudeUrl;
+    else if (element.dataset.solitudeValue) argument = element.dataset.solitudeValue;
+    else if (element.dataset.solitudeEvent === "true") argument = event;
+
+    action.call(api, argument, event, element);
+  };
+
+  document.addEventListener("click", dispatch);
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    if (!(event.target instanceof Element)) return;
+    const element = event.target.closest("[data-solitude-action]");
+    if (!element || /^(A|BUTTON|INPUT)$/.test(element.tagName)) return;
+    event.preventDefault();
+    element.click();
+  });
+
+  document.addEventListener("error", (event) => {
+    const element = event.target;
+    if (!(element instanceof Element)) return;
+    if (element.matches("[data-solitude-hide-ads]")) {
+      document
+        .querySelectorAll(".google-ads-warp")
+        .forEach((item) => { item.style.display = "none"; });
+    }
+    const fallback = element.dataset.solitudeFallback;
+    if (fallback && element.getAttribute("src") !== fallback) {
+      element.removeAttribute("data-solitude-fallback");
+      element.setAttribute("src", fallback);
+    }
+  }, true);
+};

package/source/js/core/api.js

@@ -0,0 +1,32 @@
+import { getConfig, getPageConfig } from "./config.js";
+import { lifecycle } from "./lifecycle.js";
+import { loadScript, loadStyle } from "./resources.js";
+
+const api = window.Solitude || {};
+
+Object.defineProperties(api, {
+  config: { configurable: true, get: getConfig },
+  page: { configurable: true, get: getPageConfig },
+});
+
+Object.assign(api, {
+  loadScript(url, options) {
+    if (/barrage(?:\.min)?\.js(?:\?|$)/.test(url)) api.installLegacyAdapter?.();
+    return loadScript(url, options);
+  },
+  loadStyle,
+  on: lifecycle.on.bind(lifecycle),
+  listen: lifecycle.listen.bind(lifecycle),
+  onPageCleanup: lifecycle.add.bind(lifecycle),
+  disposePage: lifecycle.disposePage.bind(lifecycle),
+  navigate(url) {
+    if (!url) return;
+    const instance = api.pjax;
+    if (instance?.loadUrl) instance.loadUrl(url);
+    else window.location.assign(url);
+  },
+});
+
+window.Solitude = api;
+
+export { api as Solitude };

package/source/js/core/config.js

@@ -0,0 +1,13 @@
+const parseConfig = (id, fallback = {}) => {
+  const element = document.getElementById(id);
+  if (!element) return fallback;
+  try {
+    return JSON.parse(element.content?.textContent || element.textContent || "{}");
+  } catch (error) {
+    console.error(`Invalid Solitude configuration in #${id}:`, error);
+    return fallback;
+  }
+};
+
+export const getConfig = () => parseConfig("site-config");
+export const getPageConfig = () => parseConfig("config-diff");

package/source/js/core/lifecycle.js

@@ -0,0 +1,52 @@
+const EVENT_PREFIX = "solitude:";
+
+class Lifecycle {
+  #pageController = new AbortController();
+  #disposers = new Set();
+
+  get signal() {
+    return this.#pageController.signal;
+  }
+
+  add(disposer) {
+    if (typeof disposer !== "function") return () => {};
+    this.#disposers.add(disposer);
+    return () => this.#disposers.delete(disposer);
+  }
+
+  listen(target, type, handler, options = {}) {
+    if (!target?.addEventListener) return () => {};
+    const normalized =
+      typeof options === "boolean" ? { capture: options } : { ...options };
+    normalized.signal ??= this.signal;
+    target.addEventListener(type, handler, normalized);
+    return () => target.removeEventListener(type, handler, normalized);
+  }
+
+  disposePage() {
+    this.#pageController.abort();
+    this.#disposers.forEach((dispose) => {
+      try {
+        dispose();
+      } catch (error) {
+        console.error("Failed to dispose a Solitude page resource:", error);
+      }
+    });
+    this.#disposers.clear();
+    this.#pageController = new AbortController();
+  }
+
+  emit(type, detail) {
+    document.dispatchEvent(
+      new CustomEvent(`${EVENT_PREFIX}${type}`, { detail })
+    );
+  }
+
+  on(type, handler) {
+    const eventName = `${EVENT_PREFIX}${type}`;
+    document.addEventListener(eventName, handler);
+    return () => document.removeEventListener(eventName, handler);
+  }
+}
+
+export const lifecycle = new Lifecycle();