hexo-theme-stellar 1.43.0 → 1.44.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 1.44.0
+
+> 发布日期：2026-08-21
+
+### 新功能
+- 新增可选的卡片 Spotlight 光斑与 3D Tilt 倾斜效果，可通过 `plugins.card_hover` 配置启用、光斑颜色和最大倾斜角度，并按组件独立接入与降级
+- Wiki Hero 操作按钮接入 Spotlight 光效，背景图片与动画改为独立配置，Galaxy 支持逐实例参数覆盖、图片叠加和 WebGL 失败降级
+- 桌面端新增 `Command+K` / `Ctrl+K` 聚焦搜索框快捷键，在窄屏、编辑区域和输入法组合状态下保留原生行为
+
+### 样式与重构
+- 搜索控件改用原生搜索输入框、搜索地标和标签关联，完善无障碍语义；本地搜索与 Algolia 结果统一可点击区域、表面样式和 Spotlight 生命周期
+- 笔记标签行复用文章标签胶囊的 hashtag 图标、间距与交互样式
+
+### 升级注意（配置变更与破坏性改动）
+- Wiki Hero 的 Galaxy 配置由 `background: galaxy` 迁移为 `animation.type: galaxy`，参数放在 `animation.params`；`background` 现在仅用于背景图片，并可与动画同时显示
+- `plugins.card_hover.enable` 默认为 `false`，升级后不会自动启用卡片动态效果
+
+Full Changelog: [1.43.1...1.44.0](https://github.com/xaoxuu/hexo-theme-stellar/compare/1.43.1...1.44.0)
+
+## 1.43.1
+
+> 发布日期：2026-08-20
+
+### 修复
+- 左栏 Footer Social 的外部图片图标统一为 24×24px，非方形图片保持原始比例，避免固有尺寸撑宽按钮或被裁切
+- 发版脚本自动同步主题配置、包信息与安装知识库的版本号，并在最终待提交状态执行完整质量检查
+
+Full Changelog: [1.43.0...1.43.1](https://github.com/xaoxuu/hexo-theme-stellar/compare/1.43.0...1.43.1)
+
 ## 1.43.0
 
 > 发布日期：2026-08-20

package/THIRD-PARTY-NOTICES.md

@@ -2,7 +2,8 @@
 
 ## React Bits
 
-The Wiki Galaxy WebGL background is adapted from the Galaxy component in
+The Wiki Galaxy WebGL background and Card Hover spotlight layer are adapted
+from the Galaxy and Spotlight Card components in
 [React Bits](https://github.com/DavidHDev/react-bits).
 
 MIT License

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.43.0'
+  version: '1.44.0'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   main_css: /css/main.css
@@ -686,6 +686,12 @@ plugins:
   # 页面存在 [data-text-adaptive] 元素时才按需加载（theme：背景图平均色 lighten/darken；contrast：黑白对比）
   adaptive_text:
     enable: true
+
+  # 卡片鼠标跟随光斑与 3D 倾斜：通过 card-hover 组合类按组件接入
+  card_hover:
+    enable: false
+    spotlight_color: 'rgba(255, 255, 255, 0.25)'
+    max_tilt: 3 # 最大倾斜角度（deg），运行时限制在 0~8
   
   # 赫蹏 (Heti) - 专为中文网页内容设计的排版样式增强
   # https://github.com/sivan/heti

package/layout/_partial/components/collection-item.ejs

@@ -5,7 +5,7 @@ var entryPrefix = entry.prefix == null ? '' : String(entry.prefix)
 var entryDescription = entry.description == null ? '' : String(entry.description)
 var entryMeta = entry.meta == null ? '' : String(entry.meta)
 var entryClassName = typeof entry.className === 'string' ? entry.className.trim() : ''
-var entryClasses = 'ui-collection__item'
+var entryClasses = 'ui-collection__item card-hover card-hover--spotlight'
 if (entry.active) {
   entryClasses += ' is-active'
 }

package/layout/_partial/cover/wiki_cover.ejs

@@ -9,7 +9,8 @@ function layoutWikiCover() {
     return el;
   }
 
-  var background = proj.background;
+  var background = typeof proj.background === 'string' && proj.background.length > 0 ? proj.background : '';
+  var animation = proj.animation && typeof proj.animation === 'object' ? proj.animation : {};
   var preview = proj.preview || {};
   var commands = Array.isArray(preview.commands) ? preview.commands.filter(function (item) {
     return item && item.codes;
@@ -21,8 +22,10 @@ function layoutWikiCover() {
   var actions = Array.isArray(proj.actions) ? proj.actions.filter(function (item) {
     return item && item.title && item.url;
   }) : [];
-  var isGalaxy = background === 'galaxy';
-  var isImageBackground = background && !isGalaxy;
+  var isGalaxy = animation.type === 'galaxy';
+  var isImageBackground = background.length > 0;
+  var galaxyParams = animation.params && typeof animation.params === 'object' && !Array.isArray(animation.params) ? animation.params : {};
+  var galaxyParamsJson = escape_html(JSON.stringify(galaxyParams));
   var projectName = proj.name || proj.title || page.wiki;
   var adaptiveTextAttr = '';
   if (isImageBackground) {
@@ -33,12 +36,13 @@ function layoutWikiCover() {
 
   el += '<div class="l_cover wiki wiki-hero' + (hasPreview ? '' : ' without-preview') + '">';
   el += '<div class="wiki-cover-background' + (isGalaxy ? ' galaxy' : '') + (isImageBackground ? ' image' : '') + '" aria-hidden="true">';
-  if (isGalaxy) {
-    el += '<canvas></canvas>';
-  } else if (isImageBackground) {
+  if (isImageBackground) {
     el += '<img class="wiki-cover-background-image" src="' + escape_html(background) + '" alt="" />';
     el += '<img class="wiki-cover-background-blur" src="' + escape_html(background) + '" alt="" />';
   }
+  if (isGalaxy) {
+    el += '<canvas data-galaxy-params="' + galaxyParamsJson + '"></canvas>';
+  }
   el += '<div class="wiki-cover-background-overlay"></div></div>';
   el += '<div class="wiki-cover-layout"' + adaptiveTextAttr + '>';
   el += '<nav class="wiki-navbar" aria-label="' + escape_html(config.title) + '">';
@@ -58,11 +62,11 @@ function layoutWikiCover() {
   }
   el += '<div class="wiki-cover-actions">';
   if (repo) {
-    el += '<a class="button wiki-cover-source" href="https://github.com/' + escape_html(repo) + '" target="_blank" rel="external nofollow noopener noreferrer">' + icon('default:github') + '<span>' + escape_html(__('btn.source')) + '</span></a>';
+    el += '<a class="button wiki-cover-source card-hover card-hover--spotlight" href="https://github.com/' + escape_html(repo) + '" target="_blank" rel="external nofollow noopener noreferrer">' + icon('default:github') + '<span>' + escape_html(__('btn.source')) + '</span></a>';
   }
-  el += '<a class="button" href="#start">' + icon('default:documents') + '<span>' + escape_html(__('btn.docs')) + '</span></a>';
+  el += '<a class="button card-hover card-hover--spotlight" href="#start">' + icon('default:documents') + '<span>' + escape_html(__('btn.docs')) + '</span></a>';
   actions.forEach(function (item) {
-    el += '<a class="button" href="' + escape_html(item.url) + '" target="_blank" rel="external nofollow noopener noreferrer">';
+    el += '<a class="button card-hover card-hover--spotlight" href="' + escape_html(item.url) + '" target="_blank" rel="external nofollow noopener noreferrer">';
     if (item.icon) {
       el += icon(item.icon);
     }

package/layout/_partial/dropdown.ejs

@@ -48,7 +48,7 @@ function layoutDiv() {
   el += '</summary>'
   el += '<div class="dropdown-menu ui-collection" data-ui-surface="glass" data-layout="list" data-variant="nav" data-density="compact">'
   for (let child of items) {
-    el += '<a class="dropdown-item ui-collection__item"' + linkAttrs(child) + '>'
+    el += '<a class="dropdown-item ui-collection__item card-hover card-hover--spotlight"' + linkAttrs(child) + '>'
     if (child.icon) {
       el += '<span class="ui-collection__leading">' + icon(child.icon, 'no-lazy', true) + '</span>'
     }

package/layout/_partial/main/notebook/note_tags.ejs

@@ -1,9 +1,9 @@
-<%# 笔记的所属标签 %>
+<%# 笔记的所属标签（容器与胶囊样式复用 article/article_tags.ejs 的 article-tags） %>
 <% if (page.tags) { %>
-  <div class="tag-list">
+  <div class="article-tags<%= scrollreveal(' ') %>">
     <% for (const t of page.tags) { %>
       <% const tag = notebook.tagTree.get(t.toLowerCase()) %>
-      <a class="tag" href="<%= pretty_url(tag.path) %>"><%= tag.name %></a>
+      <a class="tag" href="<%= pretty_url(tag.path) %>"><%- icon('default:hashtag') %><%- escape_html(tag.name) %></a>
     <% } %>
   </div>
 <% } %>

package/layout/_partial/main/pin_slider.ejs

@@ -119,7 +119,7 @@ if (pinItems.length > 0) {
   var groupKey = pinType == 'wiki' ? 'wiki' : 'post'
   var sliderInterval = 5000 // 自动轮播间隔固定 5000ms
   var el = ''
-  el += '<div class="pin-slider" id="pin-slider" data-interval="' + sliderInterval + '" data-key="' + pinType + '" data-group="' + groupKey + '">'
+  el += '<div class="pin-slider card-hover card-hover--spotlight card-hover--tilt" id="pin-slider" data-interval="' + sliderInterval + '" data-key="' + pinType + '" data-group="' + groupKey + '">'
   el += '<div class="pin-slider-track">'
   el += slidesHtml
   el += '</div>'

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

@@ -7,7 +7,7 @@ function layoutDiv() {
   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 += '<a class="cover card-hover card-hover--spotlight card-hover--tilt" 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) {

package/layout/_partial/sidebar/search.ejs

@@ -17,7 +17,7 @@ function layoutDiv() {
     return el
   }
   el += `<div class="search-wrapper" id="search-wrapper">`
-  el += `<form class="search-form">`
+  el += `<div class="search-form" role="search">`
   var filter = ''
   if (item.filter == 'auto') {
     if (page.wiki) {
@@ -31,20 +31,20 @@ function layoutDiv() {
       filter = item.filter
     }
   }
-  el += `<a class="search-button" onclick="document.getElementById(&quot;search-input&quot;).focus();">`
+  if (filter.length > 0 && !filter.startsWith('/')) {
+    filter = '/' + filter
+  }
+  var placeholder = item.placeholder || (filter.length > 0 ? __('search.search_in', filter) : __('search.search'))
+  var escapedPlaceholder = escape_html(placeholder)
+  el += `<label class="search-button" for="search-input" aria-hidden="true">`
   el += icon('default:search', '', true)
-  el += `</a>`
-  el += `<input type="text" class="search-input" id="search-input"`
+  el += `</label>`
+  el += `<input type="search" class="search-input" id="search-input" aria-label="${escapedPlaceholder}"`
   if (filter.length > 0) {
-    if (!filter.startsWith('/')) {
-      filter = '/' + filter
-    }
-    el += ` data-filter="${filter}"`
-    el += ` placeholder="${item.placeholder || __('search.search_in', filter)}">`
-  } else {
-    el += ` placeholder="${item.placeholder || __('search.search')}">`
+    el += ` data-filter="${escape_html(filter)}"`
   }
-  el += `</form>`
+  el += ` placeholder="${escapedPlaceholder}">`
+  el += `</div>`
   el += `<div id="search-result"></div>`
   el += `<div class="search-no-result">${__('search.no_results')}</div>`
   el += `</div>`

package/layout/_plugins/card_hover.ejs

@@ -0,0 +1,32 @@
+<%
+var spotlightColor = typeof conf.spotlight_color === 'string' && conf.spotlight_color.trim().length > 0
+  ? conf.spotlight_color.trim()
+  : 'rgba(255, 255, 255, 0.25)';
+var maxTilt = Number(conf.max_tilt);
+if (conf.max_tilt == null || conf.max_tilt === '' || !Number.isFinite(maxTilt)) {
+  maxTilt = 3;
+}
+maxTilt = Math.max(0, Math.min(8, maxTilt));
+var cardHoverConfig = {
+  spotlightColor: spotlightColor,
+  maxTilt: maxTilt
+};
+var cardHoverConfigJson = JSON.stringify(cardHoverConfig).replace(/</g, '\\u003c');
+%>
+<script>
+  stellar.initPlugin(() => {
+    let disposed = false;
+    ctx.card_hover = <%- cardHoverConfigJson %>;
+    utils.js('/js/plugins/card-hover.js', { defer: true }).then(() => {
+      if (!disposed && stellar.cardHover && typeof stellar.cardHover.mountAll === 'function') {
+        stellar.cardHover.mountAll(document);
+      }
+    }).catch(() => {});
+    return () => {
+      disposed = true;
+      if (stellar.cardHover && typeof stellar.cardHover.destroy === 'function') {
+        stellar.cardHover.destroy();
+      }
+    };
+  }, 'card-hover');
+</script>

package/layout/_plugins/index.ejs

@@ -29,6 +29,7 @@ function loadPlugins() {
 
   // search
   if (theme.search[theme.search.service]) {
+    el += `<script>window.addEventListener('DOMContentLoaded', function () { utils.js('/js/search/shortcut.js', { defer: true }); });</script>`;
     el += partial(`search/${theme.search.service}`, {conf: theme.search[theme.search.service]});
   }
   

package/layout/index.ejs

@@ -85,9 +85,9 @@ function layout_post_card(layout, post, content) {
   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)}">`
+    el += `<a class="post-card ${layout} card-hover card-hover--spotlight card-hover--tilt" 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 += `<a class="post-card ${layout} card-hover card-hover--spotlight card-hover--tilt" href="${pretty_url(post.link || post.path)}">`
   }
   el += content;
   el += '</a>';

package/layout/index_wiki.ejs

@@ -17,7 +17,7 @@ function layout_wiki_list(partial) {
       if (proj.cover) {
         coverStyle = ` style="--cover-url:url('${escape_html(proj.cover.replace(/'/g, '%27'))}')"`
       }
-      el += `<a class="wiki-card${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
+      el += `<a class="wiki-card card-hover card-hover--spotlight card-hover--tilt${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
       el += partial(proj)
       el += `</a>`
       el += `</div>`
@@ -28,7 +28,7 @@ function layout_wiki_list(partial) {
       if (proj.cover) {
         coverStyle = ` style="--cover-url:url('${escape_html(proj.cover.replace(/'/g, '%27'))}')"`
       }
-      el += `<a class="wiki-card${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
+      el += `<a class="wiki-card card-hover card-hover--spotlight card-hover--tilt${proj.cover ? '' : ' no-cover'}"${coverStyle} href="${pretty_url(proj.homepage?.path || '/')}">`
       el += partial(proj)
       el += `</a>`
       el += `</div>`

package/layout/notebooks.ejs

@@ -2,7 +2,7 @@
 <% for (const notebook of Object.values(theme.notebooks.tree)) { %>
   <div class="post-list wiki">
     <div class="post-card-wrap<%= scrollreveal(' ') %>">
-    <a class="post-card wiki" href="<%= pretty_url(notebook.base_dir) %>">
+    <a class="post-card wiki card-hover card-hover--spotlight card-hover--tilt" href="<%= pretty_url(notebook.base_dir) %>">
       <%- include('_partial/main/notebook/notebook_card', { notebook: notebook }) %>
     </a>
     </div>

package/layout/notes.ejs

@@ -3,7 +3,7 @@
   <% page.posts.each(post => { %>
     <div class="post-card-wrap<%= scrollreveal(' ') %>">
     <a
-      class="post-card post"
+      class="post-card post card-hover card-hover--spotlight card-hover--tilt"
       href="<%= pretty_url(post.link || post.path) %><%= page.activeTag ? `?tag=${page.activeTag}` : '' %>"
     >
       <%- include('_partial/main/notebook/note_card', { note: post }) %>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/tags/lib/dropdown.js

@@ -48,7 +48,7 @@ module.exports = ctx => function(args, content = '') {
   el += '<div class="dropdown-menu ui-collection" data-ui-surface="glass" data-layout="list" data-variant="nav" data-density="compact">'
   for (const item of items) {
     const url = String(item.url)
-    el += `<a class="dropdown-item ui-collection__item" href="${escapeHTML(toUrl(url))}`
+    el += `<a class="dropdown-item ui-collection__item card-hover card-hover--spotlight" href="${escapeHTML(toUrl(url))}`
     if (url.includes('://')) {
       el += '" target="_blank" rel="external nofollow noopener noreferrer">'
     } else {

package/scripts/tags/lib/grid.js

@@ -18,6 +18,9 @@ module.exports = ctx => function(args, content) {
     args.w = '240px'
   }
   var el = ''
+  var cellClass = args.bg === 'card'
+    ? 'cell card-hover card-hover--spotlight card-hover--tilt'
+    : 'cell'
   el += '<div class="tag-plugin grid"'
   el += ' ' + ctx.args.joinTags(args, ['bg', 'columns']).join(' ')
   el += ' style="'
@@ -34,7 +37,7 @@ module.exports = ctx => function(args, content) {
   // 分组
   var cells = content.split(/<!--\s*cell(.*?)-->/g).filter(item => item.trim().length > 0)
   for (let cell of cells) {
-    el += `<div class="cell" style="`
+    el += `<div class="${cellClass}" style="`
     if (args.br) {
       el += `border-radius:${args.br};`
     }

package/scripts/tags/lib/link.js

@@ -32,7 +32,7 @@ module.exports = ctx => function(args) {
   }
   var el = ''
   el += '<div class="tag-plugin link dis-select">'
-  el += '<a class="link-card' + (args.desc ? ' rich' : ' plain') + '" title="' + safeTitle + '" href="' + args.url + '"'
+  el += '<a class="link-card' + (args.desc ? ' rich' : ' plain') + ' card-hover card-hover--spotlight card-hover--tilt" title="' + safeTitle + '" href="' + args.url + '"'
   if (args.url.includes('://')) {
     el += ' target="_blank" rel="external nofollow noopener noreferrer"'
   }

package/source/css/_components/pages/notebook.styl

@@ -1,31 +1,3 @@
-.md-text .tag-list
-  display: flex
-  flex-wrap: wrap
-  padding: 0
-  margin-top: 2rem
-  a.tag
-    display: inline-flex
-    align-items: center
-    position: relative
-    color: var(--text-p2)
-    margin: 4px
-    padding: .5em .75rem
-    border-radius: 4px
-    background: var(--block)
-    font-size: $fs-13
-    font-weight: 500
-    &:before
-      content: "#"
-      margin-left: -2px
-      margin-right: 2px
-      opacity: .4
-    &:hover
-      &:before
-        color var(--theme)
-        opacity: 1
-      color: var(--text)
-      background: var(--block-border)
-
 .post-list .post-card .meta.cap .tag
   &:before
     content: "#"

package/source/css/_components/partial/cover.styl

@@ -97,14 +97,18 @@
         transform: scale(1.03)
       .wiki-cover-background-overlay
         position: absolute
-        z-index: 2
+        z-index: 3
         inset: 0
         pointer-events: none
         background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--background) 100%)
     &.galaxy
-      background: #000000
+      &:not(.image)
+        background: #000000
       canvas
         display: block
+        position: absolute
+        z-index: 2
+        inset: 0
         width: 100%
         height: 100%
         pointer-events: none
@@ -224,7 +228,7 @@
         border-color: var(--text-banner, var(--text))
         color: var(--text-banner, var(--text))
         background: var(--text-banner, var(--text))
-        svg, span
+        > svg, > span:not(.card-hover__spotlight)
           filter: invert(1)
         &:hover
           color: var(--text-banner, var(--text))

package/source/css/_components/sidebar/footer.styl

@@ -22,8 +22,9 @@
     box-shadow: none
     img
       flex: initial
-      width: auto
-      height: auto
+      width: 24px
+      height: 24px
+      object-fit: contain
       border-radius: 2px
     svg
       flex: initial

package/source/css/_components/sidebar/search.styl

@@ -53,12 +53,17 @@
       &:after
         opacity: 1
   .search-input
+    -webkit-appearance: none
+    appearance: none
     width: 100%
     box-sizing: border-box
     font-family: $ff-body
     font-size: $fs-14
     padding: 12px 0
     color: var(--text)
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration
+      -webkit-appearance: none
     &::placeholder
       color: var(--text-p3)
       :root[data-theme="dark"] &
@@ -74,6 +79,7 @@
     flex-shrink: 0
     width: 1.5rem
     height: 1.5rem
+    cursor: pointer
     svg
       height: 1rem
       width: 1rem
@@ -118,14 +124,11 @@
       list-style-type: none
     li a
       display: block
-      background: var(--ui-summary-item-bg)
+      background: var(--ui-adapter-bg-hover)
+      box-shadow: var(--ui-adapter-shadow-hover)
       line-height: 1.2
       padding: 0.75rem 1rem
       border-radius: $border-card-s
-      trans1 background
-      &:hover
-        background: var(--ui-adapter-bg-hover)
-        box-shadow: var(--ui-adapter-shadow-hover)
       &:focus-visible
         outline: 2px solid var(--theme)
         outline-offset: 2px

package/source/css/_plugins/card-hover.styl

@@ -0,0 +1,63 @@
+// 组合类驱动的通用卡片 hover 能力。
+// 仅在客户端完成挂载后生效，脚本失败时保留组件原有表现。
+.card-hover.is-card-hover-ready
+  position: relative
+  --card-hover-mouse-x: 50%
+  --card-hover-mouse-y: 50%
+  --card-hover-rotate-x: 0deg
+  --card-hover-rotate-y: 0deg
+
+.card-hover.is-card-hover-ready.card-hover--tilt
+  transform: perspective(900px) translate3d(0, 0, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))
+  transform-origin: center
+  transition: transform .25s ease-out, box-shadow .2s ease-out
+
+.card-hover.is-card-hover-ready.card-hover--tilt.is-card-hover-active
+  transform: perspective(900px) translate3d(0, -2px, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))
+  transition-duration: .08s, .2s
+  will-change: transform
+
+.card-hover__spotlight
+  position: absolute
+  inset: 0
+  z-index: 2
+  border-radius: inherit
+  corner-shape: inherit
+  background: radial-gradient(circle at var(--card-hover-mouse-x) var(--card-hover-mouse-y), var(--card-hover-spotlight-color, rgba(255, 255, 255, .25)), transparent 80%)
+  opacity: 0
+  pointer-events: none
+  transition: opacity .25s ease-out
+
+.card-hover.is-card-hover-ready.card-hover--spotlight
+  &.is-card-hover-active, &:focus-within
+    > .card-hover__spotlight
+      opacity: .6
+
+// ScrollReveal 使用外层 .post-card-wrap 的 transform；倾斜只作用于内层卡片。
+// 启用插件时把同尺寸包装器的阴影移到卡片本体，使阴影随 3D transform 移动。
+.post-list:not(.topic) .post-card-wrap
+  box-shadow: none
+
+.post-list:not(.topic) .post-card.card-hover,
+.post-list.wiki .wiki-card.card-hover
+  box-shadow: $boxshadow-card
+
+.post-list.wiki .post-card-wrap
+  box-shadow: none
+
+// link/grid 原本通过 hoverable-card() 写入 transform；显式组合类接管后统一合成倾斜与上浮。
+.md-text .link-card.card-hover.card-hover--tilt.is-card-hover-ready,
+.tag-plugin.grid[bg='card'] > .cell.card-hover.card-hover--tilt.is-card-hover-ready
+  transform: perspective(900px) translate3d(0, 0, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))
+  &.is-card-hover-active
+    transform: perspective(900px) translate3d(0, -2px, 0) rotateX(var(--card-hover-rotate-x)) rotateY(var(--card-hover-rotate-y))
+
+@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce)
+  .card-hover.is-card-hover-ready.card-hover--tilt,
+  .card-hover.is-card-hover-ready.card-hover--tilt.is-card-hover-active,
+  .md-text .link-card.card-hover.card-hover--tilt.is-card-hover-ready,
+  .tag-plugin.grid[bg='card'] > .cell.card-hover.card-hover--tilt.is-card-hover-ready
+    transform: none
+    transition: none
+  .card-hover.is-card-hover-ready.card-hover--spotlight > .card-hover__spotlight
+    opacity: 0

package/source/css/_plugins/index.styl

@@ -10,3 +10,6 @@ if hexo-config('plugins.tianli_gpt.enable')
   @import 'tianli_gpt'
 if hexo-config('plugins.katex.enable')
   @import 'katex'
+if hexo-config('plugins.card_hover.enable')
+  // 最后加载，组合并覆盖 link/grid 既有 hover transform
+  @import 'card-hover'

package/source/js/plugins/card-hover.js

@@ -0,0 +1,254 @@
+/*
+ * Card hover spotlight adapted from React Bits Spotlight Card:
+ * https://github.com/DavidHDev/react-bits
+ */
+
+(function () {
+  'use strict';
+
+  window.stellar = window.stellar || {};
+
+  const DEFAULT_SPOTLIGHT_COLOR = 'rgba(255, 255, 255, 0.25)';
+  const DEFAULT_MAX_TILT = 3;
+  const MAX_TILT_LIMIT = 8;
+  const mounted = new Map();
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)');
+  let lifecycleBound = false;
+
+  function normalizeConfig() {
+    const raw = typeof ctx !== 'undefined' && ctx.card_hover ? ctx.card_hover : {};
+    let maxTilt = Number(raw.maxTilt);
+    if (raw.maxTilt === null || raw.maxTilt === '' || !Number.isFinite(maxTilt)) {
+      maxTilt = DEFAULT_MAX_TILT;
+    }
+    maxTilt = Math.max(0, Math.min(MAX_TILT_LIMIT, maxTilt));
+
+    let spotlightColor = typeof raw.spotlightColor === 'string' && raw.spotlightColor.trim()
+      ? raw.spotlightColor.trim()
+      : DEFAULT_SPOTLIGHT_COLOR;
+    if (window.CSS && typeof window.CSS.supports === 'function' && !window.CSS.supports('color', spotlightColor)) {
+      spotlightColor = DEFAULT_SPOTLIGHT_COLOR;
+    }
+    return { maxTilt: maxTilt, spotlightColor: spotlightColor };
+  }
+
+  function canAnimate() {
+    return !reduceMotion.matches && finePointer.matches;
+  }
+
+  function requestFrame(state) {
+    if (state.frame !== null) return;
+    state.frame = window.requestAnimationFrame(function () {
+      state.frame = null;
+      if (!state.pointer || !document.documentElement.contains(state.element)) return;
+      const rect = state.element.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+
+      const x = Math.max(0, Math.min(rect.width, state.pointer.x - rect.left));
+      const y = Math.max(0, Math.min(rect.height, state.pointer.y - rect.top));
+      const normalizedX = x / rect.width * 2 - 1;
+      const normalizedY = y / rect.height * 2 - 1;
+
+      state.element.style.setProperty('--card-hover-mouse-x', x + 'px');
+      state.element.style.setProperty('--card-hover-mouse-y', y + 'px');
+      if (state.hasTilt) {
+        state.element.style.setProperty('--card-hover-rotate-x', (-normalizedY * state.maxTilt).toFixed(3) + 'deg');
+        state.element.style.setProperty('--card-hover-rotate-y', (normalizedX * state.maxTilt).toFixed(3) + 'deg');
+      }
+    });
+  }
+
+  function cancelFrame(state) {
+    if (state.frame !== null) {
+      window.cancelAnimationFrame(state.frame);
+      state.frame = null;
+    }
+  }
+
+  function resetSpotlightPosition(state) {
+    state.element.style.setProperty('--card-hover-mouse-x', '50%');
+    state.element.style.setProperty('--card-hover-mouse-y', '50%');
+  }
+
+  function deactivatePointer(state) {
+    cancelFrame(state);
+    state.pointer = null;
+    state.element.classList.remove('is-card-hover-active');
+    state.element.style.setProperty('--card-hover-rotate-x', '0deg');
+    state.element.style.setProperty('--card-hover-rotate-y', '0deg');
+    if (!state.spotlight || state.element.matches(':focus-within')) {
+      resetSpotlightPosition(state);
+    }
+  }
+
+  function resetState(state) {
+    deactivatePointer(state);
+    resetSpotlightPosition(state);
+  }
+
+  function unmount(state) {
+    resetState(state);
+    state.element.removeEventListener('pointerenter', state.onPointerEnter);
+    state.element.removeEventListener('pointermove', state.onPointerMove);
+    state.element.removeEventListener('pointerleave', state.onPointerLeave);
+    state.element.removeEventListener('focusin', state.onFocusIn);
+    if (state.spotlight) {
+      state.spotlight.removeEventListener('transitionend', state.onSpotlightTransitionEnd);
+    }
+    state.element.classList.remove('is-card-hover-ready');
+    if (state.spotlight && state.spotlight.parentNode === state.element) {
+      state.spotlight.remove();
+    }
+    mounted.delete(state.element);
+  }
+
+  function unmountAll(root) {
+    Array.from(mounted.values()).forEach(function (state) {
+      if (!root || state.element === root || (typeof root.contains === 'function' && root.contains(state.element))) {
+        unmount(state);
+      }
+    });
+  }
+
+  function mount(element) {
+    if (!element || mounted.has(element) || !canAnimate()) return;
+    const hasSpotlight = element.classList.contains('card-hover--spotlight');
+    const hasTilt = element.classList.contains('card-hover--tilt');
+    if (!hasSpotlight && !hasTilt) return;
+
+    const config = normalizeConfig();
+    document.documentElement.style.setProperty('--card-hover-spotlight-color', config.spotlightColor);
+    let spotlight = null;
+    if (hasSpotlight) {
+      spotlight = document.createElement('span');
+      spotlight.className = 'card-hover__spotlight';
+      spotlight.setAttribute('aria-hidden', 'true');
+      element.appendChild(spotlight);
+    }
+
+    const state = {
+      element: element,
+      spotlight: spotlight,
+      hasTilt: hasTilt,
+      maxTilt: config.maxTilt,
+      frame: null,
+      pointer: null,
+      onPointerEnter: null,
+      onPointerMove: null,
+      onPointerLeave: null,
+      onFocusIn: null,
+      onSpotlightTransitionEnd: null
+    };
+    state.onPointerEnter = function (event) {
+      state.pointer = { x: event.clientX, y: event.clientY };
+      element.classList.add('is-card-hover-active');
+      requestFrame(state);
+    };
+    state.onPointerMove = function (event) {
+      state.pointer = { x: event.clientX, y: event.clientY };
+      requestFrame(state);
+    };
+    state.onPointerLeave = function () {
+      deactivatePointer(state);
+    };
+    state.onFocusIn = function () {
+      if (!element.classList.contains('is-card-hover-active')) {
+        resetSpotlightPosition(state);
+      }
+    };
+    state.onSpotlightTransitionEnd = function (event) {
+      if (event.target !== spotlight || event.propertyName !== 'opacity') return;
+      if (element.classList.contains('is-card-hover-active') || element.matches(':focus-within')) return;
+      resetSpotlightPosition(state);
+    };
+
+    element.addEventListener('pointerenter', state.onPointerEnter, { passive: true });
+    element.addEventListener('pointermove', state.onPointerMove, { passive: true });
+    element.addEventListener('pointerleave', state.onPointerLeave, { passive: true });
+    element.addEventListener('focusin', state.onFocusIn);
+    if (spotlight) {
+      spotlight.addEventListener('transitionend', state.onSpotlightTransitionEnd);
+    }
+    element.classList.add('is-card-hover-ready');
+    mounted.set(element, state);
+  }
+
+  function mountAll(root) {
+    bindLifecycle();
+    if (!canAnimate()) {
+      unmountAll();
+      return;
+    }
+    const scope = root && typeof root.querySelectorAll === 'function' ? root : document;
+    if (scope.nodeType === 1 && scope.matches('.card-hover')) {
+      mount(scope);
+    }
+    scope.querySelectorAll('.card-hover').forEach(mount);
+  }
+
+  function resetAll() {
+    mounted.forEach(resetState);
+  }
+
+  function handleMotionPreference() {
+    if (canAnimate()) {
+      mountAll(document);
+    } else {
+      unmountAll();
+    }
+  }
+
+  function handleRenderedMarkdown(event) {
+    const target = event.detail && event.detail.target ? event.detail.target : document;
+    mountAll(target);
+  }
+
+  function handleVisibility() {
+    if (document.hidden) resetAll();
+  }
+
+  function addMediaListener(media, listener) {
+    if (typeof media.addEventListener === 'function') {
+      media.addEventListener('change', listener);
+    } else if (typeof media.addListener === 'function') {
+      media.addListener(listener);
+    }
+  }
+
+  function removeMediaListener(media, listener) {
+    if (typeof media.removeEventListener === 'function') {
+      media.removeEventListener('change', listener);
+    } else if (typeof media.removeListener === 'function') {
+      media.removeListener(listener);
+    }
+  }
+
+  function bindLifecycle() {
+    if (lifecycleBound) return;
+    lifecycleBound = true;
+    addMediaListener(reduceMotion, handleMotionPreference);
+    addMediaListener(finePointer, handleMotionPreference);
+    document.addEventListener('stellar:mdrender', handleRenderedMarkdown);
+    document.addEventListener('visibilitychange', handleVisibility);
+    window.addEventListener('pagehide', resetAll);
+  }
+
+  function destroy() {
+    unmountAll();
+    if (!lifecycleBound) return;
+    lifecycleBound = false;
+    removeMediaListener(reduceMotion, handleMotionPreference);
+    removeMediaListener(finePointer, handleMotionPreference);
+    document.removeEventListener('stellar:mdrender', handleRenderedMarkdown);
+    document.removeEventListener('visibilitychange', handleVisibility);
+    window.removeEventListener('pagehide', resetAll);
+    document.documentElement.style.removeProperty('--card-hover-spotlight-color');
+  }
+
+  stellar.cardHover = {
+    mountAll: mountAll,
+    unmountAll: unmountAll,
+    destroy: destroy
+  };
+})();

package/source/js/plugins/galaxy.js

@@ -168,7 +168,7 @@ void main() {
 }
 `;
 
-  const params = {
+  const defaultParams = {
     focal: [0.5, 0.5],
     rotation: [1.0, 0.0],
     starSpeed: 2.0,
@@ -185,6 +185,69 @@ void main() {
     transparent: true
   };
 
+  function isFiniteNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+  }
+
+  function finiteOrDefault(value, fallback) {
+    return isFiniteNumber(value) ? value : fallback;
+  }
+
+  function nonNegativeOrDefault(value, fallback) {
+    return isFiniteNumber(value) && value >= 0 ? value : fallback;
+  }
+
+  function booleanOrDefault(value, fallback) {
+    return typeof value === 'boolean' ? value : fallback;
+  }
+
+  function pairOrDefault(value, fallback, clampToUnit) {
+    if (!Array.isArray(value) || value.length !== 2 || !isFiniteNumber(value[0]) || !isFiniteNumber(value[1])) {
+      return fallback.slice();
+    }
+    if (clampToUnit) {
+      return value.map(function (item) {
+        return Math.max(0, Math.min(1, item));
+      });
+    }
+    return value.slice();
+  }
+
+  function normalizeHue(value, fallback) {
+    if (!isFiniteNumber(value)) return fallback;
+    return ((value % 360) + 360) % 360;
+  }
+
+  function normalizeParams(value) {
+    const source = value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+    return {
+      focal: pairOrDefault(source.focal, defaultParams.focal, true),
+      rotation: pairOrDefault(source.rotation, defaultParams.rotation, false),
+      starSpeed: nonNegativeOrDefault(source.starSpeed, defaultParams.starSpeed),
+      density: nonNegativeOrDefault(source.density, defaultParams.density),
+      hueShift: normalizeHue(source.hueShift, defaultParams.hueShift),
+      speed: nonNegativeOrDefault(source.speed, defaultParams.speed),
+      glowIntensity: nonNegativeOrDefault(source.glowIntensity, defaultParams.glowIntensity),
+      saturation: nonNegativeOrDefault(source.saturation, defaultParams.saturation),
+      mouseRepulsion: booleanOrDefault(source.mouseRepulsion, defaultParams.mouseRepulsion),
+      twinkleIntensity: nonNegativeOrDefault(source.twinkleIntensity, defaultParams.twinkleIntensity),
+      rotationSpeed: finiteOrDefault(source.rotationSpeed, defaultParams.rotationSpeed),
+      repulsionStrength: nonNegativeOrDefault(source.repulsionStrength, defaultParams.repulsionStrength),
+      autoCenterRepulsion: nonNegativeOrDefault(source.autoCenterRepulsion, defaultParams.autoCenterRepulsion),
+      transparent: booleanOrDefault(source.transparent, defaultParams.transparent)
+    };
+  }
+
+  function readParams(canvas) {
+    const raw = canvas.getAttribute('data-galaxy-params');
+    if (!raw) return normalizeParams({});
+    try {
+      return normalizeParams(JSON.parse(raw));
+    } catch (e) {
+      return normalizeParams({});
+    }
+  }
+
   function createShader(gl, type, source) {
     const shader = gl.createShader(type);
     gl.shaderSource(shader, source);
@@ -235,6 +298,7 @@ void main() {
     const background = canvas.parentElement;
     const interactionTarget = canvas.closest('.wiki-hero') || background;
     if (!background || !interactionTarget) return;
+    const params = readParams(canvas);
 
     let gl;
     try {

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

@@ -9,6 +9,25 @@ utils.js(window.searchConfig.js).then(() => {
   var client = algoliasearch(window.searchConfig.appId, window.searchConfig.apiKey);
   var index = client.initIndex(window.searchConfig.indexName);
 
+  function getCardHoverApi() {
+    if (typeof stellar === 'undefined' || !stellar.cardHover) return null;
+    return stellar.cardHover;
+  }
+
+  function unmountResultCards(root) {
+    var cardHover = getCardHoverApi();
+    if (cardHover && typeof cardHover.unmountAll === 'function') {
+      cardHover.unmountAll(root);
+    }
+  }
+
+  function mountResultCards(root) {
+    var cardHover = getCardHoverApi();
+    if (cardHover && typeof cardHover.mountAll === 'function') {
+      cardHover.mountAll(root);
+    }
+  }
+
   function filterResults(hits, filterPath) {
     if (!filterPath || filterPath === '/') return hits;
     var regex = new RegExp(filterPath);
@@ -26,11 +45,27 @@ utils.js(window.searchConfig.js).then(() => {
         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>`;
+        var titleSpan = document.createElement("span");
+        titleSpan.className = "search-result-title";
+        titleSpan.textContent = title;
+
+        var link = document.createElement("a");
+        link.className = "card-hover card-hover--spotlight";
+        link.href = hit.url;
+
+        var content = document.createElement("p");
+        content.className = "search-result-content";
+        content.innerHTML = contentSnippet;
+
+        link.appendChild(content);
+        item.appendChild(titleSpan);
+        item.appendChild(link);
         resultList.appendChild(item);
       });
     }
+    unmountResultCards(resultArea);
     resultArea.replaceChildren(resultList);
+    mountResultCards(resultList);
   }
 
   inputArea.addEventListener("input", function() {
@@ -39,6 +74,7 @@ utils.js(window.searchConfig.js).then(() => {
 
     if (query.length <= 0) {
       searchWrapper.setAttribute('searching', 'false');
+      unmountResultCards(resultArea);
       resultArea.replaceChildren();
       return;
     }

package/source/js/search/local-search.js

@@ -129,6 +129,25 @@ var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
     });
   }
 
+  function getCardHoverApi() {
+    if (typeof stellar === 'undefined' || !stellar.cardHover) return null;
+    return stellar.cardHover;
+  }
+
+  function unmountResultCards(root) {
+    var cardHover = getCardHoverApi();
+    if (cardHover && typeof cardHover.unmountAll === 'function') {
+      cardHover.unmountAll(root);
+    }
+  }
+
+  function mountResultCards(root) {
+    var cardHover = getCardHoverApi();
+    if (cardHover && typeof cardHover.mountAll === 'function') {
+      cardHover.mountAll(root);
+    }
+  }
+
   // 构建单条搜索结果 DOM
   function buildResultElement(dataTitle, sectionName, secText, secFirst, pairs, href) {
     const li = document.createElement('li');
@@ -140,6 +159,7 @@ var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
     li.appendChild(titleSpan);
 
     const a = document.createElement('a');
+    a.className = 'card-hover card-hover--spotlight';
     a.href = href;
 
     if (sectionName) {
@@ -180,6 +200,7 @@ var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
 
     $input.addEventListener("input", function() {
       var rawValue = this.value.trim();
+      unmountResultCards($resultContent);
       $resultContent.innerHTML = "";
       if (rawValue.length <= 0) {
         $wrapper.setAttribute('searching', 'false');
@@ -283,6 +304,7 @@ var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
 
         $resultContent.innerHTML = '';
         $resultContent.appendChild(ul);
+        mountResultCards(ul);
       }
     });
 

package/source/js/search/shortcut.js

@@ -0,0 +1,39 @@
+(function() {
+  function isSearchShortcut(event) {
+    if (event.defaultPrevented || event.isComposing) return false;
+    if (event.altKey || event.shiftKey) return false;
+    if (!event.metaKey && !event.ctrlKey) return false;
+    return typeof event.key === 'string' && event.key.toLowerCase() === 'k';
+  }
+
+  function isEditableTarget(target) {
+    if (!target || typeof target.closest !== 'function') return false;
+    return target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') !== null;
+  }
+
+  function isNarrowLayout() {
+    var leftbarToggle = document.querySelector('.mobile-only.leftbar-toggle');
+    return !!(leftbarToggle && window.getComputedStyle(leftbarToggle).display !== 'none');
+  }
+
+  function handleShortcut(event) {
+    if (!isSearchShortcut(event)) return;
+
+    var input = document.getElementById('search-input');
+    if (!input || isNarrowLayout()) return;
+    if (event.target !== input && isEditableTarget(event.target)) return;
+
+    event.preventDefault();
+    input.focus();
+  }
+
+  function init() {
+    document.addEventListener('keydown', handleShortcut);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+})();