内容API概述

介绍

使用 TinaCMS,您的内容与代码库一起存储在 Git 中。TinaCMS 在基于仓库的内容前提供了一个内容API,使您可以像在数据库中一样与文件交互。

您可以:

  • 查询给定集合的内容
  • 应用过滤器、排序、分页等
  • 基于关系字段查询您的内容。

要与API接口交互,您可以使用 TinaCMS 的类型安全客户端进行数据获取,或者手动编写自定义 GraphQL 查询并自行访问API。

使用 TinaCMS 客户端进行请求

TinaCMS 客户端是获取站点内容的最简单方法。可以在 tina/config.<js|ts> 中的 defineConfig 函数中配置客户端。

注意:token、clientId 和 branch 在本地模式使用。要为生产环境设置这些值,请参阅此文档

在本地工作时,客户端使用本地 URL (http://localhost:4001/graphql) 构建。在生产模式下,clientIdbranchtoken 用于查询 TinaCloud。

TinaCMS 客户端提供了一个类型安全的查询构建器,该构建器是根据您站点的架构自动生成的:

上述 client.queries.post 查询不是 TinaCMS API 内置的。这是基于定义的架构的查询示例(其中您定义了一个“post”集合)。

在显示帖子列表的页面上,您可以这样获取帖子:

有关为您的特定架构手动编写查询的更多信息,请查看我们的“编写自定义查询”文档。

使用静态站点生成 (SSG) 处理新页面

如果您正在使用 SSG,在 TinaCMS 中创建新页面意味着内容会立即更新到 TinaCloud 和您的 Git 仓库中。然而,您的站点(基于 main 或其他分支)不会立即显示此新页面,通常会导致 404 错误。这是因为 SSG 站点在部署时预构建所有页面;您的服务器在站点重建之前不知道新页面。

新 SSG 页面解决方案:

  1. 触发重建:
    • 最简单的解决方案是重建并重新部署您的站点。大多数托管平台可以在 Git 提交时自动执行此操作。在新页面上线之前会有一个构建时间延迟。
  2. 特定框架的回退/动态路由:
    • 现代 SSG 框架(如 Next.js、Nuxt.js、SvelteKit、Gatsby、Eleventy)提供了处理未在构建时生成的页面请求的方法。
      • Next.js:getStaticPaths 中使用 fallback: truefallback: 'blocking' 来按需生成页面。
      • 其他框架: 在框架文档中查找类似“按需生成”、“增量构建”或动态路由的功能。这些功能允许框架在首次请求时构建页面或使用客户端渲染。
  3. 增量静态再生 (ISR):
    • 由 Next.js 等框架支持,ISR 允许页面在初始构建后生成或更新,可以是定时器触发或首次请求时触发,而无需完整的站点重建。

在 TinaCMS 中跨分支获取内容

对于 TinaCMS 中的服务器渲染页面,您可以通过在查询内容时将存储在 x-branch cookie 中的活动分支名称作为标头传递,动态获取来自活动编辑或预览分支的内容。

要在 Next.js 中检索 cookie,请参阅 Next.js cookies 文档

示例实现

基于本地文件系统的内容API

在本地开发时,与其与托管内容API交互,不如与本地文件系统上的内容交互更有利。TinaCMS 提供了一个 CLI 工具,允许您在站点旁边本地运行内容API。这使得所有内容在开发期间都可以通过相同的表达式 GraphQL API 访问。

如果您通过 @tinacms/cli init 设置了 TinaCMS,或者使用了我们的入门模板,这应该是默认设置的。(在我们的文档中阅读有关 CLI 的信息在此处

视频教程

对于那些更喜欢通过视频学习的人,您可以查看我们 "TinaCMS 深入探讨" 系列中的“数据获取”片段。

总结

  • TinaCMS 提供了一个用于查询基于 git 的内容的 GraphQL API。
  • TinaCMS 提供了一个客户端,允许您对内容API进行类型安全的请求。
  • 客户端的“queries”属性是根据您的架构生成的。
  • 本地版本的内容API可用于本地开发。
  • 使用 SSG,新页面需要重建或特定框架的处理(如回退或 ISR)以避免 404 错误。

另请参阅

Last Edited: September 18, 2025