⚠️ 我们的Premium计划中只有内容源图。 Vercel Content Links只在Vercel Pro和企业计划中提供.

内容来源地图

• 自动在短文本,丰富文本和资产等可视字段中添加督察模式,取消人工插入数据属性所需的时间和努力.
• 允许与 Vercel 的内容链接 特性,增强可用性与合作.

安装

安装 Live 预览 SDK :

npm install @contentful/live-preview

如何运作

这个过程使用素描法将元数据隐藏在无形的Unicode字符中,包含信息来激活检查器模式. 这些看不见的Unicode字符不会改变您内容的视觉展示.

图QL

1. 启动现场预览SDK

此步骤仅用于Live Preview Introduction Mode(而不是Vercel内容链接).

import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';

const CustomApp = ({ Component, pageProps }) => (
  <ContentfulLivePreviewProvider locale="en-US">
    <Component {...pageProps}>
  </ContentfulLivePreviewProvider>
)

2. 设置图表QL查询

在您的 GraphQL 查询中启用内容源地图如下 :

query @contentSourceMaps {
  postCollection(preview: true) {
    items {
      title
    }
  }
}

GraphQL API 现在将连同内容源地图一起返回数据 extensions 字段.

3. 处理图QL回复

然后,将数据传递给提供的函数 encodeGraphQLResponse 以编码响应:

import { encodeGraphQLResponse } from '@contentful/live-preview';

const dataWithAutoTagging = encodeGraphQLResponse(data);

在您网站上提供编码数据时, 检查员模式将自动激活 .

内容预览 API (REST)

1. 启动现场预览SDK

此步骤仅用于Live Preview Introduction Mode(而不是Vercel内容链接).

import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';

const CustomApp = ({ Component, pageProps }) => (
  <ContentfulLivePreviewProvider locale="en-US">
    <Component {...pageProps}>
  </ContentfulLivePreviewProvider>
)

2. 启用《全面和平协议》的内容源图

启用使用 内容客户端 SDK,简单启用 includeContentSourceMaps 在客户端中:

export const clientPreview = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN!,
  host: "preview.contentful.com",
  alphaFeatures: {
    includeContentSourceMaps: true
  }
});

检查器模式将自动激活 。 请确保使用 Contentful.js v10.11.0 或以上版本.

在不使用JS客户SDK时:直接使用CPA

请注意,如果没有内容丰富的客户端 SDK, 某些保护, 如自动请求所需的 sys.id未执行。 为确保内容源图正常运行,完整 sys 对象需要检索。 因此,使用a 选择 操作员将此排除在答复之外会造成错误.

添加 &includeContentSourceMaps=true 转到 URL

fetch("https://preview.contentful.com/spaces/:spaceId/environments/:envId/entries&includeContentSourceMaps=true",
 {
   method: "GET",
   headers: {
     Authorization: "Bearer YOUR_ACCESS_TOKEN",
     Content-Type: "application/json",
   },
 }
)

使用 encodeCPAResponse 函数来自 Live 预览 SDK,通过它通过带有内容源地图的 CPA 响应。 它会带着您的内容返回, 其中包括隐藏的元数据, 以启用检查器模式 .

import { encodeCPAResponse } from '@contentful/live-preview';

const dataWithAutoTagging = encodeCPAResponse(data);

合并 Live 更新内容和内容源地图

如果您正在使用包含内容源地图的实时更新和检查模式,那么将编码结果传递到 useContentfulLiveUpdates。 。 。 .

import { encodeGraphQLResponse } from '@contentful/live-preview';
import { useContentfulLiveUpdates } from '@contentful/live-preview/react';

export default function Page({ initialGraphQLResponse }) {
  // 1. Encode the full response first (including extensions):
  const encoded = encodeGraphQLResponse(initialGraphQLResponse);
  // 2. Then pass that encoded data to the live updates hook:
  const updated = useContentfulLiveUpdates(encoded);

  return <h1>{updated.data?.myEntry?.title}</h1>;
}

解决问题/ 小费

• 在某些情况下,例如在CSS中应用字母间距时,字段可能显示并非有意的样式. 在这种情况下,您可以使用 splitEncoding 函数由 Live 预览 SDK 提供,用于检索内容并删除任何隐藏的元数据.

  import { splitEncoding } from '@contentful/live-preview';
  
  const { cleaned, encoded } = splitEncoding(text);
  

• 如果您提供了资产标题或描述的备选案文属性, 图像会自动被标记 .

• 要停止使用手动标记, 请使用内容源地图 :

  <ContentfulLivePreviewProvider experimental={{ ignoreManuallyTaggedElements: true }} />
  

• 对于使用@apollo/客户端,需要一个自定义链接来添加扩展以转发解析到响应中. 示例

限制

• Markdown支持目前正在开发中.
• 将隐藏的元数据添加到内容中会造成问题,例如用于CSS值,日期或URL内容时. 您可以使用 splitEncoding 函数来自 Live 预览 SDK.
• 在这些格式上将跳过编码 :
  • 不使用英文字母的任何日期格式(例如:. 4/30/24(中文(简体) )
  • ISO日期(例如:. 2024-04-30T12:34:59Z(中文(简体) )
  • URL 网络