@ bettercms-ai/ 反应
更好的CMS用于客户端的Reactapps(Vite, CRA,任何SPA). 用于下一个.js 使用 @bettercms-ai/next,用于Astro @bettercms-ai/astro。 。 。 .
npm i @bettercms-ai/react
VITE_BCMS_API_URL=https://api.bettercms.ai
VITE_BCMS_WORKSPACE=your-workspace
VITE_BCMS_PROJECT_ID=your-project-id
// main.tsx
import { BcmsProvider } from "@bettercms-ai/react";
createRoot(el).render(<BcmsProvider env={import.meta.env}><App /></BcmsProvider>);
// a page
import { BcmsBlocks, usePage, useComponents } from "@bettercms-ai/react";
export function Home() {
const { data: page } = usePage("home");
const { data: components } = useComponents();
return page ? <BcmsBlocks blocks={page.blocks} components={components} /> : null;
}
钩子: usePage(slug), (中文(简体) ), useEntry(slug), (中文(简体) ), useEntries(opts), (中文(简体) ), useLayout(), (中文(简体) ), useComponents(), (中文(简体) ), useBcmsQuery(key, read); 每个返回 { data, error, loading }。 。 。 .
组件(与 @bettercms-ai/next: BcmsBlocks, (中文(简体) ), BcmsSections (内部) <BcmsProvider> 而给予否 blocks, (中文(简体) ), <BcmsSections page="home"> 阅读页面的顺序本身,所以应用程序的自有部分按CMS页面列出的顺序来渲染, BcmsSection, (中文(简体) ), BcmsField, (中文(简体) ), BcmsImage, (中文(简体) ), BcmsButton, (中文(简体) ), BcmsForm, (中文(简体) ), BcmsSearch,以及 BcmsDraftBridge,使编辑器重新提交带有自己组件的草稿.
自己的组件, 可编辑
在您自己的元素上传播绑定, 而视觉编辑器会绑定它们 :
import { entryAttrs, entryField, fieldAttrs, sectionRootAttrs } from "@bettercms-ai/react";
<h1 {...fieldAttrs("hero-title", page.fieldStyles)}>{title}</h1>
<article {...entryAttrs(post)}><h3 {...entryField(post, "title")}>{post.data.title}</h3></article>
现场直播
发布内容时每个钩子重读( pass) liveSrc,或设置 VITE_BCMS_LIVE_URL)),而当视觉编辑器要求页面重新投稿时. 重读时将当前页面保留在屏幕上,直到新数据到达. useBcms().refresh() 依需要重读. 在草稿模式下,供应商还印有邮票 <html data-bcms-draft="1"> 并加载单击到编辑的覆盖.
草稿模式
不需要服务器 。 编辑器的"现场评论"链接打开 /api/draft?token=…&redirect=/page 在您的网站上; 一个 SPA 主机服务您的应用程序,以及 <BcmsProvider> 使用 BetterCMS 检查符号, 保存它作为标签并移动到 redirect。阅读后返回草稿. useBcms().exitDraft() 离开草稿模式。 设定 draftPath 如果您的应用程序使用其他路径( 以及项目集成设置中的相同路径) , 则在提供者上.
您的主机必须在该路径上为应用程序服务, 就像它对任何客户端的路由一样: Netlify /* /index.html 200 内 _redirects,一个Vercel重写 /api/draft 改为 /index.html (维塞尔保持 /api 用于其他职能)和 vite dev 没有代理 /api。 GitHub 页面无法重写: set draftPath 您的应用服务路径/draft)和集成设置中相同的路径。 后端拒绝的指使,或无法到达的检查,都会让应用程序被发布;下一次应用程序加载时会丢出过期的指使.