@ contentstack/ live- preview- utils
这个 现场预览 Utils 软件包在您的网站上运行,并在页面和Contextack之间建立通信通道。 这样可以在预览面内进行现场内容更新,编辑控件,以及视觉编辑器UI.
这个SDK不是Contack交付SDK的替代品. 相反,它充当了预览和Visual Editor功能的客户端桥.
这个SDK运行的地方
SDK的工作跨越多个Contentack预览和编辑体验:
- 现场预览: 在您的站点加载预览面板时预览条目 .
- 时间线: 使用相同的 Live 预览设置, 预览您网站在未来日期和计划更新的显示方式 .
- 视觉编辑器: 启用 WYSIWYG 在 Iframe 内编辑您的网站。 使用
mode: "builder"因此,“开始编辑”针对的是视觉编辑器;当同一站点在Live Preview中打开时,SDK仍然工作. - 工作室: 与 Studio并用从可再用组件构建页面,绑定 CMS 数据,并实时预览更改. 它旨在与 现场预览和视觉编辑器 在您连接的网站.
所需资源
- 浏览器 : 仅在客户端上初始化( I)
window(必须存在)。 避免呼叫init在服务器侧渲染时. - SSR对CSR: 默认假设 SSR 行为友好。 对于 客户端渲染,通过
stackSdk设置ssr: false如配置引用中所述.
安装
npm install @contentstack/live-preview-utils
从 CDN (高级) 装入
按下该版本以匹配您的应用程序( 更新) 4.6.1 升级时:
<script type="module" crossorigin="anonymous">
import ContentstackLivePreview from "https://esm.sh/@contentstack/[email protected]";
ContentstackLivePreview.init({
stackDetails: {
apiKey: "your-stack-api-key",
},
});
</script>
[TIP] 如果您使用此片段初始化了 SDK, 请不要在同一页的应用程序包中再次初始化 .
快开始
初始化 SDK 以启用您的站点和内存之间的通信 :
import ContentstackLivePreview from "@contentstack/live-preview-utils";
ContentstackLivePreview.init({
stackDetails: {
apiKey: "your-stack-api-key",
},
});
见 init 配置属性 内 文件/实况审查-配置 对于每一个选项,你可以通过 init。 。 。 .
配置
您可以使用下列选项配置 SDK :
enablessrmode(单位:千美元)preview对builder(中文(简体) )editButtoneditInVisualBuilderButton(在视觉编辑器外开始编辑)overlayPropagation(在盘旋/点击检测时,可进行回落以刺穿阻塞兄妹上覆)cleanCslpOnProductionstackDetails(单位:千美元)apiKey, (中文(简体) ),environment(中文(简体) )clientUrlParams—— 说 纳 编号 : 欧盟stackSdk
完整表格和实例: 文件/实况审查-配置。 。 。 .
方法和属性
onLiveEdit: 实时编辑时触发动作onEntryChange: 听取条目更新hash: 访问预览状态标识符setPageContext:告诉 Visual 构建器, 在当前页的哪个条目中“ 开始编辑” 使“ 开始编辑” 目标为正确的条目( 自定义- URL 页面需要)config: 包括运行时间上下文(例如Live Preview / Timeline预览,视觉编辑器,或独立)
这个 配置目录 也列出 setConfigFromParams 财务报告和审定财务报表 getGatsbyDataFormat 更深入的工作流程.
高级: 在构建时间剥取 SDK
设定 PURGE_PREVIEW_SDK 或者说 REACT_APP_PURGE_PREVIEW_SDK 改为 "true" 在构建时将预览代码排除在生产捆绑之外.
说明: 这通过将SDK替换为生产中的轻量级活塞来减少捆绑尺寸.
资源
- 资料来源: github.com/contentstack/live-preview-sdk (中文(简体) )
- 已键入 API( 本地) :
npm run docs