什么是视觉无头CM（又称视觉CMS）？
#javascript #网络开发人员 #cms

这篇文章将讨论一个尖端的概念，称为无头视觉CM或无头视觉内容管理系统。这不是您的普通CMS；我们不是指WordPress，Joomla，Drupal，Sanity.io，Contentful等平台。取而代之的是，我们谈论的是最好的无头CMS功能的融合以及诸如Wix或Squarespace的网站建设者的简单性。

让我们更深入地研究这个主题。

得到这样的负载：

这可能与您曾经在其他CMS中看到的内容有些不同 - 拖到页面中的那些块是来自代码库的React组件！

集成代码很简单，并且在您现有的网站或应用中就位于正当。看起来像这样：

import { BuilderComponent, builder, registerComponent } from '@builder.io/react';

export async function getStaticProps({ params }) {
  // Fetch the builder content as JSON
  const page = await builder.get('page', { url: '/' + params.page.join('/') });
  return { props: { page } };
}
export default function Page({ page }) {
  // Render the content dynamically
  return <BuilderComponent model="page" content={page} />;
}

// Register your components for use in the visual editor
registerComponent(MyHero)
registerComponent(MyProductsComponent)

听起来很有趣吗？让我们进入它。

无头CMS：所有肌肉，几乎没有微笑

让我们谈谈片刻的无头CMS。

作为开发人员，您可能会想到“无头”一词，而您的第一个关联可能是“无头组件”，它们可能在您的大脑中注册为只有API和没有UI的组件。我的意思是项目/图书馆，例如Headless UI，RadixUI，Downshift，TanStack Table或其他我可能会忘记的其他项目。

另一方面，

无头CMS是一个特殊的内容管理系统的特殊品种，仅着眼于后端功能。

听起来有些怪异？不用担心。

它只是意味着可以通过GraphQL或REST API访问内容，并且几乎可以在您可以想到的任何设备上显示。这里的魔力是，无头CMS将后端（您创建和存储内容）与前端（设计和部署发生的地方）分开，从而将前端演示文稿远离其范围。

an image showing the pros and cons of headless CMSs.

现在，这种分离听起来像是一个额外的并发症，但这是一个巨大的振奋。为什么？因为它为您提供了更多的内容，在显示您的内容的方式，何处以及如何显示。

只要设备或平台可以连接到API，它就可以访问并消耗您的内容。

无头CMS就像开发人员的内容管理的超人一样。它们是技术敏捷的，以性能为中心的，并且像魅力一样缩放。另外，它们还提供插件和扩展程序，以供大型企业渴望的自定义​​以及团队工作流控制的角色和权限。

但是，让我们面对现实吧，它们并不完全易于用户友好。他们要求开发人员弯曲其组件以适合CMS。另外，它们主要是无尽的荣耀输入表格 - 需要额外的数据吗？这里是一个新的输入字段，祝您好运并将其连接到UI。

营销团队想要新的东西？好吧，它回到了开发积压。随着时间的流逝，这可能会导致大量开发人员依赖性，结构性有限以及一些非常严重的业务影响。

网站建设者：漂亮的面孔，灰褐色

然后，您拥有网站建设者 - WebFlow，Squarespace和Wix等用户友好的模型。它们都是关于视觉吸引力的，使建立一个像拖动，掉落和发布一样容易的网站。

an image showing the pros and cons of wysiwyg editors.

，但是随着您的网站变得更加复杂，these models start to stumble。您网站的速度和性能可能会恶化，并且您将其链接到平台的功能上。是否想使用最新的前端或后端服务？只有平台支持它。

a meme image about how drag and drop makes money.

两者中最好的：视觉CMS

所以这是一个想法 - 为什么不从这两个世界中占据最好的部分呢？一个平台，建筑物与站点构建器一样直观，但提供了基于API的组件驱动，高性能的内容管理，开发人员喜欢无头CM。输入视觉CMS。

这一切都与包装在Figma风格的编辑器中的文本，图像，视频等元素有关。最好的部分？开发人员在这些页面上获得了干净的代码和业务团队控制结构 -

Builder.io的视觉无头CMS的独特特权

除了无头CMS和网站建设者的最佳功能外，建造者的Visual CMS还为桌子带来了独特的功能。

与其他视觉编辑器不同，Builder的Visual CMS允许开发人员拥有最大的控制权，以对您的营销/设计团队可以在编辑器内使用的组件进行最大的控制。

a diagram showing visual development, code components, and structured data.

内容不必在代码内生活，因为构建器的Visual CMS 连接到您的前端Tech stack 。

它的要旨是您只使用代码库中的构建器SDK中的组件，无论您是否使用Vue，Svelte，Svelte，React，Anglet，Angular，Solid或Qwik，然后出现在编辑器中ui。

说您使用Next.js与Tailwind用于应用程序（或网站），您可以编写一些通用卡组件，例如：

// src/components/card.tsx

export const Card = ({ text, title }: { text: string, title: string }) => {
  return (
    <div className="relative rounded-xl overflow-auto p-8">
      <a
        href="#"
        className="group block max-w-xs mx-auto rounded-lg p-4 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"
      >
        <div className="flex items-center space-x-3">
          <svg>{/* ... */}</svg>
          <h3 className="text-sm text-slate-900 font-semibold group-hover:text-white">
            {title}  
          </h3>
        </div>
        <p className="text-sm text-slate-500 group-hover:text-white">
          {text}
        </p>
      </a>
    </div>
  );
};

然后您可以register the component to the Builder editor：

// [...page].tsx

// Register this component for use in the Visual Editor
Builder.registerComponent(Card,{
  name: 'Card',
  inputs: [
    // 'name' is the name of your prop
    { name: 'text', type: 'text' },
    { name: 'title', type: 'text' },
  ],
)

// Fetch the builder content as JSON
export async function getStaticProps({ params }) {
  const page = await builder.get('page', { url: '/' + params.page.join('/') });
  return { props: { page } };
}

// Render the content dynamically
export default function Page({ page }) {
  return <BuilderComponent model="page" content={page} />;
}

然后，我们将其拖放到我们的页面上：

a screenshot showing Builder's visual editor.

这就是建筑商。数据和前端代码之间的一层。

A diagram of Builder headless visual CMS architecture.

结论

视觉CMS对组织的好处可能会改变游戏规则。它可以释放业务团队来管理他们的请求，并允许开发人员专注于重要的项目。它消除了内容开发的瓶颈，并加快了增长。另外，它促进了自主和协作，从而导致更快乐，更富有成效的团队。

但这不是全部。视觉CMS带来了一系列优化功能和增量采用功能，使您的数字体验管理达到了新的水平。凭借其优化功能，测试和个性化您的想法变得轻而易举。您可以根据各种属性，提供一流的表演体验。

和最好的部分？您无需大修前端或模式。视觉CMS与您现有的技术堆栈相处得很好。您可以使用当前的设计系统和组件库，引入任何数据源，并将视觉CMS中创建的内容迁移到前端选择。

现在，想象一下可能性。视觉CMS使您的团队能够释放他们的创造力并建立出色的数字体验。您有能力改变组织的内容和数字体验管理。

这是一个很大的飞跃，使您能够构建自己的方式，更快地建立并共同建立。

现在这是我书中的双赢！

通过您的组件在视觉上构建

Builder.io是一个无头的CMS，可让您在现有网站内带有your components的drag and drop。

Try it out Learn more 

// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />
}

registerComponents([MyHero, MyProducts])
在Builder.io blog上阅读full post