hexo-theme-stellar 1.41.0 → 1.42.1

package/scripts/filters/lib/img_lazyload.js

@@ -1,56 +1,200 @@
 /**
- * img_lazyload.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * img_lazyload.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
  *
+ * 懒加载强制开启：不再读取 enable 配置，no-lazy 是唯一例外。
+ * v2：改为属性感知的 <img> 标签解析，仅在标签自身范围内读取 src，
+ * 并跳过 <script>/<style>/<!-- --> 区域，避免与「去属性引号」的 HTML
+ * 压缩器（如 hexo-minify removeAttributeQuotes）组合时正则跨标签越界，
+ * 误改写页内内联脚本中的 `s.src = "..."`。
  */
 
-'use strict';
+"use strict";
 
-// 懒加载强制开启：不再读取 enable 配置，no-lazy 是唯一例外
-function lazyProcess(htmlContent) {
-  // 短路：无 <img 的页面（如 404）无需正则扫描
-  if (typeof htmlContent !== 'string' || !/<img/i.test(htmlContent)) {
-    return htmlContent;
+// 1×1 透明 PNG：懒加载占位图
+const LOADING_IMG =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=";
+
+// 解析 <img ...> 标签内部属性，返回 [{name, value, raw, start, end}]
+function parseAttrs(inner) {
+  const attrs = [];
+  const re = /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let m;
+  while ((m = re.exec(inner)) !== null) {
+    attrs.push({
+      name: m[1].toLowerCase(),
+      value: m[2] !== undefined ? m[2] : m[3] !== undefined ? m[3] : m[4] !== undefined ? m[4] : null,
+      raw: m[0],
+      start: m.index,
+      end: m.index + m[0].length,
+    });
+  }
+  return attrs;
+}
+
+// 处理单个 <img> 标签：加 lazy 类并替换 src 为占位图 + data-src
+function processImgTag(imgTag) {
+  // 快速跳过：整标签已含懒加载标记 / 原生 srcset / no-lazy（兼容压缩前后写法）
+  if (/data-src/gi.test(imgTag)) {
+    return imgTag;
+  }
+  if (/srcset=/gi.test(imgTag)) {
+    return imgTag;
+  }
+  if (/\bno-lazy\b/gi.test(imgTag)) {
+    return imgTag;
+  }
+
+  const selfClosing = /\/>$/.test(imgTag);
+  const inner = imgTag.slice(4, selfClosing ? imgTag.length - 2 : imgTag.length - 1);
+  const attrs = parseAttrs(inner);
+  const src = attrs.find((a) => a.name === "src");
+  // 无 src / 空 src / 已是占位图（data:image）时不处理
+  if (!src || src.value == null || src.value === "" || /^data:image/i.test(src.value)) {
+    return imgTag;
   }
-  return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, function(imgTag, src_before, src_value, src_after) {
-    // 已由 tag 插件输出懒加载标记（data-src / data-srcset）的图片不重复处理
-    if (/data-src/gi.test(imgTag)) {
-      return imgTag;
+
+  const classAttr = attrs.find((a) => a.name === "class");
+  const oldClass = classAttr && classAttr.value != null ? classAttr.value : "";
+  const newClass = (oldClass ? oldClass + " " : "") + "lazy";
+
+  let out = "<img";
+  if (!classAttr) {
+    out += ' class="' + newClass + '"';
+  }
+  let pos = 0;
+  for (const a of attrs) {
+    out += inner.slice(pos, a.start);
+    if (a.name === "src") {
+      out += 'src="' + LOADING_IMG + '" data-src="' + src.value + '"';
+    } else if (a.name === "class") {
+      out += 'class="' + newClass + '"';
+    } else {
+      out += a.raw;
     }
-    // 使用 srcset 的图片交给浏览器原生处理，避免占位图与 srcset 冲突
-    if (/srcset=/gi.test(imgTag)) {
-      return imgTag;
+    pos = a.end;
+  }
+  out += inner.slice(pos);
+  out += selfClosing ? "/>" : ">";
+  return out;
+}
+
+// 查找标签结束位置（尊重属性值内的引号，避免把 > 截断进属性值）
+function findTagEnd(html, start) {
+  let j = start;
+  let quote = null;
+  while (j < html.length) {
+    const ch = html[j];
+    if (quote) {
+      if (ch === quote) {
+        quote = null;
+      }
+    } else if (ch === '"' || ch === "'") {
+      quote = ch;
+    } else if (ch === ">") {
+      return j;
     }
-    if (/src="data:image(.*?)/gi.test(imgTag)) {
-      return imgTag;
+    j++;
+  }
+  return -1;
+}
+
+function isTagBoundary(html, pos) {
+  if (pos >= html.length) {
+    return true;
+  }
+  const ch = html[pos];
+  return ch === " " || ch === "\t" || ch === "\n" || ch === "\r" || ch === ">" || ch === "/";
+}
+
+// 全页扫描：只在真实 <img> 标签上做懒加载，跳过脚本/样式/注释内容
+function processHtml(html) {
+  const parts = [];
+  let i = 0;
+  const n = html.length;
+  const lower = html.toLowerCase();
+  while (i < n) {
+    const ch = html[i];
+    if (ch !== "<") {
+      parts.push(ch);
+      i++;
+      continue;
     }
-    // no-lazy 兼容 `no-lazy` / `no-lazy=""` 两种写法
-    if (/\bno-lazy\b/gi.test(imgTag)) {
-      return imgTag;
+    // HTML 注释
+    if (html.startsWith("<!--", i)) {
+      const end = html.indexOf("-->", i);
+      if (end === -1) {
+        break;
+      }
+      parts.push(html.slice(i, end + 3));
+      i = end + 3;
+      continue;
     }
-    var newImgTag = imgTag;
-    if (newImgTag.includes(' class="') == false) {
-      newImgTag = newImgTag.slice(0,4) + ' class=""' + newImgTag.slice(4);
+    // <script>…</script>：整段跳过，避免误处理模板字符串/字符串里的 <img
+    if (lower.startsWith("<script", i) && isTagBoundary(html, i + 7)) {
+      const end = findTagEnd(html, i);
+      if (end === -1) {
+        break;
+      }
+      parts.push(html.slice(i, end + 1));
+      i = end + 1;
+      const close = lower.indexOf("</script", i);
+      if (close === -1) {
+        break;
+      }
+      const closeEnd = html.indexOf(">", close);
+      if (closeEnd === -1) {
+        break;
+      }
+      parts.push(html.slice(i, closeEnd + 1));
+      i = closeEnd + 1;
+      continue;
     }
-    // class 中增加 lazy
-    newImgTag = newImgTag.replace(/(.*?) class="(.*?)" (.*?)>/gi, function(ori, before, value, after){
-      var newClass = value;
-      if (newClass.length > 0) {
-        newClass += ' ';
-      }
-      newClass += 'lazy';
-      if (value) {
-        return ori.replace('class="' + value, 'class="' + newClass);
-      } else {
-        return ori.replace('class="', 'class="' + newClass);
+    // <style>…</style>：整段跳过
+    if (lower.startsWith("<style", i) && isTagBoundary(html, i + 6)) {
+      const end = findTagEnd(html, i);
+      if (end === -1) {
+        break;
       }
-    });
-    // 加载图
-    const loadingImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=';
-    newImgTag = newImgTag.replace(src_value, loadingImg + '" data-src="' + src_value);
-    return newImgTag;
-  });
+      parts.push(html.slice(i, end + 1));
+      i = end + 1;
+      const close = lower.indexOf("</style", i);
+      if (close === -1) {
+        break;
+      }
+      const closeEnd = html.indexOf(">", close);
+      if (closeEnd === -1) {
+        break;
+      }
+      parts.push(html.slice(i, closeEnd + 1));
+      i = closeEnd + 1;
+      continue;
+    }
+    // <img …>
+    if (lower.startsWith("<img", i) && isTagBoundary(html, i + 4)) {
+      const end = findTagEnd(html, i);
+      if (end === -1) {
+        break;
+      }
+      parts.push(processImgTag(html.slice(i, end + 1)));
+      i = end + 1;
+      continue;
+    }
+    parts.push(ch);
+    i++;
+  }
+  return parts.join("");
+}
+
+function lazyProcess(htmlContent) {
+  // 短路：无 <img 的页面（如 404）无需扫描
+  if (typeof htmlContent !== "string" || !/<img/i.test(htmlContent)) {
+    return htmlContent;
+  }
+  return processHtml(htmlContent);
 }
 
-module.exports.processSite = function(htmlContent) {
+module.exports.processSite = function (htmlContent) {
   return lazyProcess.call(this, htmlContent);
 };
+
+module.exports.lazyProcess = lazyProcess;

package/scripts/generators/stellar-icons.js

@@ -5,7 +5,7 @@
 // 与 layout/_partial/scripts/defines.ejs 中旧的白名单保持一致（客户端通过 ctx.icons 读取）。
 hexo.extend.generator.register('stellar_icons', function () {
   const icons = (this.theme.config && this.theme.config.icons) || {};
-  const keys = ['weibo:comment', 'default:loading-spinner', 'default:warning', 'weibo:repeat', 'weibo:like'];
+  const keys = ['default:tocomment', 'default:loading-spinner', 'default:warning', 'weibo:repeat', 'weibo:like'];
   const out = {};
   // 去除 SVG 注释（避免 <!-- / </script> 解析风险），再转义 <
   for (const k of keys) {

package/scripts/helpers/subtitle.js

@@ -0,0 +1,8 @@
+/* global hexo */
+'use strict';
+
+const { subtitle } = require('../lib/subtitle');
+
+hexo.extend.helper.register('subtitle', function(post) {
+  return subtitle(post);
+});

package/scripts/lib/subtitle.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const { stripHTML } = require('hexo-util');
+
+// 文章一行小字取值（hero 卡片与置顶轮播共用，未来可复用于其它场景）：
+// subtitle > description > excerpt/content 前 length 字（去 HTML、压缩空白、截断；省略号由 CSS 单行处理），空则返回空串。
+function subtitle(post, length = 50) {
+  if (post == null) {
+    return '';
+  }
+  if (post.subtitle != null && String(post.subtitle).length > 0) {
+    return post.subtitle;
+  }
+  if (post.description != null && String(post.description).length > 0) {
+    return post.description;
+  }
+  const text = stripHTML(post.excerpt || post.content || '').replace(/\s+/g, ' ').trim();
+  if (text.length === 0) {
+    return '';
+  }
+  return text.length > length ? text.slice(0, length) : text;
+}
+
+module.exports = { subtitle };

package/scripts/tags/lib/banner.js

@@ -11,12 +11,13 @@
 
 module.exports = ctx => function(args, content) {
   args = ctx.args.map(args, ['bg', 'avatar', 'link'], ['title', 'subtitle'])
+  var bg = args.bg ? args.bg : ctx.theme.config.default.banner
   var el = ''
-  el += `<div class="tag-plugin banner">`
+  el += `<div class="tag-plugin banner" style="--bg-url:url('${bg.replace(/'/g, '%27')}')">`
   // bg
-  el += `<img class="lazy bg" data-src="${args.bg ? args.bg : ctx.theme.config.default.banner}">`
+  el += `<img class="lazy bg" data-src="${bg}">`
   // content
-  el += `<div class="content">`
+  el += `<div class="content" data-text-adaptive="split">`
   // content.top
   el += `<div class="top">`
   // content.top.back

package/source/css/_common/cover-overlay.styl

@@ -0,0 +1,111 @@
+// 背景图覆盖层通用能力：同图渐变模糊层 + 黑色渐变蒙版 + hover 变暗
+// $url-var: 背景图 CSS 变量（--cover-url / --pin-cover-url / --bg-url），模糊层取同图背景
+// $sides: top | bottom | both —— 文字所在边缘；both 依赖宿主内的 .banner-mask-top/bottom 蒙版元素
+// $layer: 覆盖层宿主选择器（相对当前元素），缺省为当前元素自身；图片等 hover 目标由调用方按 DOM 自行接入
+cover-overlay($url-var, $sides = bottom, $layer = null)
+  $host = $layer ? $layer : '&'
+  // 统一默认观感变量（与文章列表 hero 封面一致）
+  --img-br: 100%
+  --img-sat: 100%
+  --blur-px: 1em
+  --blur-height: 128px
+  --blur-sat: 120%
+  --cover-zoom: 1.05
+  // hover 整体变暗：亮度 75%、饱和度 120%，模糊层饱和度提升至 200%
+  &:hover
+    --img-br: 75%
+    --img-sat: 120%
+    --blur-sat: 200%
+  if $sides == both
+    // 双侧：:before 顶部模糊层 + :after 底部模糊层，黑色蒙版由 .banner-mask-top/bottom 承担
+    {$host}:before, {$host}:after
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      z-index: 0
+      background-image: $url-var
+      background-size: cover
+      background-position: center
+      filter: brightness(var(--img-br)) saturate(var(--img-sat)) blur(var(--blur-px)) saturate(var(--blur-sat))
+      // 常驻恒等 transform：hover 放大时 Safari 正确应用父级圆角裁剪（同 list.styl 注释）
+      transform: translateZ(0)
+      pointer-events: none
+      transition: all .2s ease-out, transform .5s ease-out
+      -moz-transition: all .2s ease-out, transform .5s ease-out
+      -webkit-transition: all .2s ease-out, transform .5s ease-out
+      -o-transition: all .2s ease-out, transform .5s ease-out
+    {$host}:before
+      mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+    {$host}:after
+      mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+      -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+    if $layer
+      &:hover
+        {$host}:before, {$host}:after
+          transform: translateZ(0) scale(var(--cover-zoom))
+    else
+      {$host}:hover:before, {$host}:hover:after
+        transform: translateZ(0) scale(var(--cover-zoom))
+    // 黑色渐变蒙版：文字所在边缘不透明度约 0.25，垂直中线为 0
+    {$host} .banner-mask
+      position: absolute
+      inset: 0
+      z-index: 1
+      pointer-events: none
+      &.banner-mask-top
+        background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0) 50%)
+      &.banner-mask-bottom
+        background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.25))
+  else
+    // 单侧：:before 同图模糊层 + :after 黑色渐变蒙版
+    {$host}:before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      z-index: 1
+      background-image: $url-var
+      background-size: cover
+      background-position: center
+      filter: brightness(var(--img-br)) saturate(var(--img-sat)) blur(var(--blur-px)) saturate(var(--blur-sat))
+      // 常驻恒等 transform：hover 放大时 Safari 正确应用父级圆角裁剪（同 list.styl 注释）
+      transform: translateZ(0)
+      pointer-events: none
+      transition: all .2s ease-out, transform .5s ease-out
+      -moz-transition: all .2s ease-out, transform .5s ease-out
+      -webkit-transition: all .2s ease-out, transform .5s ease-out
+      -o-transition: all .2s ease-out, transform .5s ease-out
+    if $sides == top
+      {$host}:before
+        mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+        -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top, var(--blur-height)) * 0.5), transparent var(--blur-height-top, var(--blur-height)))
+    else
+      {$host}:before
+        mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+        -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom, var(--blur-height)) * 0.5), transparent var(--blur-height-bottom, var(--blur-height)))
+    if $layer
+      &:hover
+        {$host}:before
+          transform: translateZ(0) scale(var(--cover-zoom))
+    else
+      {$host}:hover:before
+        transform: translateZ(0) scale(var(--cover-zoom))
+    {$host}:after
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      z-index: 1
+      pointer-events: none
+      if $sides == top
+        background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0) 50%)
+      else
+        background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.25))

