Builder 拖放式 Headless CMS

运维资讯 2023-11-30 大树手机阅读

Builder 是一个适用于 React、Vue、Svelte、Qwik 等的拖放式 headless CMS。与任何网站或应用程序集成，使用代码库中已有的组件进行拖放。

Rendered your visually created content

import { Builder } from '@builder.io/react'
 
// Register our heading component for use in
// the visual editor
const Heading = props => (
  <h1 className="my-heading">{props.title}</h1>
)
 
Builder.registerComponent(Heading, {
  name: 'Heading',
  inputs: [{ name: 'title', type: 'text' }]
})

import { BuilderComponent, builder } from '@builder.io/react'
 
builder.init('YOUR_KEY')
 
export const getStaticProps = async () => ({ 
  props: {
    builderJson: await builder.get('page', { url: '/' }).promise()
  }
})
 
export function BuilderPage({ builderJson }) => {
  return <>
    <YourHeader />
    <BuilderComponent model="page" content={builderJson} />
    <YourFooter />
  </>
}