hexo-theme-stellar 1.41.0 → 1.42.0

package/layout/_partial/main/post_list/latest_post_card.ejs

@@ -0,0 +1,25 @@
+<%
+// 最新文章封面卡片（公共组件）：整卡跳转到最新文章，背景为封面图，底部渐变模糊文字区。
+// 入参：href（跳转链接）、background（背景图 URL）、label（专栏名/分类名）、post（{title, date}）
+// 专栏列表页与未来首页等场景复用；无 post 时仅渲染 label。
+function layoutDiv() {
+  var el = '';
+  var bg = background || theme.default.topic;
+  // 注意：不能用 `var href` 承接，var 提升会遮蔽 partial 传入的 href 参数
+  var link = pretty_url(href || '/');
+  el += '<a class="cover" position="bottom" style="--cover-url:url(\'' + escape_html(bg.replace(/'/g, '%27')) + '\')" href="' + link + '">';
+  el += '<img src="' + escape_html(bg) + '" alt=""/>';
+  el += '<div class="cover-info" position="bottom" data-text-adaptive="split">';
+  if (typeof label !== 'undefined' && label) {
+    el += '<div class="text topic">' + escape_html(label) + '</div>';
+  }
+  if (post) {
+    el += '<div class="text headline">' + escape_html(post.title) + '</div>';
+    el += '<div class="text caption">' + escape_html(date(post.date, config.date_format)) + '</div>';
+  }
+  el += '</div>';
+  el += '</a>';
+  return el;
+}
+%>
+<%- layoutDiv() %>

package/layout/_partial/main/post_list/post_card.ejs

@@ -1,47 +1,16 @@
 <%
-const poster = post.poster;
 var obj = {
   image: post.cover
 };
-if (poster) {
-  obj.headline = poster.headline;
-  obj.topic = poster.topic;
-  obj.caption = poster.caption;
-  obj.color = poster.color;
-}
 function div_default() {
   var el = '';
   el += '<article class="md-text">';
 
-  // 封面
-  if (obj.image || theme.article.auto_cover) {
-    var cover_url;
-    if (obj.image != undefined) {
-      if (obj.image.includes('/')) {
-        cover_url = obj.image;
-      } else {
-        cover_url = 'https://source.unsplash.com/1280x640/?' + obj.image;
-      }
-    } else {
-      // 自动以 tags 作为关键词搜索封面
-      if (post.tags) {
-        var params = '';
-        post.tags.reverse().forEach((tag, i) => {
-          if (i > 0) {
-            params += ',';
-          }
-          params += tag.name;
-        });
-        cover_url = 'https://source.unsplash.com/1280x640/?' + params;
-      } else {
-        cover_url = 'https://source.unsplash.com/random/1280x640';
-      }
-    }
-    if (cover_url) {
-      el += '<div class="post-cover">';
-      el += '<img src="' + escape_html(cover_url) + '"/>';
-      el += '</div>';
-    }
+  // 封面：仅当显式 cover 为完整 URL 时渲染（Unsplash 自动封面接口已失效，不再生成）
+  if (obj.image && obj.image.includes('/')) {
+    el += '<div class="post-cover">';
+    el += '<img src="' + escape_html(obj.image) + '"/>';
+    el += '</div>';
   }
 
   // 标题
@@ -100,7 +69,7 @@ function div_default() {
       if (i >= 5) {
         return;
       }
-      el += `<span class="cap tag-chip">#${escape_html(tag.name)}</span>`;
+      el += `<span class="cap tag-chip">${icon('default:hashtag')}${escape_html(tag.name)}</span>`;
     });
     el += '</span>';
   }
@@ -110,39 +79,22 @@ function div_default() {
 }
 function div_photo() {
   var el = '';
-  var position = '';
-  if (obj.headline || obj.topic || obj.caption) {
-    if (obj.topic) {
-      position = 'top';
-    } else {
-      position = 'bottom';
-    }
-  }
-  el += '<div class="cover" position="' + position + '" style="--cover-url:url(\'' + escape_html(obj.image.replace(/'/g, '%27')) + '\')">';
+  // 小字取值统一由 subtitle() helper 提供：subtitle > description > excerpt 前 50 字
+  var caption = subtitle(post);
+  // hero 卡片文字区固定 bottom：标题 + 一行小字，不再有 top 布局
+  el += '<div class="cover" position="bottom" style="--cover-url:url(\'' + escape_html(obj.image.replace(/'/g, '%27')) + '\')">';
   el += '<img src="' + escape_html(obj.image) + '"/>';
-  if (position.length > 0) {
-    el += '<div class="cover-info" position="' + position + '"';
-    if (obj.color) {
-      el += 'style="color:' + escape_html(obj.color) + '"';
-    }
-    el += '>';
-    if (obj.topic) {
-      el += '<div class="text topic">' + escape_html(obj.topic) + '</div>';
-    }
-    if (obj.headline) {
-      el += '<div class="text headline">' + escape_html(obj.headline) + '</div>';
-    }
-    if (obj.caption) {
-      el += '<div class="text caption">' + escape_html(obj.caption) + '</div>';
-    }
-    el += '</div>';
-
+  el += '<div class="cover-info" position="bottom" data-text-adaptive="split">';
+  el += '<div class="text headline">' + escape_html(post.title ? post.title : date(post.date, config.date_format)) + '</div>';
+  if (caption.length > 0) {
+    el += '<div class="text caption">' + escape_html(caption) + '</div>';
   }
   el += '</div>';
+  el += '</div>';
   return el;
 }
 function div() {
-  if (obj.image && obj.image.length > 0 && obj.headline != undefined) {
+  if (theme.article.card_style == 'hero' && obj.image && obj.image.length > 0) {
     return div_photo();
   }
   return div_default();

package/layout/_partial/main/post_list/topic_card.ejs

@@ -1,14 +1,35 @@
 <%
 function layoutDiv() {
   var el = '';
+  var bg = topic.cover || topic.icon || theme.default.topic;
+  var label = topic.title || topic.name;
+  var latest = topic.homepage;
   el += '<article class="md-text">';
-  el += `<div class="preview"><img src="${topic.icon ? topic.icon : theme.default.topic}"/></div>`
-  el += '<div class="excerpt">';
-  el += '<h2 class="post-title">' + (topic.title || topic.name) + '</h2>';
+  // 专栏标题（story 文章 h2 样式，置于卡片外）
+  el += '<h2 class="topic-title">' + escape_html(label) + '</h2>';
+  // 专栏描述（标题下方）
   if (topic.description) {
-    el += '<p>' + topic.description + '</p>';
+    el += '<p class="topic-desc">' + escape_html(topic.description) + '</p>';
+  }
+  // 最新文章卡片（整卡跳转最新文章）
+  el += partial('_partial/main/post_list/latest_post_card', {
+    href: pretty_url(latest ? (latest.path || '/') : '/'),
+    background: bg,
+    post: latest
+  });
+  // 其他文章（排除最新，最多 3 条，按发布时间倒序）
+  if (topic.pages && topic.pages.length > 1) {
+    el += '<div class="post-panel">';
+    el += '<div class="posts">';
+    topic.pages.slice(1, 4).forEach(function(post) {
+      el += '<a class="post-link" href="' + pretty_url(post.path) + '">';
+      el += '<span class="title">' + escape_html(post.title) + '</span>';
+      el += '<span class="date">' + escape_html(date(post.date, config.date_format)) + '</span>';
+      el += '</a>';
+    });
+    el += '</div>';
+    el += '</div>';
   }
-  el += '</div>';
   el += '</article>';
   return el;
 }

package/layout/_partial/scripts/bootstrap.ejs

@@ -0,0 +1,35 @@
+<script>
+  // 插件注册队列：utils.js 尚未就绪时先缓存注册请求，就绪后统一补跑，
+  // 保证解析期注册的插件不因加载时序丢失。
+  window.stellar = window.stellar || {};
+  window.stellar._pluginQueue = window.stellar._pluginQueue || [];
+  window.stellar.initPlugin = function (fn, name, options) {
+    if (typeof utils === 'object' && typeof utils.initPlugin === 'function') {
+      return utils.initPlugin(fn, name, options);
+    }
+    window.stellar._pluginQueue.push({ fn: fn, name: name, options: options || {} });
+  };
+  window.stellar._flushPlugins = function () {
+    var pending = window.stellar._pluginQueue.splice(0);
+    if (typeof utils !== 'object' || typeof utils.initPlugin !== 'function') return;
+    for (var i = 0; i < pending.length; i++) {
+      try {
+        utils.initPlugin(pending[i].fn, pending[i].name, pending[i].options);
+      } catch (e) {
+        console.error('[Stellar] 插件补注册失败:', e);
+      }
+    }
+  };
+  document.addEventListener('DOMContentLoaded', function () {
+    if (typeof utils === 'object') return;
+    // utils 未就绪时补载；加载成功后由 utils.js 内部补跑插件队列
+    var s = document.createElement('script');
+    s.src = '<%- url_for('/js/utils.js') %>?v=<%- stellar_info('version') %>';
+    s.async = false;
+    s.onerror = function () {
+      console.error('[Stellar] 无法加载 /js/utils.js，已启用内容兜底显示（sr-fallback）');
+      document.documentElement.classList.add('sr-fallback');
+    };
+    document.head.appendChild(s);
+  });
+</script>

package/layout/_partial/scripts/defines.ejs

@@ -195,7 +195,8 @@
       if (!window.location.search) return;
       if (!new URLSearchParams(window.location.search).has('kw')) return;
       document.addEventListener('DOMContentLoaded', function () {
-        // utils 为全局词法绑定（顶层 const），不能通过 window.utils 访问
+        // utils 由 /js/utils.js 定义（同时暴露 window.utils）；
+        // 未就绪时由 bootstrap 队列兜底，此处按就绪状态判断
         if (typeof utils === 'object' && typeof utils.js === 'function') {
           utils.js('<%- url_for('/js/search/highlight.js') %>', { defer: true }).catch(function () {});
         }

package/layout/_partial/scripts.ejs

@@ -34,8 +34,17 @@ function tagtreeWidgetOnPage() {
 %>
 <%- partial('scripts/defines') %>
 
+<%- partial('scripts/bootstrap') %>
+
 <!-- core: utils 必须同步加载（页尾内联插件片段在解析期即调用 utils.initPlugin） -->
 <script src="<%- url_for('/js/utils.js') %>?v=<%- stellar_info('version') %>"></script>
+<script>
+  // 解析期检测 utils 是否已就绪；未就绪时同步补载，
+  // 保证「utils 先于页尾插件片段定义」的不变量。
+  if (typeof utils === 'undefined') {
+    document.write('<script src="<%- url_for('/js/utils.js') %>?v=<%- stellar_info('version') %>"><\/script>');
+  }
+</script>
 <script defer src="<%- url_for('/js/stellar-icons.js') %>?v=<%- stellar_info('version') %>"></script>
 <!-- 非首屏图标异步加载：占位符替换依赖构建期生成的 js/icons/{ns}.json -->
 <script defer src="<%- url_for('/js/icons.js') %>?v=<%- stellar_info('version') %>" data-version="<%- stellar_info('version') %>"></script>

package/layout/_partial/widgets/toc.ejs

@@ -60,12 +60,12 @@ function layoutDiv(fallback) {
   }
   el += `<div class="widget-footer">`
   el += `<a class="top" onclick="util.scrollTop()">`
-  el += icon('default:upup')
+  el += icon('default:upup', '', true)
   el += `<span>${__('btn.top')}</span>`
   el += `</a>`
   if (hasComments) {
     el += `<a class="buttom" onclick="util.scrollComment()">`
-    el += icon('default:tocomment')
+    el += icon('default:tocomment', '', true)
     el += `<span>${__('btn.comments')}</span>`
     el += `</a>`
   }

package/layout/_plugins/adaptive_text.ejs

@@ -0,0 +1,11 @@
+<script>
+  stellar.initPlugin(() => {
+    const els = Array.prototype.slice.call(document.querySelectorAll('[data-text-adaptive]'));
+    if (els.length === 0) return;
+    utils.js('/js/color.js').then(() => utils.js('/js/plugins/adaptive-text.js')).then(() => {
+      if (typeof applyAdaptiveText === 'function') {
+        applyAdaptiveText(els);
+      }
+    });
+  }, 'adaptive-text');
+</script>

package/layout/_plugins/copycode.ejs

@@ -1,5 +1,5 @@
 <script>
-  utils.initPlugin(() => {
+  stellar.initPlugin(() => {
     const codeElements = document.querySelectorAll('.code');
     if (codeElements.length > 0) {
       ctx.copycode = {
@@ -14,4 +14,4 @@
       });
     }
   }, 'copycode');
-</script>
+</script>

package/layout/_plugins/mermaid.ejs

@@ -1,6 +1,6 @@
 <script defer type="text/javascript" src="<%- conf.js %>"></script>
 <script>
-  utils.initPlugin(() => {
+  stellar.initPlugin(() => {
     const els = document.querySelectorAll('.mermaid');
     if (els.length > 0) {
       utils.css(`<%- url_for('/css/plugins/mermaid.css') %>?v=<%- stellar_info('version') %>`);

package/layout/_plugins/scrollreveal.ejs

@@ -1,7 +1,20 @@
 <script>
-  utils.initPlugin(() => {
-    const els = Array.prototype.slice.call(document.querySelectorAll('.slide-up'));
-    if (els.length === 0) return;
+  (function () {
+    // 兜底看门狗独立于插件初始化：3 秒内未完成 reveal 时强制显示 .slide-up 内容
+    let fallbackApplied = false;
+    const revealFallback = () => {
+      if (fallbackApplied) return;
+      fallbackApplied = true;
+      document.documentElement.classList.add('sr-fallback');
+    };
+    const watchdog = setTimeout(() => revealFallback(), 3000);
+
+    stellar.initPlugin(() => {
+      const els = Array.prototype.slice.call(document.querySelectorAll('.slide-up'));
+      if (els.length === 0) {
+        clearTimeout(watchdog);
+        return;
+      }
 
     // 吸顶/固定定位容器内的元素始终在视口内（或由容器控制显隐），
     // 但 ScrollReveal 按文档坐标判断可见性，会误判这类元素为不可见，
@@ -45,15 +58,10 @@
         targets.push(el);
       }
     });
-    if (pinnedGroups.size === 0 && targets.length === 0) return;
-
-    // 加载/初始化失败时兜底显示内容，避免整页空白
-    let fallbackApplied = false;
-    const revealFallback = () => {
-      if (fallbackApplied) return;
-      fallbackApplied = true;
-      document.documentElement.classList.add('sr-fallback');
-    };
+    if (pinnedGroups.size === 0 && targets.length === 0) {
+      clearTimeout(watchdog);
+      return;
+    }
 
     const slideUp = {
       distance: `<%- conf.distance %>`,
@@ -64,9 +72,6 @@
       easing: "ease-out"
     };
 
-    // 看门狗：CDN 长时间无响应时强制显示内容
-    const watchdog = setTimeout(() => revealFallback(), 3000);
-
     utils.js(`<%- conf.js %>`, { defer: true })
       .then(() => {
         if (fallbackApplied) return;
@@ -92,5 +97,6 @@
         console.error('[Plugin scrollreveal] 加载失败:', err);
         revealFallback();
       });
-  }, 'scrollreveal');
+    }, 'scrollreveal');
+  })();
 </script>

package/layout/_plugins/swiper.ejs

@@ -1,5 +1,5 @@
 <script>
-  utils.initPlugin(() => {
+  stellar.initPlugin(() => {
     const swiper_api = document.getElementById('swiper-api');
     if (swiper_api != undefined) {
       utils.css(`<%- url_for('/css/plugins/swiper.css') %>?v=<%- stellar_info('version') %>`);

package/layout/index.ejs

@@ -76,11 +76,19 @@ if (pinFlat && is_home_first_page()) {
 function layout_post_card(layout, post, content) {
   var el = '';
   var layout = layout;
-  if (layout == 'post' && post.cover != undefined && post.poster != undefined) {
+  var hero = false;
+  if (layout == 'post' && post.cover != undefined && theme.article.card_style == 'hero') {
     layout += ' photo';
+    hero = true;
   }
   el += `<div class="post-card-wrap${scrollreveal(' ')}">`;
-  el += `<a class="post-card ${layout}" href="${pretty_url(post.link || post.path)}">`
+  if (hero) {
+    // hero 封面卡片：背景图由 .post-card 自身背景承载（跟随 corner-shape 圆角裁剪），
+    // 子图保留用于 hover 变暗/放大滤镜
+    el += `<a class="post-card ${layout}" style="--cover-url:url('${escape_html(post.cover.replace(/'/g, '%27'))}')" href="${pretty_url(post.link || post.path)}">`
+  } else {
+    el += `<a class="post-card ${layout}" href="${pretty_url(post.link || post.path)}">`
+  }
   el += content;
   el += '</a>';
   el += '</div>';

package/layout/index_topic.ejs

@@ -8,9 +8,9 @@ function layout_topic_list(partial) {
       continue
     }
     el += `<div class="post-card-wrap${scrollreveal(' ')}">`
-    el += `<a class="post-card wiki topic" href="${pretty_url(topic.homepage?.path || '/')}">`
+    el += `<div class="post-card topic">`
     el += partial(topic)
-    el += `</a>`
+    el += `</div>`
     el += `</div>`
   }
   return el
@@ -18,7 +18,7 @@ function layout_topic_list(partial) {
 function layoutDiv() {
   var el = ''
   el += partial('_partial/main/navbar/nav_tabs_blog')
-  el += `<div class="post-list wiki topic">`;
+  el += `<div class="post-list topic">`;
   el += layout_topic_list(function(topic) {
     return partial('_partial/main/post_list/topic_card', {topic: topic})
   })
@@ -27,4 +27,4 @@ function layoutDiv() {
 }
 %>
 
-<%- layoutDiv() %>
+<%- layoutDiv() %>

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {
     "lint": "eslint .",
-    "test": "node ci/check-require-decls.js && node --test",
-    "check": "npm run lint && npm test && python3 docs/knowledge/tools/verify.py",
+    "test": "node ci/check-require-decls.js && node --test && node ci/check-spec-refs.js",
+    "check": "npm run lint && npm test && python3 docs/knowledge/tools/verify.py && node ci/check-release-docs.js",
     "release": "node release.js",
     "release:dry": "node release.js --dry-run"
   },

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