hexo-theme-stellar 1.41.0 → 1.42.0

package/source/css/_plugins/lazyload.styl

@@ -10,6 +10,7 @@ img:not([src])
 
 .lazy-box
   position: relative
+  display: block
   overflow: hidden
   line-height: 0
   &.async // 通过 data-service 异步创建的懒加载元素，没办法知道宽高

package/source/js/color.js

@@ -0,0 +1,325 @@
+// 文字自适应颜色通用能力（挂载 window.stellar.color）
+// 由 layout/_plugins/adaptive-text.ejs 按需懒加载；也可供其他组件直接调用。
+// 样式1（contrast）：背景深色 → 白色文字，背景浅色 → 深色文字。
+// 样式2（theme）：以背景图平均色为基色，背景偏暗 → lighten 到高亮度，
+//                背景偏亮 → darken 到低亮度（保留色相与饱和度）。
+(function () {
+  'use strict';
+
+  var color = {};
+
+  // 颜色字符串 → {r,g,b,a}（a 为 0~1 透明度，默认 1）；
+  // 支持 #rgb/#rrggbb/#rrggbbaa、rgb()/rgba()、hsl()/hsla()（逗号与空格/斜杠语法）。
+  // 解析失败返回 null。
+  color.parse = function (input) {
+    if (input == null) {
+      return null;
+    }
+    var str = String(input).trim();
+    var a = 1;
+    if (str.charAt(0) === '#') {
+      var hex = str.slice(1);
+      if (hex.length === 3 || hex.length === 4) {
+        hex = hex.split('').map(function (c) {
+          return c + c;
+        }).join('');
+      }
+      if (hex.length === 6 || hex.length === 8) {
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        if (hex.length === 8) {
+          a = parseInt(hex.slice(6, 8), 16) / 255;
+        }
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+          return { r: r, g: g, b: b, a: a };
+        }
+      }
+      return null;
+    }
+    var m = str.match(/rgba?\(\s*([\d.]+)\s*[,\s]\s*([\d.]+)\s*[,\s]\s*([\d.]+)(?:\s*[,\s/]\s*([\d.]+%?))?\s*\)/i);
+    if (m) {
+      var r2 = Number(m[1]);
+      var g2 = Number(m[2]);
+      var b2 = Number(m[3]);
+      if (!isNaN(r2) && !isNaN(g2) && !isNaN(b2)) {
+        if (m[4] != null) {
+          a = m[4].charAt(m[4].length - 1) === '%' ? Number(m[4].slice(0, -1)) / 100 : Number(m[4]);
+        }
+        return { r: r2, g: g2, b: b2, a: a };
+      }
+    }
+    var hm = str.match(/hsla?\(\s*([\d.]+)(?:deg)?\s*[,\s]\s*([\d.]+%?)\s*[,\s]\s*([\d.]+%?)(?:\s*[,\s/]\s*([\d.]+%?))?\s*\)/i);
+    if (hm) {
+      var hue = Number(hm[1]);
+      var sat = hm[2].charAt(hm[2].length - 1) === '%' ? Number(hm[2].slice(0, -1)) / 100 : Number(hm[2]);
+      var lig = hm[3].charAt(hm[3].length - 1) === '%' ? Number(hm[3].slice(0, -1)) / 100 : Number(hm[3]);
+      if (!isNaN(hue) && !isNaN(sat) && !isNaN(lig)) {
+        if (hm[4] != null) {
+          a = hm[4].charAt(hm[4].length - 1) === '%' ? Number(hm[4].slice(0, -1)) / 100 : Number(hm[4]);
+        }
+        var h = ((hue % 360) + 360) % 360 / 360;
+        var rgb = hslToRgb(h, Math.max(0, Math.min(1, sat)), Math.max(0, Math.min(1, lig)));
+        return { r: rgb.r, g: rgb.g, b: rgb.b, a: a };
+      }
+    }
+    return null;
+  };
+
+  // WCAG 相对亮度（0~1）
+  color.luminance = function (rgb) {
+    if (rgb == null) {
+      return null;
+    }
+    var linearize = function (v) {
+      v = v / 255;
+      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * linearize(rgb.r) + 0.7152 * linearize(rgb.g) + 0.0722 * linearize(rgb.b);
+  };
+
+  // 亮度是否偏暗，threshold 默认 0.5
+  color.isDark = function (rgb, threshold) {
+    var lum = color.luminance(rgb);
+    if (lum == null) {
+      return false;
+    }
+    return lum < (threshold == null ? 0.5 : threshold);
+  };
+
+  function rgbToHsl(rgb) {
+    var r = rgb.r / 255;
+    var g = rgb.g / 255;
+    var b = rgb.b / 255;
+    var max = Math.max(r, g, b);
+    var min = Math.min(r, g, b);
+    var h = 0;
+    var s = 0;
+    var l = (max + min) / 2;
+    if (max !== min) {
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        default:
+          h = (r - g) / d + 4;
+      }
+      h /= 6;
+    }
+    return { h: h, s: s, l: l };
+  }
+
+  function hslToRgb(h, s, l) {
+    if (s === 0) {
+      var gray = Math.round(l * 255);
+      return { r: gray, g: gray, b: gray };
+    }
+    var hue2rgb = function (p, q, t) {
+      if (t < 0) {
+        t += 1;
+      }
+      if (t > 1) {
+        t -= 1;
+      }
+      if (t < 1 / 6) {
+        return p + (q - p) * 6 * t;
+      }
+      if (t < 1 / 2) {
+        return q;
+      }
+      if (t < 2 / 3) {
+        return p + (q - p) * (2 / 3 - t) * 6;
+      }
+      return p;
+    };
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    return {
+      r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+      g: Math.round(hue2rgb(p, q, h) * 255),
+      b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255)
+    };
+  }
+
+  function rgbString(rgb) {
+    return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+  }
+
+  // 设定 HSL 明度目标（0~1），保留色相与饱和度
+  color.withLightness = function (rgb, lightness) {
+    if (rgb == null) {
+      return null;
+    }
+    var hsl = rgbToHsl(rgb);
+    var target = Math.max(0, Math.min(1, lightness));
+    return rgbString(hslToRgb(hsl.h, hsl.s, target));
+  };
+
+  // 浅色化：把明度调整到 lightness（默认 0.85）
+  color.lighten = function (rgb, lightness) {
+    return color.withLightness(rgb, lightness == null ? 0.85 : lightness);
+  };
+
+  // 深色化：把明度调整到 lightness（默认 0.3）
+  color.darken = function (rgb, lightness) {
+    return color.withLightness(rgb, lightness == null ? 0.3 : lightness);
+  };
+
+  // 主题色饱和度增强：平均色被大面积中性色盖过时饱和度极低（色相仍有效），
+  // 把低饱和度抬升到最低可见值（保留色相），让主题文字带出图片的主色倾向；
+  // 完全中性（无可靠色相）与已足够饱和的颜色不做处理。
+  color.enhanceSaturation = function (rgb, options) {
+    if (rgb == null) {
+      return null;
+    }
+    var opts = options || {};
+    var minS = opts.minSaturation == null ? 0.3 : opts.minSaturation;
+    var boostBelow = opts.boostBelow == null ? 0.2 : opts.boostBelow;
+    var epsilon = opts.neutralEpsilon == null ? 0.02 : opts.neutralEpsilon;
+    var hsl = rgbToHsl(rgb);
+    if (hsl.s >= boostBelow || hsl.s < epsilon) {
+      return { r: rgb.r, g: rgb.g, b: rgb.b, a: rgb.a == null ? 1 : rgb.a };
+    }
+    var out = hslToRgb(hsl.h, Math.max(hsl.s, minS), hsl.l);
+    return { r: out.r, g: out.g, b: out.b, a: rgb.a == null ? 1 : rgb.a };
+  };
+
+  // 自适应文字颜色
+  // bg：{r,g,b} 或颜色字符串
+  // options：
+  //   style           'theme'（默认）/ 'contrast'
+  //   threshold       明暗判定阈值，默认按 effectiveThreshold（彩色背景 0.65 / 中性背景 0.6，
+  //                   偏向采纳浅色文字，避免中灰背景频繁翻转）
+  //   lightColor      样式1 深色背景时的文字色，默认 #ffffff
+  //   darkColor       样式1 浅色背景时的文字色，默认 #111111
+  //   lightLightness  样式2 深色背景时的目标明度，默认 0.85
+  //   darkLightness   样式2 浅色背景时的目标明度，默认 0.3
+  //   saturationScale 样式2 饱和度缩放（0~1，默认 1）：调小更接近黑白，仅保留一点主色倾向
+  color.adaptiveTextColor = function (bg, options) {
+    var opts = options || {};
+    var rgb = (bg != null && typeof bg === 'object') ? bg : color.parse(bg);
+    if (rgb == null) {
+      return null;
+    }
+    var style = opts.style || 'theme';
+    var threshold = opts.threshold == null ? color.effectiveThreshold(rgb) : opts.threshold;
+    var dark = color.isDark(rgb, threshold);
+    if (style === 'contrast') {
+      return dark ? (opts.lightColor || '#ffffff') : (opts.darkColor || '#111111');
+    }
+    var base = color.enhanceSaturation(rgb);
+    var hsl = rgbToHsl(base);
+    if (opts.saturationScale != null) {
+      hsl.s = hsl.s * Math.max(0, Math.min(1, opts.saturationScale));
+    }
+    var target = dark
+      ? (opts.lightLightness == null ? 0.85 : opts.lightLightness)
+      : (opts.darkLightness == null ? 0.3 : opts.darkLightness);
+    return rgbString(hslToRgb(hsl.h, hsl.s, target));
+  };
+
+  // 有效明暗阈值：彩色背景（饱和度 > 0.2）更偏向浅色文字，阈值上浮 0.05；
+  // 中性灰背景保持基础阈值，避免浅灰图配浅字。
+  color.effectiveThreshold = function (rgb, base) {
+    var threshold = base == null ? 0.6 : base;
+    var hsl = rgbToHsl(rgb);
+    return hsl.s > 0.2 ? threshold + 0.05 : threshold;
+  };
+
+  // 按平均透明度向背景色混合：透明像素不再把平均色拉向黑色，
+  // 而是按实际渲染背景合成（options.background 为 {r,g,b} 或颜色字符串）。
+  // 不传背景或完全不透明时返回原 RGB。
+  color.blendToBackground = function (rgb, background) {
+    if (rgb == null) {
+      return null;
+    }
+    var alpha = rgb.a == null ? 255 : rgb.a;
+    if (!background || alpha >= 255) {
+      return { r: rgb.r, g: rgb.g, b: rgb.b };
+    }
+    var bgRgb = (background != null && typeof background === 'object') ? background : color.parse(background);
+    if (bgRgb == null) {
+      return { r: rgb.r, g: rgb.g, b: rgb.b };
+    }
+    var k = alpha / 255;
+    var inv = 1 - k;
+    return {
+      r: Math.round(rgb.r * k + bgRgb.r * inv),
+      g: Math.round(rgb.g * k + bgRgb.g * inv),
+      b: Math.round(rgb.b * k + bgRgb.b * inv)
+    };
+  };
+
+  // 背景图平均色：等比缩至最长边 ≤ size（默认 64px）后 canvas 取 RGB 均值与平均透明度。
+  // 按 URL 缓存原始均值（含透明度）；CORS、解码失败等异常返回 null（由调用方回退 CSS 默认色）。
+  var averageCache = {};
+
+  color.getAverageColor = function (src, options) {
+    var opts = options || {};
+    var size = opts.size || 64;
+    if (averageCache[src]) {
+      return averageCache[src].then(function (raw) {
+        return color.blendToBackground(raw, opts.background);
+      });
+    }
+    var promise = new Promise(function (resolve) {
+      var img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = function () {
+        try {
+          var w = img.naturalWidth || img.width;
+          var h = img.naturalHeight || img.height;
+          if (!w || !h) {
+            resolve(null);
+            return;
+          }
+          var scale = Math.min(1, size / Math.max(w, h));
+          var cw = Math.max(1, Math.round(w * scale));
+          var ch = Math.max(1, Math.round(h * scale));
+          var canvas = document.createElement('canvas');
+          canvas.width = cw;
+          canvas.height = ch;
+          var ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0, cw, ch);
+          var data = ctx.getImageData(0, 0, cw, ch).data;
+          var total = cw * ch;
+          var r = 0;
+          var g = 0;
+          var b = 0;
+          var a = 0;
+          for (var i = 0; i < data.length; i += 4) {
+            r += data[i];
+            g += data[i + 1];
+            b += data[i + 2];
+            a += data[i + 3];
+          }
+          resolve({
+            r: Math.round(r / total),
+            g: Math.round(g / total),
+            b: Math.round(b / total),
+            a: Math.round(a / total)
+          });
+        } catch (e) {
+          resolve(null);
+        }
+      };
+      img.onerror = function () {
+        resolve(null);
+      };
+      img.src = src;
+    });
+    averageCache[src] = promise;
+    return promise.then(function (raw) {
+      return color.blendToBackground(raw, opts.background);
+    });
+  };
+
+  var root = typeof window !== 'undefined' ? window : {};
+  root.stellar = root.stellar || {};
+  root.stellar.color = color;
+})();