package/source/css/_common/title.styl

@@ -15,6 +15,23 @@ h5
 h6
   font-size: 'calc(%s + 0px)' % var(--fsp)
 
+// story 文章段落标题（h2）：居中 + 两侧 accent 斜杠装饰
+// 专栏列表页专栏标题（.topic-title）与 story 文章 h2 共用
+story-title()
+  color: var(--text)
+  line-height: 1.2
+  text-align: center
+  &:before,&:after
+    content: ''
+    display: inline-block
+    width: 12px
+    height: 1.2em
+    background: $c-accent
+    transform: skewX(-20deg)
+    margin: 0 0.5em
+    vertical-align: top
+    position: relative
+
 // 次级段落字号
 .fs15
   --fsp: $fs-15

package/source/css/_components/layout.styl

@@ -1,9 +1,7 @@
 .l_body
   display: grid
   grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
-  grid-gap: calc(var(--gap-margin) * 4)
-  @media screen and (max-width: $device-desktop)
-    grid-gap: calc(var(--gap-margin) * 2)
+  grid-gap: calc(var(--gap-page) * 1)
   margin: auto
   font-size: var(--fsp)
 
@@ -13,36 +11,34 @@
   position: sticky
   position: -webkit-sticky
   // 侧边栏容器宽度
