سیستم BlockRenderer، ساخت استایل جدید و لود اتوماتیک

۱. راهنمای ساخت استایل جدید برای هر بلاک (New Style Variant)

برای اضافه کردن یک دیزاین یا استایل جدید به بلاک موجود (مثلاً افزودن style-3 به بلاک ProductShowcase):

1. به پوشه استایل‌های همان کامپوننت بروید (مثلاً src/modules/home/components/ProductShowcase/styles/).
2. یک فایل جدید با نام style-3.tsx بسازید و دیزاین اختصاصی جدید خود را کدنویسی کنید.
3. کامپوننت والد بر اساس فیلد block.style به‌طور اتوماتیک استایل جدید را لود و رندر می‌کند!
4. در پنل Strapi، فیلدهای استایل از نوع متنی (Text) هستند و نیازی به تعریف یا افزودن دستی گزینه‌ها نیست؛ ادمین به سادگی نام style-3 را مستقیماً در فیلد style وارد می‌کند.
5. دیزاین پویا و اختصاصی: کدهای رابط کاربری (UI) منحصر‌به‌فرد این استایل درون تگ section قرار می‌گیرند.

import React from "react"
import { ProductShowcaseProps } from "../types"
 
export default function ProductShowcaseStyle3({ block, products }: ProductShowcaseProps) {
  return (
    <section className="py-12 bg-gradient-to-r from-gray-900 to-black text-gray-900 dark:text-white">
      <h2 className="text-xl font-bold mb-6">{block.title}</h2>
    </section>
  )
}

۲. افزودن و همگام‌سازی استایل‌ها از داشبورد Strapi

تمامی فرایندهای افزودن، به‌روزرسانی و حذف استایل‌ها مستقیماً از طریق داشبورد Storefront Management در پنل ادمین Strapi انجام می‌شود و نیازی به هیچ اسکریپت دستی یا ترمینال نیست:

1. ۱. در پنل ادمین Strapi، از منوی سمت چپ وارد Storefront Management شوید.
2. ۲. گروه کامپوننت مورد نظر (مانند FeaturesBlock) را از منوی کشویی انتخاب کنید.
3. ۳. در بخش Styles Inspector، پیش‌نمایش تصویری استایل‌های نصب‌شده و استایل‌های موجود در رجیستری را مشاهده نمایید.
4. ۴. برای افزودن استایل دلخواه روی + Add to Storefront (Queue) و برای حذف روی Remove Style (Queue) کلیک کنید تا تغییرات در صف قرار گیرند.
5. ۵. روی دکمه Update Storefront کلیک کنید.
6. ۶. استراپی به صورت خودکار جدیدترین تنظیمات صفحات و تم را در گیت ذخیره کرده، ورک‌فلو GitHub Actions را فراخوانی می‌کند و کانتینر استورفرانت را روی سرور دیپلوی می‌نماید!

۳. پیاده‌سازی کد BlockRenderer

فایل BlockRenderer/index.tsx قلب اصلی سیستم است. این تابع یک شیء block از Strapi دریافت می‌کند که فیلد __component آن مشخص می‌کند دقیقاً کدام کامپوننت React باید رندر شود.

• block.__component: کلید یکتایی که Strapi برمی‌گرداند، مثلاً "ui.features-block" یا "ui.product-showcase-block".
• هر case در switch: یک بلاک Strapi را به یک کامپوننت React مشخص نگاشت می‌کند.
• default: return null: اگر بلاکی ناشناخته باشد، به‌آرامی نادیده گرفته می‌شود و خطایی در UI نمایش نمی‌دهد.
• BlockAnimateWrapper: یک wrapper انیمیشن ورود به صفحه را برای تمام بلاک‌ها به‌صورت یکسان اعمال می‌کند.

import React from "react"
import ProductShowcaseBlock from "./ProductShowcaseBlock"
import FeaturesBlock from "./FeaturesBlock"
import BlockAnimateWrapper from "./BlockAnimateWrapper"
 
 
export default async function BlockRenderer({ block, region, countryCode, index }) {
  let BlockContent: React.ReactNode = null
 
  switch (block.__component) {
    case "ui.product-showcase-block":
      BlockContent = <ProductShowcaseBlock block={block} region={region} countryCode={countryCode} />
      break
    case "ui.features-block":
      BlockContent = <FeaturesBlock block={block} />
      break
    default:
      return null
  }
 
  return <BlockAnimateWrapper index={index}>{BlockContent}</BlockAnimateWrapper>
}