hexo-theme-stellar 1.35.0 → 1.37.0

package/scripts/filters/lib/img_lazyload.js

@@ -5,22 +5,22 @@
 
 'use strict';
 
-const fs = require('hexo-fs');
-
+// 懒加载强制开启：不再读取 enable 配置，no-lazy 是唯一例外
 function lazyProcess(htmlContent) {
-  const cfg = this.theme.config.plugins.lazyload;
-  if (cfg == undefined || cfg.enable != true) {
-    return htmlContent;
-  }
   return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, function(imgTag, src_before, src_value, src_after) {
-    // might be duplicate
-    if (/data-srcset/gi.test(imgTag)) {
+    // 已由 tag 插件输出懒加载标记（data-src / data-srcset）的图片不重复处理
+    if (/data-src/gi.test(imgTag)) {
+      return imgTag;
+    }
+    // 使用 srcset 的图片交给浏览器原生处理，避免占位图与 srcset 冲突
+    if (/srcset=/gi.test(imgTag)) {
       return imgTag;
     }
     if (/src="data:image(.*?)/gi.test(imgTag)) {
       return imgTag;
     }
-    if (imgTag.includes(' no-lazy ')) {
+    // no-lazy 兼容 `no-lazy` / `no-lazy=""` 两种写法
+    if (/\bno-lazy\b/gi.test(imgTag)) {
       return imgTag;
     }
     var newImgTag = imgTag;

package/scripts/tags/lib/emoji.js

@@ -3,6 +3,7 @@
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * {% emoji [source] name [height:1.75em] %}
+ * {% emoji url:https://example.com/emoji.png [name:alt] [height:1.75em] %}
  *
  */
 
@@ -10,12 +11,26 @@
 
 module.exports = ctx => function(args) {
   const config = ctx.theme.config.tag_plugins.emoji
-  args = ctx.args.map(args, ['height'], ['source', 'name'])
+  args = ctx.args.map(args, ['url', 'height', 'name'], ['source', 'name'])
   var el = ''
+  el += '<span class="tag-plugin emoji">'
+  if (args.url) {
+    // 直接引用外部图片，不再走 source 配置查找
+    el += '<img no-lazy="" class="inline"'
+    el += ' src="' + args.url + '"'
+    if (args.name) {
+      el += ' alt="' + args.name + '"'
+    }
+    if (args.height) {
+      el += ' style="height:' + args.height + '"'
+    }
+    el += '/>'
+    el += '</span>'
+    return el
+  }
   if (args.source == undefined) {
     return el
   }
-  el += '<span class="tag-plugin emoji">'
   if (args.name == undefined) {
     // 省略了 source
     for (let id in config) {

package/scripts/tags/lib/image.js

@@ -16,32 +16,27 @@ module.exports = ctx => function(args) {
   if (args.height) {
     style += 'height:' + args.height + ';'
   }
-  // fancybox
-  var fancybox = false
+  // fancybox 默认开启（不再支持全局关闭），单图可用 fancybox:false 关闭
+  var fancybox = true
   var fancyboxHref = null
-  if (ctx.theme.config.plugins.fancybox && ctx.theme.config.plugins.fancybox.enable) {
-    // 主题配置
-    if (ctx.theme.config.tag_plugins.image && ctx.theme.config.tag_plugins.image.fancybox) {
-      fancybox = ctx.theme.config.tag_plugins.image.fancybox
-    }
-    // 覆盖配置
-    if (args.fancybox && args.fancybox.length > 0) {
-      if (args.fancybox == 'false') {
-        fancybox = false
-      } else if (args.fancybox === 'true') {
-        fancybox = args.fancybox
-      } else {
-        fancybox = true
-        fancyboxHref = args.fancybox
-      }
+  if (args.fancybox && args.fancybox.length > 0) {
+    if (args.fancybox == 'false') {
+      fancybox = false
+    } else if (args.fancybox === 'true') {
+      fancybox = true
+    } else {
+      fancybox = true
+      fancyboxHref = args.fancybox
     }
   }
 
   var safeAlt = require('hexo-util').escapeHTML(args.alt || '')
+  // 懒加载占位图（1x1 透明 PNG），真实地址放在 data-src
+  const loadingImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII='
   function img(src, alt, style) {
     let a = '<a data-fancybox'
     let img = ''
-    img += `<img class="lazy" src="${src}" data-src="${src}"`
+    img += `<img class="lazy" src="${loadingImg}" data-src="${src}"`
     if (safeAlt) {
       img += ` alt="${safeAlt}"`
       a += ` data-caption="${safeAlt}"`

package/source/css/_common/html.styl

@@ -10,8 +10,6 @@ html
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
   scroll-padding-top: 8px
-  if hexo-config('style.smooth_scroll')
-    scroll-behavior: smooth
 body
   background: var(--background)
   margin: 0

package/source/css/_components/widgets/toc.styl

@@ -141,7 +141,7 @@
   .widget-body
     grid-template-rows: 0fr
 
-// 编辑本文按钮
+// 操作按钮（回到顶部 / 参与讨论）
 .widget-wrapper.toc .widget-body+.widget-footer:before 
   content: ''
   position absolute
@@ -188,4 +188,4 @@
     a
       background: var(--block)
     a+a
-      margin-top: 4px
+      margin-top: 4px

package/source/css/_plugins/lazyload.styl

@@ -1,9 +1,13 @@
-$lazyTransitionType = hexo-config('plugins.lazyload.transition')
+$lazyTransitionType = hexo-config('dependencies.lazyload.transition')
 $loadingImageSize = 2rem
 
 img:not([src])
   visibility: hidden
 
+.lazy
+  opacity: 0
+  z-index: 1
+
 .lazy-box
   position: relative
   overflow: hidden
@@ -12,26 +16,8 @@ img:not([src])
     background: var(--block)
     min-height: 4rem
 
-// 懒加载
-img[data-ll-status]
-  z-index: 1
-  &:not(.loaded)
-    opacity: 0
-  &.loaded,&.error
-    opacity: 1
-  if $lazyTransitionType == 'blur'
-    trans1 all 0.5s
-    &:not(.loaded)
-      filter blur(20px)
-      -webkit-filter blur(20px)
-    &.loaded,&.error
-      filter none
-      -webkit-filter none
-  else
-    trans1 all 0.38s
-
 // 加载占位动画
-img[data-ll-status]+.lazy-icon
+img.lazy.loading + .lazy-icon
   position: absolute
   width: $loadingImageSize
   height: $loadingImageSize
@@ -45,13 +31,41 @@ img[data-ll-status]+.lazy-icon
   background-position: center
 
 // 加载完成
-img[data-ll-status].loaded
-  &+.lazy-icon
-    display: none
+img.lazy.loaded + .lazy-icon,
+img.lazy.error + .lazy-icon
+  display: none
 
 // 加载失败
-img[data-ll-status].error
+img.lazy.error
   width: $loadingImageSize
   height: $loadingImageSize
-  &+.lazy-icon
-    display: none
+
+// 懒加载完成动画：使用 keyframes 而非 transition，
+// 因为缓存图片可能在 loading 状态被绘制前就完成加载，transition 没有起点会直接闪现
+if $lazyTransitionType == 'blur'
+  .lazy
+    filter: blur(20px)
+    -webkit-filter: blur(20px)
+  .lazy.loaded, .lazy.error
+    opacity: 1
+    filter: none
+    -webkit-filter: none
+    animation: ll-blur-in 0.5s ease-out
+  @keyframes ll-blur-in
+    from
+      opacity: 0
+      filter: blur(20px)
+      -webkit-filter: blur(20px)
+    to
+      opacity: 1
+      filter: none
+      -webkit-filter: none
+else
+  .lazy.loaded, .lazy.error
+    opacity: 1
+    animation: ll-fade-in 0.5s ease-out
+  @keyframes ll-fade-in
+    from
+      opacity: 0
+    to
+      opacity: 1

package/source/css/_plugins/scrollreveal.styl

@@ -1,2 +1,6 @@
 .slide-up
-  visibility: hidden
+  visibility: hidden
+
+// ScrollReveal 加载/初始化失败时强制显示内容，避免空白页
+html.sr-fallback .slide-up
+  visibility: visible !important

package/source/js/main.js

@@ -53,11 +53,14 @@ const util = {
   },
 
   scrollTop: () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    smoothScrollTo(0);
   },
 
   scrollComment: () => {
-    document.getElementById('comments').scrollIntoView({ behavior: "smooth" });
+    const el = document.getElementById('comments');
+    if (el) {
+      smoothScrollTo(el.getBoundingClientRect().top + window.scrollY - 32);
+    }
   },
 
   viewportLazyload: (target, func, enabled = true) => {
@@ -94,73 +97,168 @@ const hud = {
 
 const l_body = document.querySelector('.l_body');
 
+// 通用平滑滚动（自定义动画，TOC / 回到顶部 / 参与讨论共用）
+let scrollAnim = null;
+function cancelSmoothScroll() {
+  if (scrollAnim !== null) {
+    cancelAnimationFrame(scrollAnim);
+    scrollAnim = null;
+  }
+}
+function smoothScrollTo(targetY) {
+  cancelSmoothScroll();
+  targetY = Math.max(0, targetY);
+  const startY = window.scrollY;
+  const diff = targetY - startY;
+  if (Math.abs(diff) < 2) {
+    return;
+  }
+  // 短距离 300ms，长距离最多 600ms
+  const duration = Math.min(600, Math.max(300, Math.abs(diff) * 0.15));
+  const startTime = performance.now();
+  function step(now) {
+    const t = Math.min(1, (now - startTime) / duration);
+    const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic
+    // 显式指定 instant，避免全局 scroll-behavior: smooth 与自定义动画叠加导致滚动变慢
+    window.scrollTo({ top: startY + diff * eased, behavior: 'instant' });
+    if (t < 1) {
+      scrollAnim = requestAnimationFrame(step);
+    } else {
+      scrollAnim = null;
+    }
+  }
+  scrollAnim = requestAnimationFrame(step);
+}
+window.addEventListener('wheel', cancelSmoothScroll, { passive: true });
+window.addEventListener('touchstart', cancelSmoothScroll, { passive: true });
+
 
 const init = {
   toc: () => {
-    utils.jq(() => {
-      const scrollOffset = 32;
-      var segs = [];
-      $("article.md-text :header").each(function (idx, node) {
-        segs.push(node);
-      });
-      function activeTOC() {
-        var scrollTop = $(this).scrollTop();
-        var topSeg = null;
-        for (var idx in segs) {
-          var seg = $(segs[idx]);
-          if (seg.offset().top > scrollTop + scrollOffset) {
-            continue;
-          }
-          if (!topSeg) {
-            topSeg = seg;
-          } else if (seg.offset().top >= topSeg.offset().top) {
-            topSeg = seg;
-          }
+    const scrollOffset = 32;
+    // 滚动位置取整后标题顶可能落在偏移线下方 1~2px，加容差避免高亮回跳到上一条
+    const scrollTolerance = 4;
+    var segs = utils.qsa("article.md-text h1, article.md-text h2, article.md-text h3, article.md-text h4, article.md-text h5, article.md-text h6");
+    function activeTOC() {
+      var scrollTop = window.scrollY;
+      var topSeg = null;
+      for (var i = 0; i < segs.length; i++) {
+        var segTop = segs[i].getBoundingClientRect().top + window.scrollY;
+        if (segTop > scrollTop + scrollOffset + scrollTolerance) {
+          continue;
         }
-        if (topSeg) {
-          $("#data-toc a.toc-link").removeClass("active");
-          var link = "#" + topSeg.attr("id");
-          if (link != '#undefined') {
-            const highlightItem = $('#data-toc a.toc-link[href="' + encodeURI(link) + '"]');
-            if (highlightItem.length > 0) {
-              highlightItem.addClass("active");
-            }
-          } else {
-            $('#data-toc a.toc-link:first').addClass("active");
-          }
+        if (!topSeg || segTop >= topSeg.getBoundingClientRect().top + window.scrollY) {
+          topSeg = segs[i];
         }
       }
-      function scrollTOC() {
-        const e0 = document.querySelector('#data-toc .toc');
-        const e1 = document.querySelector('#data-toc .toc a.toc-link.active');
-        if (e0 == null || e1 == null) {
-          return;
-        }
-        const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100;
-        const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64;
-        if (offsetTop < 0) {
-          e0.scrollBy({ top: offsetTop, behavior: "smooth" });
-        } else if (offsetBottom > 0) {
-          e0.scrollBy({ top: offsetBottom, behavior: "smooth" });
+      if (topSeg) {
+        utils.dom("#data-toc a.toc-link").removeClass("active");
+        var id = topSeg.getAttribute("id");
+        var link = id ? "#" + id : "#undefined";
+        if (link != '#undefined') {
+          const highlightItem = utils.dom('#data-toc a.toc-link[href="' + encodeURI(link) + '"]');
+          if (highlightItem.length > 0) {
+            highlightItem.addClass("active");
+          }
+        } else {
+          const first = utils.qs('#data-toc a.toc-link');
+          if (first) first.classList.add("active");
         }
       }
+    }
+    function scrollTOC() {
+      const e0 = document.querySelector('#data-toc .toc');
+      const e1 = document.querySelector('#data-toc .toc a.toc-link.active');
+      if (e0 == null || e1 == null) {
+        return;
+      }
+      const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100;
+      const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64;
+      if (offsetTop < 0) {
+        e0.scrollBy({ top: offsetTop, behavior: "smooth" });
+      } else if (offsetBottom > 0) {
+        e0.scrollBy({ top: offsetBottom, behavior: "smooth" });
+      }
+    }
 
-      var timeout = null;
-      window.addEventListener('scroll', function () {
-        activeTOC();
-        if (timeout !== null) clearTimeout(timeout);
-        timeout = setTimeout(function () {
-          scrollTOC();
-        }.bind(this), 50);
-      });
-    })
+    var timeout = null;
+    window.addEventListener('scroll', function () {
+      activeTOC();
+      if (timeout !== null) clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        scrollTOC();
+      }, 50);
+    });
   },
   sidebar: () => {
-    utils.jq(() => {
-      $("#data-toc a.toc-link").click(function (e) {
-        sidebar.dismiss();
-      });
-    })
+    utils.dom("#data-toc a.toc-link").click(function (e) {
+      const href = this.getAttribute("href");
+      const id = href && href.indexOf("#") === 0 ? decodeURIComponent(href.slice(1)) : null;
+      const target = id && document.getElementById(id);
+      if (target) {
+        e.preventDefault();
+        const offset = 32; // 与 activeTOC 的 scrollOffset 保持一致
+        const targetY = target.getBoundingClientRect().top + window.scrollY - offset;
+        smoothScrollTo(targetY);
+        if (window.history && window.history.pushState) {
+          window.history.pushState(null, "", href);
+        }
+      }
+      sidebar.dismiss();
+    });
+  },
+  leftbarScroll: () => {
+    const container = document.querySelector('.l_left .widgets');
+    if (container == null) {
+      return;
+    }
+    const PREFIX = 'Stellar.leftbarScroll.';
+    const encode = (s) => encodeURIComponent(String(s || ''));
+    function scope() {
+      const wikiEl = document.querySelector('.doc-tree[data-wiki]');
+      if (wikiEl != null) {
+        return 'wiki:' + encode(wikiEl.getAttribute('data-wiki'));
+      }
+      const notebookEl = document.querySelector('widget[data-notebook]');
+      if (notebookEl != null) {
+        return 'notebook:' + encode(notebookEl.getAttribute('data-notebook'));
+      }
+      const body = document.querySelector('.l_body');
+      return 'layout:' + encode((body && body.getAttribute('layout')) || 'default');
+    }
+    window.addEventListener('pagehide', function () {
+      try {
+        const s = scope();
+        sessionStorage.setItem(PREFIX + s, String(container.scrollTop));
+        sessionStorage.setItem(PREFIX + 'last', s);
+      } catch (e) {}
+    });
+    try {
+      const s = scope();
+      // 仅当上一页与当前页属于同一分区时才恢复，离开分区后再回来不跳回旧位置
+      if (sessionStorage.getItem(PREFIX + 'last') !== s) {
+        return;
+      }
+      const value = sessionStorage.getItem(PREFIX + s);
+      if (value == null) {
+        return;
+      }
+      container.scrollTop = parseInt(value, 10) || 0;
+      const link = container.querySelector('a.link.active');
+      if (link == null) {
+        return;
+      }
+      const padding = 16;
+      const containerRect = container.getBoundingClientRect();
+      const linkRect = link.getBoundingClientRect();
+      const top = linkRect.top - containerRect.top;
+      const bottom = linkRect.bottom - containerRect.top;
+      if (top < 0) {
+        container.scrollTop += top - padding;
+      } else if (bottom > container.clientHeight) {
+        container.scrollTop += bottom - container.clientHeight + padding;
+      }
+    } catch (e) {}
   },
   relativeDate: (selector) => {
     selector.forEach(item => {
@@ -293,25 +391,15 @@ window.stellar = window.stellar || {};
 
 /**
  * Initialize page components
- * Called on initial load and after PJAX navigation
  */
 stellar.initPage = function () {
   init.toc();
   init.sidebar();
+  init.leftbarScroll();
   init.relativeDate(document.querySelectorAll('#post-meta time'));
   init.registerTabsTag();
-  
-  // Reinitialize comments after PJAX navigation
-  if (stellar.initComments) {
-    for (const commentSystem in stellar.initComments) {
-      if (typeof stellar.initComments[commentSystem] === 'function') {
-        stellar.initComments[commentSystem]();
-      }
-    }
-  }
 };
 
 // Initial page load
 stellar.initPage();
 init.canonicalCheck();
-

package/source/js/search/algolia-search.js

@@ -1,77 +1,77 @@
 utils.js(window.searchConfig.js).then(() => {
-  utils.jq(() => {
-    var $inputArea = $("input#search-input");
-    if ($inputArea.length === 0) {
-      return;
-    }
+  var inputArea = document.querySelector("input#search-input");
+  if (!inputArea) {
+    return;
+  }
 
-    var $resultArea = $("#search-result");
-    var $searchWrapper = $("#search-wrapper");
-    var client = algoliasearch(window.searchConfig.appId, window.searchConfig.apiKey);
-    var index = client.initIndex(window.searchConfig.indexName);
+  var resultArea = document.querySelector("#search-result");
+  var searchWrapper = document.querySelector("#search-wrapper");
+  var client = algoliasearch(window.searchConfig.appId, window.searchConfig.apiKey);
+  var index = client.initIndex(window.searchConfig.indexName);
 
-    function filterResults(hits, filterPath) {
-      if (!filterPath || filterPath === '/') return hits;
-      var regex = new RegExp(filterPath);
-      return hits.filter(hit => regex.test(hit.url));
-    }
+  function filterResults(hits, filterPath) {
+    if (!filterPath || filterPath === '/') return hits;
+    var regex = new RegExp(filterPath);
+    return hits.filter(hit => regex.test(hit.url));
+  }
 
-    function displayResults(hits) {
-      var $resultList = $("<ul>").addClass("search-result-list");
-      if (hits.length === 0) {
-        $searchWrapper.addClass('noresult');
-      } else {
-        $searchWrapper.removeClass('noresult');
-        hits.forEach(function(hit) {
-          var contentSnippet = hit._snippetResult.content.value;
-          var title = hit.hierarchy.lvl1 || 'Untitled';
-          var $item = $("<li>").html(`<a href="${hit.url}"><span class='search-result-title'>${title}</span><p class="search-result-content">${contentSnippet}</p></a>`);
-          $resultList.append($item);
-        });
-      }
-      $resultArea.html($resultList);
+  function displayResults(hits) {
+    var resultList = document.createElement("ul");
+    resultList.classList.add("search-result-list");
+    if (hits.length === 0) {
+      searchWrapper.classList.add('noresult');
+    } else {
+      searchWrapper.classList.remove('noresult');
+      hits.forEach(function(hit) {
+        var contentSnippet = hit._snippetResult.content.value;
+        var title = hit.hierarchy.lvl1 || 'Untitled';
+        var item = document.createElement("li");
+        item.innerHTML = `<a href="${hit.url}"><span class='search-result-title'>${title}</span><p class="search-result-content">${contentSnippet}</p></a>`;
+        resultList.appendChild(item);
+      });
     }
+    resultArea.replaceChildren(resultList);
+  }
 
-    $inputArea.on("input", function() {
-      var query = $(this).val().trim();
-      var filterPath = $inputArea.data('filter');
+  inputArea.addEventListener("input", function() {
+    var query = inputArea.value.trim();
+    var filterPath = inputArea.getAttribute('data-filter');
 
-      if (query.length <= 0) {
-        $searchWrapper.attr('searching', 'false');
-        $resultArea.empty();
-        return;
-      }
+    if (query.length <= 0) {
+      searchWrapper.setAttribute('searching', 'false');
+      resultArea.replaceChildren();
+      return;
+    }
 
-      $searchWrapper.attr('searching', 'true');
+    searchWrapper.setAttribute('searching', 'true');
 
-      index.search(query, {
-        hitsPerPage: window.searchConfig.hitsPerPage,
-        attributesToHighlight: ['content'],
-        attributesToSnippet: ['content:30'],
-        highlightPreTag: '<span class="search-keyword">',
-        highlightPostTag: '</span>',
-        restrictSearchableAttributes: ['content']
-      }).then(function(responses) {
-        displayResults(filterResults(responses.hits, filterPath));
-      });
+    index.search(query, {
+      hitsPerPage: window.searchConfig.hitsPerPage,
+      attributesToHighlight: ['content'],
+      attributesToSnippet: ['content:30'],
+      highlightPreTag: '<span class="search-keyword">',
+      highlightPostTag: '</span>',
+      restrictSearchableAttributes: ['content']
+    }).then(function(responses) {
+      displayResults(filterResults(responses.hits, filterPath));
     });
+  });
 
-    $inputArea.on("keydown", function(e) {
-      if (e.which == 13) {
-        e.preventDefault();
-      }
-    });
+  inputArea.addEventListener("keydown", function(e) {
+    if (e.key == 'Enter') {
+      e.preventDefault();
+    }
+  });
 
-    var observer = new MutationObserver(function(mutationsList) {
-      if (mutationsList.length === 1) {
-        if (mutationsList[0].addedNodes.length) {
-          $searchWrapper.removeClass('noresult');
-        } else if (mutationsList[0].removedNodes.length) {
-          $searchWrapper.addClass('noresult');
-        }
+  var observer = new MutationObserver(function(mutationsList) {
+    if (mutationsList.length === 1) {
+      if (mutationsList[0].addedNodes.length) {
+        searchWrapper.classList.remove('noresult');
+      } else if (mutationsList[0].removedNodes.length) {
+        searchWrapper.classList.add('noresult');
       }
-    });
-
-    observer.observe($resultArea[0], { childList: true });
+    }
   });
+
+  observer.observe(resultArea, { childList: true });
 });