feat(header): add 叠加组件 with after_html per background item

「顶部多功能组件 → 背景内容」的每个背景项目新增「叠加组件」手风琴,
其中提供「组件下方额外内容」(after_html) 输入框,支持 HTML。

- 后台 schema:slider_item_fields 增加 overlay accordion(sanitize_type html),
  默认值与 PageConfigMetaBox / DisplayPageGroups 的默认项目同步带上空 overlay
- 保存:页面独立配置(page_config 元数据)按项目写入 overlay.after_html,
  沿用 wp_kses_post() 过滤
- 前端:after_html 作为 .slide-overlay-after 覆盖层输出在所属幻灯片内
  (幻灯片是 overflow:hidden 的定位层,放到幻灯片外会被裁掉),
  默认贴底居中、仅其中的链接与表单接收点击
- main.min.css 由 tools/build-public-assets.mjs 重新生成

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed 2026-11-09 19:44:54 +08:00
1 parent 44a03fd5f4
commit c2733017fd
10 files changed
+89 -4

No files matched your search

@@ -48,6 +48,7 @@ namespace {
function get_bloginfo($show = ''): string { return 'Jio'; }
function home_url($path = ''): string { return 'https://example.test/' . ltrim((string) $path, '/'); }
function wp_kses($value, $allowed = []): string { return (string) $value; }
function wp_kses_post($value): string { return (string) $value; }
function jio_is_lazy(string $key): bool { return !empty($GLOBALS['jio_lazy']); }
function jio_get_lazy_thumb(string $size = ''): string { return 'https://example.test/placeholder.svg'; }
function jio_get_lazy_attr(string $key, string $src, string $class = '', string $lazy_src = ''): string {
@@ -64,7 +65,7 @@ namespace {
require_once dirname(__DIR__, 2) . '/inc/helpers/homepage/header-components.php';
$slides = [
['background' => 'https://example.test/slide.jpg', 'link' => ['url' => 'https://example.test/one', 'target' => '_blank', 'text' => 'One'], 'text' => ['title' => 'Title', 'desc' => 'Description'], 'image_layer' => [['image' => 'https://example.test/layer.png', 'free_size' => true, 'align' => 'right', 'parallax' => 40, 'parallax_opacity' => 80, 'parallax_scale' => 110]]],
['background' => 'https://example.test/slide.jpg', 'link' => ['url' => 'https://example.test/one', 'target' => '_blank', 'text' => 'One'], 'text' => ['title' => 'Title', 'desc' => 'Description'], 'overlay' => ['after_html' => '<div class="overlay-cta"><a href="https://example.test/cta">立即查看</a></div>'], 'image_layer' => [['image' => 'https://example.test/layer.png', 'free_size' => true, 'align' => 'right', 'parallax' => 40, 'parallax_opacity' => 80, 'parallax_scale' => 110]]],
['background_video' => 'https://example.test/background.mp4', 'background' => 'https://example.test/poster.jpg'],
['video' => 'https://example.test/content.mp4', 'background' => 'https://example.test/content-poster.jpg'],
['background' => 'https://example.test/pc-only.jpg', 'hide' => 'm'],