hexo-theme-stellar 2.0.0-rc.5 → 2.0.0-rc.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 2.0.0-rc.6
+
+> 发布日期：2026-09-18
+
+本节记录从公开候选 `2.0.0-rc.5` 到 `2.0.0-rc.6` 最终文件树的净变化。
+
+### 新功能
+
+- Wiki Hero 新增视频背景 `hero.background.video`，静音循环自动播放，图片可用作 poster；设置视频时不加载动态效果。
+- Hero 新增滚动视差 `hero.background.parallax`，范围 0–1、默认 0.2，设为 0 关闭位移；图片与视频背景随滚动淡出，减少动态效果偏好下关闭视差位移。
+- 新增 Strands WebGL 背景效果，支持光带配色、形态、发光及玻璃折射参数。
+- Leftbar 新增 `menu_columns`，支持 1–5 列，默认 1；1–2 列显示图标与标题，3–5 列仅显示图标并保留无障碍名称。支持 Profile、Collection、Page 覆盖。
+- 新增 `services.gravatar.base_url`，侧栏与设置页共享访客头像镜像地址，默认 `https://gravatar.com/avatar/`；自定义服务需兼容 SHA-256 并包含 `/avatar/` 路径。
+
+### 修复与改进
+
+- 同集合页面切换等待超过 150ms 时显示加载反馈，完成、失败或取消后清理，快速切换不闪烁。
+- 修复目录活动指示条在 CSS 压缩后高度丢失的问题。
+- 中英文安装说明补充 Windows PowerShell Blueprint 安装命令。
+
+### 升级注意
+
+- 现有 Hero 背景默认启用 0.2 强度视差；如需关闭位移，显式设置 `hero.background.parallax: 0`。
+
+Full Changelog: [2.0.0-rc.5...2.0.0-rc.6](https://github.com/xaoxuu/hexo-theme-stellar/compare/2.0.0-rc.5...2.0.0-rc.6)
+
 ## 2.0.0-rc.5
 
 > 发布日期：2026-09-12

package/README.md

@@ -49,10 +49,18 @@
 
 准备好 Git 和 npm 后，一条命令即可启动交互式蓝图安装器：
 
+macOS / Linux：
+
 ```bash
 sh -c "$(curl -fsSL https://github.com/xaoxuu/hexo-theme-stellar-examples/raw/main/install.sh)"
 ```
 
+Windows PowerShell 7+（`pwsh`）：
+
+```powershell
+& ([scriptblock]::Create((Invoke-RestMethod https://github.com/xaoxuu/hexo-theme-stellar-examples/raw/main/install.ps1)))
+```
+
 安装器会读取示例仓库的 [`blueprints.json`](https://github.com/xaoxuu/hexo-theme-stellar-examples/blob/main/blueprints.json)，展示当前可用的蓝图，并依次确认蓝图、项目目录、依赖安装和创建计划。
 
 ### 从 npm 安装

package/README_EN.md

@@ -49,10 +49,18 @@ Your writing preserves ideas while external data stays current. Remote content,
 
 With Git and npm available, launch the interactive Blueprint installer with one command:
 
+macOS / Linux:
+
 ```bash
 sh -c "$(curl -fsSL https://github.com/xaoxuu/hexo-theme-stellar-examples/raw/main/install.sh)"
 ```
 
+Windows PowerShell 7+ (`pwsh`):
+
+```powershell
+& ([scriptblock]::Create((Invoke-RestMethod https://github.com/xaoxuu/hexo-theme-stellar-examples/raw/main/install.ps1)))
+```
+
 The installer reads the example repository's [`blueprints.json`](https://github.com/xaoxuu/hexo-theme-stellar-examples/blob/main/blueprints.json), presents the available Blueprints, then confirms the Blueprint, project directory, dependency installation, and creation plan.
 
 ### Install from npm

package/_config.yml

@@ -58,6 +58,8 @@ leftbar:
     tagline: null
     # 设置品牌链接。
     href: /
+  # 设置 Leftbar 菜单列数（1–5）；1–2 列显示图标与标题，3–5 列仅显示居中的图标。
+  menu_columns: 1
   # 设置 Leftbar 菜单项；数组会整体替换，空数组表示不显示菜单项。
   menu:
     # 声明默认的博客入口。
@@ -930,6 +932,10 @@ features:
 
 # 配置主题使用的数据服务。
 services:
+  # 配置访客身份头像使用的 Gravatar 服务（侧边栏与设置页共享）。
+  gravatar:
+    # 设置兼容 SHA-256 的头像镜像地址，包含 /avatar/ 路径；末尾斜杠可省略。
+    base_url: https://gravatar.com/avatar/
   # 配置所有动态 Markdown 内容共享的 Marked 客户端。
   markdown:
     # 自定义脚本地址；null 使用默认资源。

package/layout/_partial/cover/wiki_cover.ejs

@@ -13,6 +13,7 @@ function layoutWikiCover() {
   }
   var backgroundConfig = cover.background || {};
   var background = typeof backgroundConfig.image === 'string' && backgroundConfig.image.length > 0 ? backgroundConfig.image : '';
+  var video = typeof backgroundConfig.video === 'string' ? backgroundConfig.video.trim() : '';
   var effect = backgroundConfig.effect || {};
   var preview = cover.preview || {};
   var commands = Array.isArray(preview.commands) ? preview.commands.filter(function (item) {
@@ -25,7 +26,7 @@ function layoutWikiCover() {
   var actions = Array.isArray(cover.actions) ? cover.actions.filter(function (item) {
     return item && item.title && item.url;
   }) : [];
-  var hasEffect = typeof effect.type === 'string' && effect.type.length > 0;
+  var hasEffect = !video && typeof effect.type === 'string' && effect.type.length > 0;
   var isImageBackground = background.length > 0;
   var effectOptions = effect.options && typeof effect.options === 'object' && !Array.isArray(effect.options) ? effect.options : {};
   var effectRuntime = effect.runtime && typeof effect.runtime === 'object' && !Array.isArray(effect.runtime) ? effect.runtime : {};
@@ -37,18 +38,23 @@ function layoutWikiCover() {
   var effectRuntimeJson = escape_html(JSON.stringify(effectRuntime));
   var projectName = cover.projectName;
   var adaptiveTextAttr = '';
-  if (isImageBackground) {
+  if (video) {
+    adaptiveTextAttr = ' data-text-adaptive="split" style="--adaptive-background:#000000"';
+  } else if (isImageBackground) {
     adaptiveTextAttr = ' data-text-adaptive="split" style="--cover-url:url(\'' + escape_html(background.replace(/'/g, '%27')) + '\')"';
   } else if (hasEffect) {
     adaptiveTextAttr = ' data-text-adaptive="split" style="--adaptive-background:' + escape_html(effectBackground) + '"';
   }
 
   el += '<div class="cover-content wiki wiki-hero' + (hasPreview ? '' : ' without-preview') + '">';
-  el += '<div class="wiki-cover-background' + (hasEffect ? ' has-effect' : '') + (respectsReducedMotion ? ' respect-reduced-motion' : '') + (isImageBackground ? ' image' : '') + '"' + (hasEffect ? ' style="--hero-effect-background:' + escape_html(effectBackground) + '"' : '') + ' aria-hidden="true">';
+  el += '<div class="wiki-cover-background' + (hasEffect ? ' has-effect' : '') + (respectsReducedMotion ? ' respect-reduced-motion' : '') + (isImageBackground ? ' image' : '') + (video ? ' has-video' : '') + '" data-parallax="' + escape_html(String(backgroundConfig.parallax)) + '"' + (hasEffect ? ' style="--hero-effect-background:' + escape_html(effectBackground) + '"' : '') + ' aria-hidden="true">';
   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 (video) {
+    el += '<video class="wiki-cover-background-video" src="' + escape_html(video) + '"' + (isImageBackground ? ' poster="' + escape_html(background) + '"' : '') + ' autoplay muted loop playsinline preload="metadata" disablepictureinpicture tabindex="-1"></video>';
+  }
   if (hasEffect) {
     el += '<canvas data-hero-effect="' + escape_html(effect.type) + '" data-effect-resource="' + effectResourceJson + '" data-effect-options="' + effectOptionsJson + '" data-effect-runtime="' + effectRuntimeJson + '"></canvas>';
   }

package/layout/_partial/primitives/navigation.ejs

@@ -5,8 +5,9 @@ if (!allowedPlacements.includes(placement)) {
 }
 var navigationItems = Array.isArray(entries) ? entries : []
 var navigationBody = partial('_partial/components/collection', {options: {
-  layout: 'list',
-  variant: 'nav',
+  layout: placement === 'leftbar' && typeof columns !== 'undefined' && columns > 1 ? 'grid' : 'list',
+  columns: typeof columns !== 'undefined' ? columns : 1,
+  variant: placement === 'leftbar' && typeof columns !== 'undefined' && columns > 2 ? 'icon' : 'nav',
   items: navigationItems
 }})
 var html = ''

package/layout/_partial/regions/widgets.ejs

@@ -69,7 +69,7 @@ function stack(items, zone, options) {
     <% if (leftbarBrandBody.trim().length > 0) { %><div class="widget-instance widget-instance--brand" data-widget-id="leftbar:fixed:brand" data-presentation="leftbar" data-leftbar-rail><%- leftbarBrandBody %></div><% } %>
   </header>
   <div class="site-region__body site-region__zone site-region__zone--body">
-    <% if (menuItems.length > 0) { %><div class="widget-instance widget-instance--menu" data-widget-id="leftbar:fixed:menu" data-presentation="leftbar" data-leftbar-rail><%- partial('../sidebar/menu', {where: 'leftbar', menu: menuItems, activeMenu: activeViewModel?.item.navigation.menu, viewModel: activeViewModel}) %></div><% } %>
+    <% if (menuItems.length > 0) { %><div class="widget-instance widget-instance--menu" data-widget-id="leftbar:fixed:menu" data-presentation="leftbar" data-leftbar-rail><%- partial('../sidebar/menu', {where: 'leftbar', menu: menuItems, menuColumns: regionState.menuColumns, activeMenu: activeViewModel?.item.navigation.menu, viewModel: activeViewModel}) %></div><% } %>
     <%- stack(regionWidgets, 'body') %>
   </div>
   <footer class="site-region__footer">

package/layout/_partial/sidebar/menu.ejs

@@ -9,6 +9,7 @@ function layoutDiv() {
     var pathMenu = menu_active_by_path(page.path, menuItems)
     if (pathMenu != null) currentMenu = pathMenu
   }
+  var iconLayout = where === 'leftbar' && typeof menuColumns !== 'undefined' && menuColumns > 2
   var entries = []
   for (var menuItem of menuItems) {
     if (menuItem == null || menuItem.id == null || menuItem.url == null || menuItem.title == null) {
@@ -18,6 +19,7 @@ function layoutDiv() {
       href: pretty_url(menuItem.url),
       title: __(menuItem.title),
       icon: menuItem.icon,
+      attrs: iconLayout ? {'aria-label': __(menuItem.title)} : {},
       theme: menuItem.accent,
       active: menuItem.id == currentMenu,
       className: menuItem.accent?.length > 0 ? 'is-themed' : ''
@@ -25,6 +27,7 @@ function layoutDiv() {
   }
   return partial('_partial/primitives/navigation', {
     placement: ['main', 'topbar', 'rightbar'].includes(where) ? where : 'leftbar',
+    columns: where === 'leftbar' && typeof menuColumns !== 'undefined' ? menuColumns : 1,
     entries: entries
   })
 }

package/legal/THIRD-PARTY-NOTICES.md

@@ -5,10 +5,10 @@ This project includes or adapts portions of the following third-party software.
 ## React Bits
 
 - Project: [React Bits](https://github.com/DavidHDev/react-bits)
-- Components: Ferrofluid, Galaxy and Spotlight Card
+- Components: Ferrofluid, Galaxy, Strands and Spotlight Card
 - License: MIT
 - Copyright: Copyright (c) 2026 David Haz
-- Usage: Adapted for the Wiki Ferrofluid and Galaxy WebGL backgrounds and Card Hover spotlight layer.
+- Usage: Adapted for the Wiki Ferrofluid, Galaxy and Strands WebGL backgrounds and Card Hover spotlight layer.
 
 ### MIT License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.6",
   "description": "An all-in-one Hexo theme for blogs, project documentation, knowledge bases, series, and notebooks.",
   "main": "package.json",
   "scripts": {

package/scripts/lib/client-assets.js

@@ -22,6 +22,7 @@ function clientAssets(hexo) {
     'default:settings', 'copy:copy', 'weibo:repeat', 'weibo:like'];
   const clientIcons = Object.fromEntries(keys.map(key => [key, (icons[key] || '').replace(/<!--[\s\S]*?-->/g, '')]));
   const services = JSON.parse(JSON.stringify(INTERNAL.assets.services));
+  services.gravatar = { baseUrl: config.services.gravatar.baseUrl };
   services.siteinfo.api = resolveServiceProvider(config.services.siteInfo)?.endpoint || null;
   const provider = config.search.provider;
   const search = provider ? { service: provider === 'local' ? 'local_search' : provider } : null;

package/scripts/lib/config-schema.js

@@ -256,11 +256,11 @@ function validateEffectOptions(node, definition, options, source, path, issues)
       issues.push(issue("invalid_value", source, optionPath, valueType(value), "six-digit hexadecimal color", node.migration));
     } else if (rule.type === "hex_color_array" && (
       !Array.isArray(value)
-      || value.length < 1
+      || value.length < (rule.minItems ?? 1)
       || value.length > 8
       || value.some(item => typeof item !== "string" || !/^#?[a-f\d]{6}$/i.test(item))
     )) {
-      issues.push(issue("invalid_value", source, optionPath, valueType(value), "one to eight six-digit hexadecimal colors", node.migration));
+      issues.push(issue("invalid_value", source, optionPath, valueType(value), `${rule.minItems ?? 1} to eight six-digit hexadecimal colors`, node.migration));
     }
   }
 }

package/scripts/lib/contribution-registry.js

@@ -139,6 +139,20 @@ const CONTRIBUTIONS = defineContributions([
       });
     }
   },
+  {
+    id: "hero-parallax",
+    scope: "region",
+    kind: "feature",
+    entry: runtimeEntry("/js/runtime/extensions/hero-parallax.js"),
+    resources: [],
+    activation: selector(".wiki-hero"),
+    schema: null,
+    i18n: null,
+    docs: { category: "Components", path: "docs/knowledge/03-内容系统/wiki-docs.md" },
+    tests: [RUNTIME_TEST, RUNTIME_CONSUMPTION_TEST],
+    defaultsOwner: null,
+    project: () => configResult({})
+  },
   {
     id: "hero-effect",
     scope: "region",

package/scripts/lib/hero-effect-registry.js

@@ -32,7 +32,7 @@ function optionMatches(rule, value) {
   if (rule.type === "hex_color") return typeof value === "string" && /^#?[a-f\d]{6}$/i.test(value);
   if (rule.type === "hex_color_array") {
     return Array.isArray(value)
-      && value.length >= 1
+      && value.length >= (rule.minItems ?? 1)
       && value.length <= 8
       && value.every(item => typeof item === "string" && /^#?[a-f\d]{6}$/i.test(item));
   }
@@ -91,6 +91,55 @@ const LIGHT_RAYS_ORIGINS = Object.freeze([
 ]);
 
 const DEFINITIONS = defineHeroEffects([
+  {
+    id: "strands",
+    label: "Strands",
+    module: INTERNAL.assets.heroEffects.strands,
+    options: {
+      colors: { type: "hex_color_array", minItems: 0 },
+      count: { type: "number" },
+      speed: { type: "number" },
+      amplitude: { type: "number" },
+      waviness: { type: "number" },
+      thickness: { type: "number" },
+      glow: { type: "number" },
+      taper: { type: "number" },
+      spread: { type: "number" },
+      hueShift: { type: "number" },
+      intensity: { type: "number" },
+      saturation: { type: "number" },
+      opacity: { type: "number" },
+      scale: { type: "number" },
+      glass: { type: "boolean" },
+      refraction: { type: "number" },
+      dispersion: { type: "number" },
+      glassSize: { type: "number" }
+    },
+    defaults: {
+      colors: ["#F97316", "#7C3AED", "#06B6D4"],
+      count: 3,
+      speed: 0.5,
+      amplitude: 1,
+      waviness: 1,
+      thickness: 0.7,
+      glow: 2.6,
+      taper: 3,
+      spread: 1,
+      hueShift: 0,
+      intensity: 0.6,
+      saturation: 1.5,
+      opacity: 1,
+      scale: 1.5,
+      glass: false,
+      refraction: 1,
+      dispersion: 1,
+      glassSize: 1
+    },
+    presentation() {
+      return { background: "#000000" };
+    }
+  },
+
   {
     id: "galaxy",
     label: "Galaxy",

package/scripts/lib/internal-constants.js

@@ -57,6 +57,7 @@ module.exports = deepFreeze({
       settings: "/js/runtime/extensions/settings.js"
     },
     heroEffects: {
+      strands: "/js/runtime/hero-effects/strands.js",
       ferrofluid: "/js/runtime/hero-effects/ferrofluid.js",
       galaxy: "/js/runtime/hero-effects/galaxy.js",
       lightRays: "/js/runtime/hero-effects/light-rays.js"

package/scripts/lib/models/wiki.js

@@ -7,6 +7,7 @@ const { firstContentImage } = require("../seo");
 const { caption } = require("../caption");
 const { wikiReadmeHtml } = require("../wiki_readme");
 const { filterShareServices } = require("../share-services");
+const { COLLECTION_CONFIG_SCHEMA } = require("../../schema/content-config-schema");
 const { projectHeroEffect } = require("../hero-effect-registry");
 const { normalizeThemeComments } = require("../comments");
 const { articleFooterDefaults, articlePresentationDefaults, collectionFooterDefaults, requireContentConfig } = require("../content-defaults");
@@ -14,6 +15,7 @@ const { cloneValue, deepFreeze, pick, mergeConfig, toContentNavigation, collecti
 
 function heroBackground(value) {
   const background = cloneValue(value || {});
+  background.parallax ??= COLLECTION_CONFIG_SCHEMA.properties.hero.properties.background.properties.parallax.default.value;
   if (background.effect) background.effect = projectHeroEffect(background.effect);
   return background;
 }

package/scripts/lib/regions.js

@@ -61,7 +61,10 @@ function resolveRegion(layers, region, options = {}) {
     result.brand = false;
     result.menu = [];
   }
-  if (region === "leftbar") result.footer = { actions: [] };
+  if (region === "leftbar") {
+    result.menuColumns = 1;
+    result.footer = { actions: [] };
+  }
   for (const layer of layers) {
     const current = regionLayer(layer?.[region]);
     if (!current) continue;
@@ -72,6 +75,9 @@ function resolveRegion(layers, region, options = {}) {
     if (["topbar", "leftbar"].includes(region) && Array.isArray(current.menu)) {
       result.menu = current.menu.map(clone);
     }
+    if (region === "leftbar" && current.menuColumns != null) {
+      result.menuColumns = current.menuColumns;
+    }
     if (region === "leftbar" && Array.isArray(current.footer?.actions)) {
       result.footer.actions = current.footer.actions.map(clone);
     }
@@ -112,6 +118,7 @@ function resolveRegions(options = {}) {
         menu: clone(state.menu)
       } : {}),
       ...(region === "leftbar" ? {
+        menuColumns: state.menuColumns,
         defaultState: options.defaultState || "expanded",
         footer: clone(state.footer)
       } : {})

package/scripts/schema/config-rules.js

@@ -156,6 +156,7 @@ const CONFIG_RULES = Object.freeze([
   ["leftbar.default_state", { values: ["expanded", "collapsed"] }],
   ["leftbar.enabled", { type: ["boolean"] }],
   ["leftbar.brand", regionBrand(leftbarBrandProperties)],
+  ["leftbar.menu_columns", { minimum: 1, maximum: 5, validator: "non_negative_integer" }],
   ["leftbar.menu", { validator: "menu_items", items: menuItem }],
   ["leftbar.footer.actions", { validator: "footer_actions", items: footerAction }],
   ["leftbar.widgets", { items: widgetItems }],
@@ -169,6 +170,7 @@ const CONFIG_RULES = Object.freeze([
   ["profiles.*.topbar.widgets", { type: ["array", "null"], defaultValue: null, items: widgetItems }],
   ["profiles.*.leftbar.enabled", { type: ["boolean", "null"], defaultValue: null }],
   ["profiles.*.leftbar.brand", inheritedRegionBrand(leftbarBrandProperties)],
+  ["profiles.*.leftbar.menu_columns", { type: ["number", "null"], defaultValue: null, minimum: 1, maximum: 5, validator: "nullable_non_negative_integer" }],
   ["profiles.*.leftbar.menu", { type: ["array", "null"], defaultValue: null, validator: "menu_items", items: menuItem }],
   ["profiles.*.leftbar.footer.actions", { type: ["array", "null"], defaultValue: null, validator: "footer_actions", items: footerAction }],
   ["profiles.*.leftbar.widgets", { type: ["array", "null"], defaultValue: null, items: widgetItems }],
@@ -274,6 +276,7 @@ const CONFIG_RULES = Object.freeze([
   ["services.contributors.provider", { values: ["github"] }],
   ["services.contributors.github.repositories", { validator: "contributor_repositories", items: contributorRepository }],
   ["services.github.*", { validator: "absolute_http_url" }],
+  ["services.gravatar.base_url", { validator: "absolute_http_url" }],
   ["services.github_card.provider", { values: ["github_readme_stats"] }],
   ["services.github_card.github_readme_stats", { runtimeKey: "github_readme_stats" }],
   ["services.github_card.github_readme_stats.endpoint", { type: ["string"], validator: "absolute_http_url" }],

package/scripts/schema/content-config-rules.js

@@ -127,6 +127,7 @@ const CONTENT_OVERRIDE_DEFINITIONS = [
   ["leftbar.brand.ghuser", ["string", "null"], literal(null)],
   ["leftbar.brand.search", ["boolean", "null"], literal(null)],
   ["leftbar.brand.href", ["string", "null"], literal(null)],
+  ["leftbar.menu_columns", ["number", "null"], literal(null), { minimum: 1, maximum: 5 }],
   ["leftbar.menu", ["array", "null"], literal(null), { items: MENU_ITEMS }],
   ["leftbar.footer", "object", literal({}), { boundary: "sealed" }],
   ["leftbar.footer.actions", ["array", "null"], literal(null), { items: ACTION_ITEMS }],
@@ -172,6 +173,8 @@ const COLLECTION_TARGET_DEFINITIONS = [
   ["hero.enabled", ["boolean", "null"], literal(null)],
   ["hero.background", "object", literal({}), { boundary: "sealed" }],
   ["hero.background.image", ["string", "null"], literal(null)],
+  ["hero.background.video", ["string", "null"], literal(null)],
+  ["hero.background.parallax", "number", literal(0.2), { minimum: 0, maximum: 1 }],
   ["hero.background.effect", ["object", "null"], literal(null), { boundary: "registered_schema" }],
   ["hero.preview", ["object", "null"], literal(null), { boundary: "sealed" }],
   ["hero.preview.type", ["string", "null"], literal(null), { values: ["terminal", "image"] }],

package/scripts/schema/content-config-schema.js

@@ -166,6 +166,7 @@ function targetNode(target) {
     ...(target.boundary === "sealed" ? { sealed: true } : {}),
     ...(target.values ? { values: clone(target.values) } : {}),
     ...(target.minimum !== undefined ? { minimum: target.minimum } : {}),
+    ...(target.maximum !== undefined ? { maximum: target.maximum } : {}),
     ...(target.exclusiveMinimum !== undefined ? { exclusiveMinimum: target.exclusiveMinimum } : {})
   };
 }
@@ -271,6 +272,7 @@ function decorateSharedSchemas(schema) {
     schema.properties[region].properties.brand.properties.href.validator = "nullable_safe_navigation_url";
     schema.properties[region].properties.menu.validator = "menu_items";
   }
+  schema.properties.leftbar.properties.menu_columns.validator = "nullable_non_negative_integer";
   schema.properties.leftbar.properties.footer.properties.actions.validator = "footer_actions";
 
   const effect = schema.properties.hero?.properties.background?.properties.effect;

package/scripts/schema/model-schema.js

@@ -206,6 +206,7 @@ function regionConfigSchemas(factory) {
       schema.type = ["object", "boolean", "null"];
       return schema;
     })(),
+    menuColumns: field("number", { example: 1 }),
     menu: array(menuItem, { example: [] }),
     footer: object({
       actions: array(actionItem, { example: [] })
@@ -253,6 +254,8 @@ function heroSchema(factory, options = {}) {
     enabled: field("boolean", { example: true }),
     background: object({
       image: field("string", { example: "/hero.webp", consumers: options.pathConsumers }),
+      video: field("string", { example: "/hero.mp4", consumers: options.pathConsumers }),
+      parallax: field("number", { example: 0.2 }),
       effect: object({
         type: field("string", { example: "galaxy" }),
         options: field("object", {

package/source/css/_common/loading.styl

@@ -41,3 +41,20 @@ svg.loading
 .article-footer
   .loading-wrap
     background: none
+
+.loading-wrap.navigation-loading
+  position: fixed
+  top: calc(env(safe-area-inset-top, 0px) + 1rem)
+  left: 50%
+  transform: translateX(-50%)
+  z-index: 1000
+  display: flex
+  align-items: center
+  gap: .5rem
+  padding: .5rem 1rem
+  background: var(--card)
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .12)
+  pointer-events: none
+  .lazy-icon
+    flex-shrink: 0
+    margin: 0

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

@@ -78,6 +78,9 @@
     inset: 0
     overflow: hidden
     background: var(--background)
+    &.has-parallax
+      top: var(--hero-parallax-inset, 0%)
+      bottom: var(--hero-parallax-inset, 0%)
     &.image
       .wiki-cover-background-image,
       .wiki-cover-background-blur
@@ -101,6 +104,23 @@
         inset: 0
         pointer-events: none
         background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--background) 100%)
+    &.has-video
+      background: #000000
+      .wiki-cover-background-video
+        display: block
+        position: absolute
+        z-index: 2
+        inset: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+        pointer-events: none
+      .wiki-cover-background-overlay
+        position: absolute
+        z-index: 3
+        inset: 0
+        pointer-events: none
+        background: rgba(black, .15)
     &.has-effect
       &:not(.image)
         background: var(--hero-effect-background, #000000)

package/source/css/_components/sidebar/nav-area.styl

@@ -9,3 +9,13 @@
   .menu
     .ui-collection__item
       font-size: $fs-15
+
+.site-region--leftbar .widget-instance--menu .ui-collection[data-layout='grid']
+  --ui-grid-min: 0px
+  &[data-variant='icon']
+    .ui-collection__item
+      padding-inline: 0
+    .ui-collection__content
+      display: none
+    .ui-collection__initial
+      display: block

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

@@ -38,7 +38,7 @@
     top: 4px
     left: 0
     width: 4px
-    height: unquote('max(0px, calc(var(--toc-active-height, 8px) - 8px))')
+    height: calc(var(--toc-active-height, 8px) - 8px)
     border-radius: 4px
     background: var(--theme)
     opacity: var(--toc-active-opacity, 0)

package/source/js/profile.js

@@ -2,7 +2,7 @@
   var SUPPORTED_PROVIDERS = ['artalk', 'waline', 'twikoo'];
   var SETTINGS_ICON = 'default:settings';
   var PROFILE_ICON = 'default:profile';
-  var GRAVATAR_BASE_URL = 'https://gravatar.com/avatar/';
+  var GRAVATAR_BASE_URL = window.stellarClientData.ctx.services.gravatar.baseUrl.replace(/\/+$/, '') + '/';
   var localStore = null;
   var sessionStore = null;
   var gravatarHashes = new Map();

package/source/js/runtime/extensions/hero-parallax.js

@@ -0,0 +1,70 @@
+const SELECTOR = '.wiki-hero';
+
+export function mount(root, context = {}) {
+  const heroes = [...root.querySelectorAll(SELECTOR)];
+  if (root.matches?.(SELECTOR)) heroes.unshift(root);
+  const cleanups = heroes.map(hero => {
+    const background = hero.querySelector('.wiki-cover-background');
+    if (!background?.matches('.image, .has-video, .has-effect')) return () => {};
+    const configuredStrength = Number(background.getAttribute('data-parallax'));
+    const strength = Number.isFinite(configuredStrength) ? Math.max(0, Math.min(1, configuredStrength)) : 0;
+    const fades = background.matches('.has-video, .image:not(.has-effect)');
+    const documentRef = hero.ownerDocument;
+    const windowRef = documentRef.defaultView;
+    const motion = windowRef.matchMedia('(prefers-reduced-motion: reduce)');
+    let frame = null;
+    let visible = true;
+
+    function update() {
+      frame = null;
+      const rect = hero.getBoundingClientRect();
+      if (fades) {
+        const opacity = rect.height > 0 ? Math.max(0, Math.min(1, (rect.top + rect.height) / rect.height)) : 1;
+        background.style.opacity = String(opacity);
+      }
+      if (motion.matches || strength === 0) {
+        background.style.removeProperty('transform');
+        background.style.removeProperty('--hero-parallax-inset');
+        background.classList.remove('has-parallax');
+        return;
+      }
+      background.style.setProperty('--hero-parallax-inset', `${-strength * 100}%`);
+      background.classList.add('has-parallax');
+      const offset = Math.max(-rect.height * strength, Math.min(rect.height * strength, -rect.top * strength));
+      background.style.transform = `translate3d(0, ${offset}px, 0)`;
+    }
+    function schedule() {
+      if (frame === null && visible && !documentRef.hidden) frame = windowRef.requestAnimationFrame(update);
+    }
+    const observer = new windowRef.IntersectionObserver(entries => {
+      visible = entries[0].isIntersecting;
+      // Commit the endpoint even when a large scroll moves the Hero offscreen.
+      if (frame !== null) windowRef.cancelAnimationFrame(frame);
+      update();
+    });
+    observer.observe(hero);
+    const resize = new windowRef.ResizeObserver(schedule);
+    resize.observe(hero);
+    windowRef.addEventListener('scroll', schedule, { passive: true });
+    windowRef.addEventListener('resize', schedule);
+    documentRef.addEventListener('visibilitychange', schedule);
+    motion.addEventListener('change', schedule);
+    update();
+    return () => {
+      if (frame !== null) windowRef.cancelAnimationFrame(frame);
+      observer.disconnect();
+      resize.disconnect();
+      windowRef.removeEventListener('scroll', schedule);
+      windowRef.removeEventListener('resize', schedule);
+      documentRef.removeEventListener('visibilitychange', schedule);
+      motion.removeEventListener('change', schedule);
+      background.style.removeProperty('transform');
+      background.style.removeProperty('--hero-parallax-inset');
+      if (fades) background.style.removeProperty('opacity');
+      background.classList.remove('has-parallax');
+    };
+  });
+  const cleanup = () => cleanups.forEach(dispose => dispose());
+  context.onCleanup?.(cleanup);
+  return cleanup;
+}

package/source/js/runtime/extensions/partial-navigation.js

@@ -79,6 +79,20 @@ export function mount(root, context) {
   }
   async function navigate(url, { pop = false, position } = {}) {
     const request = queue.begin();
+    const loading = document.createElement('div');
+    loading.className = 'loading-wrap navigation-loading';
+    loading.setAttribute('role', 'status');
+    const icon = document.createElement('div');
+    icon.className = 'lazy-icon';
+    icon.setAttribute('aria-hidden', 'true');
+    loading.append(icon);
+    // Fast navigations should finish without flashing a loading indicator.
+    const loadingTimer = setTimeout(() => document.body.append(loading), 150);
+    const clearLoading = () => {
+      clearTimeout(loadingTimer);
+      loading.remove();
+    };
+    request.signal.addEventListener('abort', clearLoading, { once: true });
     let timedOut = false;
     const timeout = setTimeout(() => { timedOut = true; request.abort(); }, 15000);
     if (!pop) remember();
@@ -134,7 +148,10 @@ export function mount(root, context) {
       });
     } catch (error) {
       if ((!request.signal.aborted || timedOut) && !lifetime.signal.aborted) fallback(url, pop);
-    } finally { clearTimeout(timeout); }
+    } finally {
+      clearTimeout(timeout);
+      clearLoading();
+    }
   }
 
   document.addEventListener('click', event => {

package/source/js/runtime/hero-effects/strands.js

@@ -0,0 +1,302 @@
+/* Adapted from React Bits Strands (MIT, Copyright (c) 2026 David Haz).
+ * See legal/THIRD-PARTY-NOTICES.md. Native WebGL2 renderer for Stellar. */
+
+const VERT = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const FRAG = `#version 300 es
+precision highp float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec3 uColors[8];
+uniform int uColorCount;
+uniform int uStrandCount;
+uniform float uSpeed;
+uniform float uAmplitude;
+uniform float uWaviness;
+uniform float uThickness;
+uniform float uGlow;
+uniform float uTaper;
+uniform float uSpread;
+uniform float uHueShift;
+uniform float uIntensity;
+uniform float uOpacity;
+uniform float uScale;
+uniform float uSaturation;
+
+out vec4 fragColor;
+
+const float PI = 3.14159265;
+
+vec3 spectrum(float t) {
+  return 0.5 + 0.5 * cos(2.0 * PI * (t + vec3(0.00, 0.33, 0.67)));
+}
+
+vec3 samplePalette(float t) {
+  t = fract(t);
+  float scaled = t * float(uColorCount);
+  int idx = int(floor(scaled));
+  float blend = fract(scaled);
+  int nextIdx = idx + 1;
+  if (nextIdx >= uColorCount) nextIdx = 0;
+  return mix(uColors[idx], uColors[nextIdx], blend);
+}
+
+vec3 strandColor(float t) {
+  if (uColorCount > 0) return samplePalette(t);
+  return spectrum(t);
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution) / uResolution.y;
+  uv /= max(uScale, 0.0001);
+
+  float e = 0.06 + uIntensity * 0.94;
+  float env = pow(max(cos(uv.x * PI * 1.3), 0.0), uTaper);
+
+  vec3 col = vec3(0.0);
+
+  for (int i = 0; i < 12; i++) {
+    if (i >= uStrandCount) break;
+
+    float fi = float(i);
+    float ph = fi * 1.7 * uSpread;
+    float freq = (2.0 + fi * 0.35) * uWaviness;
+    float spd = 1.4 + fi * 1.2;
+
+    float tt = uTime * uSpeed;
+    float w = sin(uv.x * freq + tt * spd + ph) * 0.60
+            + sin(uv.x * freq * 1.1 - tt * spd * 0.7 + ph * 1.7) * 0.40;
+
+    float amp = (0.1 + 0.02 * e) * env * uAmplitude;
+    float y = w * amp;
+
+    float d = abs(uv.y - y);
+    float thick = (0.001 + 0.05 * e) * (0.35 + env) * uThickness;
+    float g = thick / (d + thick * 0.45);
+    g = g * g;
+
+    float h = fi / float(uStrandCount) + uv.x * 0.30 + uTime * 0.04 + uHueShift;
+    col += strandColor(h) * g * env;
+  }
+
+  col *= 0.45 + 0.7 * e;
+  col = 1.0 - exp(-col * uGlow);
+
+  float gray = dot(col, vec3(0.2126, 0.7152, 0.0722));
+  col = max(mix(vec3(gray), col, uSaturation), 0.0);
+
+  float lum = max(max(col.r, col.g), col.b);
+  float alpha = clamp(lum, 0.0, 1.0) * uOpacity;
+
+  fragColor = vec4(col * uOpacity, alpha);
+}
+`;
+
+const GLASS_FRAG = `#version 300 es
+precision highp float;
+
+uniform sampler2D uScene;
+uniform vec2 uResolution;
+uniform float uRadius;
+uniform float uRefraction;
+uniform float uDispersion;
+
+out vec4 fragColor;
+
+vec2 toUv(vec2 p) {
+  return p * (uResolution.y / uResolution) + 0.5;
+}
+
+void main() {
+  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / uResolution.y;
+  float d = length(p);
+  float r = uRadius;
+
+  float edge = fwidth(d) * 1.5;
+  float mask = 1.0 - smoothstep(r - edge, r + edge, d);
+  if (mask <= 0.0) {
+    fragColor = vec4(0.0);
+    return;
+  }
+
+  // sphere height: 0 at the rim, 1 at the center
+  float z = sqrt(max(r * r - d * d, 0.0)) / r;
+  float nd = d / r; // 0 at the center, 1 at the rim
+
+  // refraction is confined to a narrow band near the rim; the rest stays undistorted
+  vec2 dir = d > 0.0 ? p / d : vec2(0.0);
+  float lens = smoothstep(0.85, 1.0, nd) * pow(nd, 6.0);
+  vec2 offset = -dir * lens * uRefraction * 0.15;
+  vec2 disp = -dir * lens * uDispersion * 0.012;
+
+  vec3 light;
+  light.r = texture(uScene, toUv(p + offset - disp)).r;
+  light.g = texture(uScene, toUv(p + offset)).g;
+  light.b = texture(uScene, toUv(p + offset + disp)).b;
+
+  // neutral fresnel rim (no color tint so the glass stays clear)
+  float fres = pow(1.0 - z, 3.0);
+  vec3 rim = vec3(1.0) * fres * 0.18;
+
+  // specular highlight from the upper-left
+  vec2 lightDir = normalize(vec2(-0.55, 0.6));
+  float spec = pow(max(dot(p / max(r, 1e-4), lightDir), 0.0), 6.0);
+  spec *= (1.0 - smoothstep(r * 0.55, r, d));
+
+  vec3 emissive = light + rim + vec3(spec) * 0.4;
+  float emissiveA = clamp(max(max(emissive.r, emissive.g), emissive.b), 0.0, 1.0);
+
+  // almost clear glass body: only a faint neutral darkening, mostly near the rim
+  float bodyA = 0.05 + fres * 0.05;
+
+  // composite emissive light over the clear body (premultiplied)
+  float outA = emissiveA + bodyA * (1.0 - emissiveA);
+  vec3 outRGB = emissive;
+
+  outRGB *= mask;
+  outA *= mask;
+
+  fragColor = vec4(outRGB, outA);
+}
+`;
+
+export function createRenderer(canvas, options, defaults) {
+  if (!canvas) return null;
+  let gl;
+  try {
+    gl = canvas.getContext('webgl2', { alpha: true, premultipliedAlpha: true, antialias: false });
+  } catch {
+    return null;
+  }
+  if (!gl) return null;
+  const params = { ...defaults, ...options };
+  const programs = [];
+  const shaders = [];
+  let buffer;
+  let texture;
+  let framebuffer;
+  let destroyed = false;
+
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (buffer) gl.deleteBuffer(buffer);
+    if (texture) gl.deleteTexture(texture);
+    if (framebuffer) gl.deleteFramebuffer(framebuffer);
+    programs.forEach(program => gl.deleteProgram(program));
+    shaders.forEach(shader => gl.deleteShader(shader));
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
+  }
+
+  function programFor(fragment) {
+    const program = gl.createProgram();
+    programs.push(program);
+    for (const [type, source] of [[gl.VERTEX_SHADER, VERT], [gl.FRAGMENT_SHADER, fragment]]) {
+      const shader = gl.createShader(type);
+      shaders.push(shader);
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
+      gl.attachShader(program, shader);
+    }
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));
+    return program;
+  }
+
+  try {
+    const scene = programFor(FRAG);
+    const glass = params.glass ? programFor(GLASS_FRAG) : null;
+    buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    function use(program) {
+      gl.useProgram(program);
+      const position = gl.getAttribLocation(program, 'position');
+      gl.enableVertexAttribArray(position);
+      gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    }
+    function scalar(program, name, value) {
+      gl.uniform1f(gl.getUniformLocation(program, name), value);
+    }
+    use(scene);
+    const palette = params.colors.slice(0, 8);
+    const colors = Array.from({ length: 8 }, (_, index) => {
+      const hex = (palette[index] || palette[palette.length - 1] || '#ffffff').replace(/^#/, '');
+      return [0, 2, 4].map(offset => parseInt(hex.slice(offset, offset + 2), 16) / 255);
+    }).flat();
+    gl.uniform3fv(gl.getUniformLocation(scene, 'uColors[0]'), colors);
+    gl.uniform1i(gl.getUniformLocation(scene, 'uColorCount'), palette.length);
+    gl.uniform1i(gl.getUniformLocation(scene, 'uStrandCount'), Math.min(12, Math.max(1, Math.round(params.count))));
+    for (const name of ['speed', 'amplitude', 'waviness', 'thickness', 'glow', 'taper', 'spread', 'hueShift', 'intensity', 'opacity', 'scale', 'saturation']) {
+      let value = params[name];
+      if (name !== 'speed' && name !== 'hueShift') value = Math.max(0, value);
+      if (name === 'thickness' || name === 'scale') value = Math.max(0.0001, value);
+      if (name === 'opacity') value = Math.min(1, value);
+      scalar(scene, `u${name[0].toUpperCase()}${name.slice(1)}`, value);
+    }
+    const timeLocation = gl.getUniformLocation(scene, 'uTime');
+    if (glass) {
+      use(glass);
+      scalar(glass, 'uRadius', Math.max(0.0001, 0.46 * params.glassSize));
+      scalar(glass, 'uRefraction', params.refraction);
+      scalar(glass, 'uDispersion', params.dispersion);
+      gl.uniform1i(gl.getUniformLocation(glass, 'uScene'), 0);
+      texture = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      framebuffer = gl.createFramebuffer();
+    }
+    let width = 0;
+    let height = 0;
+    return Object.freeze({
+      pointer: false,
+      resize(rect, devicePixelRatio) {
+        const dpr = Math.min(devicePixelRatio || 1, 2);
+        const nextWidth = Math.max(1, Math.round(rect.width * dpr));
+        const nextHeight = Math.max(1, Math.round(rect.height * dpr));
+        if (width === nextWidth && height === nextHeight) return;
+        width = canvas.width = nextWidth;
+        height = canvas.height = nextHeight;
+        gl.viewport(0, 0, width, height);
+        for (const program of [scene, glass].filter(Boolean)) {
+          use(program);
+          gl.uniform2f(gl.getUniformLocation(program, 'uResolution'), width, height);
+        }
+        if (glass) {
+          gl.bindTexture(gl.TEXTURE_2D, texture);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+          gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+          gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        }
+      },
+      render(time) {
+        if (destroyed) return;
+        use(scene);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, glass ? framebuffer : null);
+        gl.uniform1f(timeLocation, time * 0.001);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+        if (glass) {
+          use(glass);
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+          gl.bindTexture(gl.TEXTURE_2D, texture);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+        }
+      },
+      destroy
+    });
+  } catch {
+    destroy();
+    return null;
+  }
+}