Visual Headless CMS (با نام مستعار Visual CMS) چیست؟

این پست در مورد یک مفهوم پیشرفته به نام Headless Visual CMS یا Headless Visual Management Content System بحث خواهد کرد. این 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 هستند و رابط کاربری ندارند، در مغز شما ثبت می‌شوند. منظور من پروژه‌ها/کتابخانه‌هایی مانند Headless UI، RadixUI، Downshift، TanStack Table یا تعدادی دیگر هستند که ممکن است فراموش کنم.

از سوی دیگر، یک “CMS بدون سر” یک نوع خاص از یک سیستم مدیریت محتوا است که تنها بر روی عملکردهای Backend تمرکز دارد.

کمی ترسناک به نظر می رسد؟ نگران نباشید.

این فقط به این معنی است که محتوا از طریق GraphQL یا REST API قابل دسترسی است و می تواند تقریباً در هر دستگاهی که فکرش را بکنید نمایش داده شود. جادو در اینجا این است که CMS بدون هد، بک‌اند (جایی که محتوا را ایجاد می‌کنید و ذخیره می‌کنید) را از فرانت‌اند (جایی که طراحی و استقرار اتفاق می‌افتد) جدا می‌کند و ارائه frontend را از محدوده‌اش خارج می‌کند.

در حال حاضر، این جدایی ممکن است مانند یک عارضه اضافی به نظر برسد، اما این یک مزیت عظیم است. چرا؟ زیرا فضای بسیار بیشتری را در مورد نحوه و مکان و نحوه نمایش محتوای شما به شما می دهد.

تا زمانی که یک دستگاه یا پلتفرم می تواند به API متصل شود، می تواند به محتوای شما دسترسی داشته باشد و آن را مصرف کند.

CMS های بدون سر مانند سوپرمن مدیریت محتوا برای توسعه دهندگان هستند. آن‌ها نسبت به فناوری، متمرکز بر عملکرد، و مانند یک جذابیت مقیاس هستند. به علاوه، آنها با پلاگین‌ها و برنامه‌های افزودنی برای سفارشی‌سازی مورد نیاز کسب‌وکارهای بزرگ همراه با نقش‌ها و مجوزها برای کنترل گردش کار تیمی عرضه می‌شوند.

اما، اجازه دهید با آن روبرو شویم، آنها دقیقا کاربر پسند نیستند. آنها از توسعه دهندگان می خواهند که اجزای خود را به گونه ای خم کنند تا در CMS قرار گیرند. همچنین، آنها عمدتاً فرم های ورودی بی پایان هستند – به یک قطعه داده اضافی نیاز دارید؟ در اینجا یک فیلد ورودی جدید وجود دارد، موفق باشید آن را نقشه برداری کرده و به رابط کاربری خود متصل کنید.

و اگر تیم بازاریابی چیز جدیدی می خواهد؟ خب، به عقب ماندگی توسعه‌دهندگان بازگشته است. با گذشت زمان، این امر می‌تواند منجر به یک دسته کامل از وابستگی‌های توسعه‌دهنده، داده‌های ساختاری محدود و برخی تأثیرات تجاری بسیار جدی شود.

سازندگان سایت: چهره های زیبا، ریزش کمتر

سپس شما سازندگان سایت را دارید – مدل‌های کاربرپسند مانند Webflow، Squarespace و Wix. همه آنها در مورد جذابیت بصری هستند و ساخت یک سایت را به آسانی کشیدن، رها کردن و انتشار می کنند.

اما با پیچیده‌تر شدن سایت شما، این مدل‌ها شروع به شکست می‌کنند. سرعت و عملکرد سایت شما ممکن است بدتر شود و شما به قابلیت های پلتفرم متصل شوید. آیا می خواهید از آخرین سرویس های فرانت اند یا بک اند استفاده کنید؟ فقط در صورتی که پلتفرم از آن پشتیبانی کند.

بهترین های هر دو جهان: CMS بصری

بنابراین در اینجا یک فکر وجود دارد – چرا بهترین قسمت‌ها را از هر دو دنیا نگیریم؟ پلتفرمی که در آن ساختن به اندازه یک سایت ساز شهودی است، اما مدیریت محتوای مبتنی بر API، مؤلفه محور و با کارایی بالا را ارائه می دهد که توسعه دهندگان در مورد CMS بدون سر علاقه دارند. Visual CMS را وارد کنید.

