TikTok 画廊 TikTokGallery

概览

TikTokGallery 自动加载 TikTok 嵌入脚本，以网格形式展示多个 TikTok 视频。适合用于展示品牌在 TikTok 上的内容或用户生成内容。

使用方法

import { TikTokGallery } from '@goenhance/cms-ui';

const Example = () => (
  <TikTokGallery
    title="TikTok 精选"
    videoLinks={[
      "https://www.tiktok.com/@user/video/1234567890",
      "https://www.tiktok.com/@user/video/0987654321"
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域标题
videoLinks	string[]	-	TikTok 视频链接数组

特性

• 自动脚本管理：自动加载 TikTok 嵌入脚本，避免重复加载。
• 响应式网格：小屏单列，中屏双列，大屏三列。
• 视频 ID 提取：自动从链接中提取视频 ID。

---

主题覆盖

可覆盖变量

类名：mewx-cms-embed

变量名	用途	默认值
--mewx-cms-embed-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-embed-muted-text	描述文字色	var(--blocks-text-muted)

覆盖示例

/* 暗色嵌入组件 */
.dark-embed {
  --mewx-cms-embed-heading-text: 255 255 255;
  --mewx-cms-embed-muted-text: 148 163 184;
}

<TikTokGallery className="dark-embed" title="TikTok 精选" videoLinks={[...]} />