-  --width-sidebar: calc(var(--gap-margin) * 2 + var(--gap-padding) * 2 + var(--side-content-width))
+  --width-sidebar: calc(var(--gap-base) * 4 + var(--side-content-width))
   width: var(--width-sidebar)
 
 .l_body .l_left
   justify-self: right
-  top: var(--gap-margin)
+  top: var(--gap-page)
 .l_body .l_right
   justify-self: left
-  max-height: calc(100% - var(--gap-margin) * 2)
+  width: calc(var(--width-sidebar) + var(--rightbar-width-extra))
+  max-height: calc(100% - var(--gap-page) * 2)
   .widgets
     height: 100%
     overflow visible
 
 // 平板布局
 @media screen and (max-width: $device-laptop)
-  .l_body .l_right
-    --gap-margin: 16px
   .laptop-only
     display: block !important
   .l_body
-    grid-gap: calc(var(--gap-margin) * 1)
     .l_right
       position: fixed
-      transform: translateX(320px)
+      transform: translateX(calc(100% + var(--inset) * 2))
       transition: transform .38s ease-out
       margin: 0
       --inset: 8px
       right: var(--inset)
-      top: var(--gap-margin)
-      max-height: calc(100vh - var(--gap-margin) * 2)
+      top: var(--gap-page)
+      max-height: calc(100vh - var(--gap-page) * 2)
       box-shadow: $boxshadow-card-float
       z-index: 10
       background: var(--background)
@@ -66,7 +62,7 @@
     display: block
     .l_left
       position: fixed
-      transform: translateX(-320px)
+      transform: translateX(calc(-100% - var(--inset) * 2))
       transition: transform .38s ease-out
       margin: 0
       --inset: 8px