همه چیز در مورد توسعه بصری با عناصری مانند متن، تصاویر، ویدیو و موارد دیگر است که در یک ویرایشگر به سبک Figma پیچیده شده است. بهترین قسمت؟ توسعه‌دهندگان کدهای تمیز را دریافت می‌کنند و تیم‌های تجاری ساختارهای کنترلی را در این صفحات دریافت می‌کنند – همه برنده می‌شوند!

مزایای منحصر به فرد CMS تصویری بدون هد Builder.io

علاوه بر بهترین ویژگی های CMS های بدون هد و سازندگان سایت، ویژوال سی ام اس بیلدر قابلیت های منحصر به فردی را در جدول به ارمغان می آورد.

برخلاف سایر ویرایشگرهای بصری، CMS بصری Builder به توسعه دهندگان این امکان را می دهد که تا آنجا که می خواهند بر اجزایی که تیم بازاریابی/طراحی شما می تواند در داخل ویرایشگر استفاده کند، کنترل داشته باشند.

به دلیل CMS بصری Builder، محتوا مجبور نیست در داخل کد زندگی کند به پشته فناوری frontend شما متصل می شود.

نکته اصلی این است که شما فقط از یک مؤلفه از Builder SDK در پایه کد خود استفاده می کنید، مهم نیست که از Vue، Svelte، React، Angular، Solid یا Qwik استفاده می کنید، و سپس در رابط کاربری ویرایشگر ظاهر می شود.

فرض کنید از 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>
  );
};

و سپس می توانید کامپوننت را در ویرایشگر Builder ثبت کنید:

// [...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} />;
}

سپس آن را در صفحه خود بکشید و رها کنید:

این همان چیزی است که سازنده است. لایه ای بین داده های شما و کد ظاهری شما.

نتیجه

مزایای یک CMS ویژوال برای سازمان شما می تواند بازی را تغییر دهد. تیم‌های تجاری را برای مدیریت درخواست‌هایشان آزاد می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا روی پروژه‌های حیاتی تمرکز کنند. گلوگاه های توسعه محتوا را از بین می برد و رشد را سرعت می بخشد. به علاوه، استقلال و همکاری را تقویت می‌کند و منجر به تیم‌های شادتر و سازنده‌تر می‌شود.

اما این همه ماجرا نیست. ویژوال CMS طیف وسیعی از ویژگی‌های بهینه‌سازی و قابلیت‌های پذیرش افزایشی را به همراه دارد که مدیریت تجربه دیجیتال شما را به سطح بالاتری می‌برد. با ویژگی‌های بهینه‌سازی آن، آزمایش و شخصی‌سازی ایده‌های شما کار آسانی است. می‌توانید تجربیات را برای بازدیدکنندگان فردی بر اساس ویژگی‌های مختلف شخصی‌سازی کنید، و تجربیات عالی و عملکردی ارائه دهید.

و بهترین بخش؟ شما نیازی به بازنگری کلی قسمت جلویی یا طرحواره های خود ندارید. یک CMS ویژوال با پشته فناوری موجود شما به خوبی بازی می کند. می‌توانید از سیستم طراحی فعلی و کتابخانه مؤلفه‌تان استفاده کنید، هر منبع داده‌ای را وارد کنید، و محتوای ایجاد شده در Visual CMS را به انتخاب اصلی خود منتقل کنید.

حال، احتمالات را تصور کنید. یک CMS ویژوال به تیم شما قدرت می‌دهد تا خلاقیت خود را آزاد کند و تجربیات دیجیتالی استثنایی ایجاد کند. شما این قدرت را دارید که محتوای سازمان و مدیریت تجربه دیجیتال را متحول کنید.

این یک جهش بزرگ به جلو است که شما را قادر می سازد راه خود را بسازید، سریعتر بسازید و با هم بسازید.

حالا این یک برد-برد در کتاب من است!

بصری با اجزای خود بسازید

Builder.io یک CMS بدون هد است که به شما امکان می دهد با آن بکشید و رها کنید شما اجزای درست در سایت موجود شما

آن را امتحان کنید بیشتر بدانید

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

registerComponents([MyHero, MyProducts])

پست کامل را در وبلاگ Builder.io بخوانید