内容管理

本网站通过服务端 API 客户端 (src/lib/strapi.ts) 从 Strapi v5 无头 CMS 获取内容。所有数据请求均在构建时或请求时通过 增量静态再生 (60 秒重新验证) 完成。

Strapi API 客户端

客户端位于 src/lib/strapi.ts，为每种内容类型提供类型化函数。每个请求都会自动附加公开过滤器 (filters[publishTarget][$contains]=public)，确保仅返回已发布的公开内容。

配置

变量

说明

STRAPI_URL

Strapi 基础 URL（默认值：http://localhost:1337）

REVALIDATE

ISR 间隔秒数（硬编码：60）

PUBLIC_FILTER

自动应用于所有查询

可用函数

页面：

  • fetchNavPages(locale) --- showInNav=true 的页面，按 sortOrder 排序

  • fetchPublicPages(locale) --- 所有公开页面

  • fetchPublicPage(slug, locale) --- 根据 slug 获取单个页面

文章：

  • fetchPublicArticles(page, pageSize, locale, categorySlug?, tagSlug?) --- 支持可选过滤条件的分页文章列表

  • fetchPublicArticle(slug, locale) --- 根据 slug 获取单篇文章

  • fetchFeaturedArticles(locale, limit?) --- 精选文章

分类与标签：

  • fetchCategories(locale?) --- 所有分类，按 sortOrder 排序

  • fetchTags() --- 所有标签，按名称排序

媒体集合：

  • fetchPublicMediaCollections(page, pageSize, locale)

  • fetchPublicMediaCollection(slug, locale)

辅助函数：

  • strapiMediaUrl(media) --- 解析绝对或相对媒体 URL

内容类型

所有类型定义在 src/lib/types.ts 中。

文章 (Article)

字段

类型

说明

title

string

文章标题

slug

string

URL slug（每个语言环境唯一）

summary

string?

列表页的简短描述

content

string

完整的 Markdown 正文

coverImage

StrapiMedia?

封面图片

author

Author?

作者关联

category

Category?

单分类关联

tags

Tag[]

多对多标签关联

publishTarget

string[]

可见性 (["public"])

featured

boolean

在精选区域中展示

locale

string

内容语言环境 (en、zh-CN、ja)

publishedAt

string?

ISO 格式的发布日期

页面 (Page)

字段

类型

说明

title

string

页面标题

slug

string

URL slug（例如 home）

metaDescription

string?

SEO 元描述

sections

Section[]

动态区域（Hero、FeatureGrid 等）

publishTarget

string[]

可见性

sortOrder

number

导航排序

showInNav

boolean

在导航栏中显示

locale

string

内容语言环境

分类、标签、作者

  • 分类 (Category) --- name、slug、description、sortOrder、本地化

  • 标签 (Tag) --- name、slug

  • 作者 (Author) --- name、bio、avatar、keycloakUserId

CMS 驱动的页面

从 Strapi 获取的页面使用 动态区域 模式。每个页面包含一个 sections 数组，其中每个条目都有一个 __component 字符串，用于标识要渲染的 React 组件。SectionRenderer 组件据此进行分发：

// src/components/sections/SectionRenderer.tsx
const componentMap = {
  "page-sections.hero": HeroSection,
  "page-sections.feature-grid": FeatureGridSection,
  "page-sections.rich-text": RichTextSection,
  "page-sections.call-to-action": CallToActionSection,
  "page-sections.image-gallery": ImageGallerySection,
};

如果 CMS 未返回 home 页面，网站将回退到 StaticHomePage --- 一个由 Figma 设计的主页，包含 hero、功能介绍、合作伙伴标识和 CTA 区域。