package/source/js/main.js

@@ -353,7 +353,7 @@ const init = {
           window.history.pushState(null, "", href);
         }
       }
-      sidebar.dismiss();
+      window.sidebar.dismiss();
     });
   },
   wikiStart: () => {
@@ -451,7 +451,7 @@ const init = {
         if (bar == null) {
           return;
         }
-        // getComputedStyle().top 自动兼容桌面 var(--gap-margin) 与移动端 8pt
+        // getComputedStyle().top 自动兼容桌面 var(--gap-page) 与移动端 8pt
         const stickyTop = parseFloat(getComputedStyle(navbar).top) || 16;
         states.push({
           navbar: navbar,

package/source/js/plugins/adaptive-text.js

@@ -0,0 +1,146 @@
+// 文字自适应颜色 DOM 插件
+// 扫描 [data-text-adaptive] 元素，解析背景来源（--cover-url → --bg-url →
+// background-image → background-color），调用 stellar.color 计算文字颜色，
+// 写入内联 --text-banner 与 --text-banner-theme。
+// 属性值：
+//   theme（默认）  背景图平均色 lighten/darken（两种变量同色）
+//   contrast       黑白对比（两种变量同色）
+//   split          大字（标题/headline）用 contrast，小字（caption/subtitle/面包屑等）用 theme
+// 用户显式覆盖优先：元素已有内联 --text-banner 或内联 color 时跳过。
+// 由 layout/_plugins/adaptive-text.ejs 在页面存在目标元素时懒加载。
+
+function parseCssUrl(value) {
+  if (!value) {
+    return null;
+  }
+  var m = String(value).trim().match(/url\((['"]?)(.*?)\1\)/i);
+  return m ? m[2] : null;
+}
+
+function resolveBackground(el) {
+  var style = window.getComputedStyle(el);
+  var cover = parseCssUrl(style.getPropertyValue('--cover-url'));
+  if (cover) {
+    return { type: 'image', url: cover };
+  }
+  var pinCover = parseCssUrl(style.getPropertyValue('--pin-cover-url'));
+  if (pinCover) {
+    return { type: 'image', url: pinCover };
+  }
+  var bg = parseCssUrl(style.getPropertyValue('--bg-url'));
+  if (bg) {
+    return { type: 'image', url: bg };
+  }
+  var bgImage = style.backgroundImage;
+  if (bgImage && bgImage !== 'none') {
+    var url = parseCssUrl(bgImage);
+    if (url && url !== 'none') {
+      return { type: 'image', url: url };
+    }
+  }
+  var bgColor = style.backgroundColor;
+  if (bgColor && bgColor !== 'transparent' && !/rgba\(0,\s*0,\s*0,\s*0\)/.test(bgColor)) {
+    var rgb = stellar.color.parse(bgColor);
+    if (rgb) {
+      return { type: 'color', rgb: rgb };
+    }
+  }
+  return null;
+}
+
+// 解析图片背后的实际背景色（用于透明图的平均色合成）：
+// 从元素自身沿祖先向上找第一个不透明 background-color（半透明视为继续向上），
+// 最终兜底到 body 的 var(--background)，仍无则白色。
+function resolveBackdrop(el) {
+  var node = el;
+  while (node && node.nodeType === 1) {
+    var rgb = stellar.color.parse(window.getComputedStyle(node).backgroundColor);
+    if (rgb && rgb.a >= 1) {
+      return { r: rgb.r, g: rgb.g, b: rgb.b };
+    }
+    node = node.parentElement;
+  }
+  return { r: 255, g: 255, b: 255 };
+}
+
+// 单样式模式：--text-banner 与 --text-banner-theme 取同一颜色，保持容器内文字一致
+function setTextColor(el, styleName, rgb) {
+  var result = stellar.color.adaptiveTextColor(rgb, { style: styleName });
+  if (result) {
+    el.style.setProperty('--text-banner', result);
+    el.style.setProperty('--text-banner-theme', result);
+  }
+}
+
+// split 模式：大字用低饱和 theme（接近黑白，保留一点主色倾向），小字用完整 theme
+function setSplitTextColors(el, rgb) {
+  // 大字更接近黑白：只保留 5% 饱和度（值越大越接近完整主题色，越小越接近黑白，0 为纯灰）
+  var large = stellar.color.adaptiveTextColor(rgb, { style: 'theme', saturationScale: 0.05 });
+  var theme = stellar.color.adaptiveTextColor(rgb, { style: 'theme' });
+  if (large) {
+    el.style.setProperty('--text-banner', large);
+  }
+  if (theme) {
+    el.style.setProperty('--text-banner-theme', theme);
+  }
+}
+
+function applyToElement(el) {
+  // 用户显式覆盖优先：首次处理时元素已有内联 --text-banner 或内联 color 则跳过
+  // （插件自身写入的变量不视为用户覆盖，主题切换重算时需重新应用）
+  var isFirst = !appliedElements.has(el);
+  if (isFirst && (el.style.getPropertyValue('--text-banner') || el.style.color)) {
+    return;
+  }
+  var bg = resolveBackground(el);
+  if (!bg) {
+    return;
+  }
+  var styleName = el.getAttribute('data-text-adaptive') || 'theme';
+  var apply = function (rgb) {
+    if (styleName === 'split') {
+      setSplitTextColors(el, rgb);
+    } else {
+      setTextColor(el, styleName, rgb);
+    }
+    appliedElements.add(el);
+  };
+  if (bg.type === 'color') {
+    apply(bg.rgb);
+  } else {
+    var backdrop = resolveBackdrop(el);
+    stellar.color.getAverageColor(bg.url, { background: backdrop }).then(function (rgb) {
+      if (rgb) {
+        apply(rgb);
+      }
+    });
+  }
+}
+
+var adaptiveTextElements = [];
+var appliedElements = new WeakSet();
+
+function applyAdaptiveText(elements) {
+  if (!window.stellar || !window.stellar.color || !elements || elements.length === 0) {
+    return;
+  }
+  adaptiveTextElements = Array.prototype.slice.call(elements);
+  for (var i = 0; i < elements.length; i++) {
+    applyToElement(elements[i]);
+  }
+}
+
+// 主题明暗切换时重算：透明背景图的合成背景随 data-theme 变化，颜色需重新计算
+if (window.MutationObserver && document.documentElement) {
+  new MutationObserver(function () {
+    applyAdaptiveText(adaptiveTextElements);
+    if (typeof window.refreshPinNavColor === 'function') {
+      window.refreshPinNavColor();
+    }
+  }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+}
+
+// 供轮播箭头等场景复用：解析元素背后实际渲染背景色
+window.resolveAdaptiveBackdrop = resolveBackdrop;
+
+window.applyAdaptiveText = applyAdaptiveText;

package/source/js/services/friends_and_posts.js

@@ -29,7 +29,7 @@
           }
           cell += `</div>`;
           cell += `</div>`;
-          cell += `<div class="previews">`;
+          cell += `<div class="post-panel">`;
           if (item.description) {
             cell += `<div class="desc">${item.description || item.issue_number || ''}</div>`;
           } else {

package/source/js/services/timeline.js

@@ -88,7 +88,7 @@
             }
             if (item.comments != null) {
               cell += '<a class="item comments last" href="' + item.html_url + '#issuecomment-new" target="_blank" rel="external nofollow noopener noreferrer">';
-              cell += '<span>' + ctx.icons['weibo:comment'] + ' ' + (item.comments || 0) + '</span>';
+              cell += '<span>' + ctx.icons['default:tocomment'] + ' ' + (item.comments || 0) + '</span>';
               cell += '</a>';
             }
             

package/source/js/services/weibo.js

@@ -40,7 +40,7 @@
           cell += '</a>';
           cell += '</div>';
           cell += '<a class="item comments last" href="' + item.url + '#issuecomment-new" target="_blank" rel="external nofollow noopener noreferrer">';
-          cell += '<span>' + ctx.icons['weibo:comment'] + ' '
+          cell += '<span>' + ctx.icons['default:tocomment'] + ' '
           + (item.comments_count || 0) + '</span>';
           cell += '</a>';
           cell += '<div class="item reaction attitudes">';

package/source/js/services.js

@@ -176,4 +176,4 @@ const initServices = () => {
   };
 };
 
-utils.initPlugin(initServices, 'services');
+stellar.initPlugin(initServices, 'services');

package/source/js/utils.js

@@ -1,4 +1,8 @@
-  
+(function () {
+  // 防重复执行：utils.js 可能被重复加载，二次执行直接跳过，避免重复声明报错。
+  if (window.__stellarUtilsLoaded) return;
+  window.__stellarUtilsLoaded = true;
+
   function RunItem() {
     this.list = []; // 存放回调函数
     this.start = () => {
@@ -726,3 +730,12 @@
   utils.dark = Object.assign(utils.dark, {
     push: utils.dark.method.toggle.push,
   });
+
+  // 暴露到 window：页尾插件片段经裸标识符 utils 即可使用
+  window.utils = utils;
+
+  // 补跑解析期注册的插件队列
+  if (window.stellar && typeof window.stellar._flushPlugins === 'function') {
+    window.stellar._flushPlugins();
+  }
+})();

package/layout/_partial/cover/post_cover.ejs

@@ -1,37 +0,0 @@
-<%
-function div() {
-  var el = '';
-  if ((page.banner == undefined || page.banner == false) && !theme.article.auto_banner) {
-    return el;
-  }
-  var url;
-  if (page.banner != undefined) {
-    if (page.banner.includes('/')) {
-      url = page.banner;
-    } else {
-      url = 'https://source.unsplash.com/2000x400/?' + page.banner;
-    }
-  } else {
-    // 自动以 tags 作为关键词搜索封面
-    if (page.tags) {
-      var params = '';
-      page.tags.reverse().forEach((tag, i) => {
-        if (i > 0) {
-          params += ',';
-        }
-        params += tag.name;
-      });
-      url = 'https://source.unsplash.com/2000x400/?' + params;
-    } else {
-      url = 'https://source.unsplash.com/random/2000x400';
-    }
-  }
-  el += '<div class="l_cover post' + scrollreveal(' ') + '">';
-  el += '<div class="cover">';
-  el += '<div class="lazy img bg" data-bg="' + escape_html(url) + '"></div>';
-  el += '</div>';
-  el += '</div>';
-  return el;
-}
-%>
-<%- div() %>