بلاکهای ماژولار — ساخت صفحات مثل لگو
سیستم Modular Blocks به شما امکان میدهد صفحه اصلی و صفحات داینامیک را با ترکیب بلاکهای محتوایی آماده و قابلاستفاده مجدد بسازید — همه از طریق Strapi CMS. بدون نیاز به کد.
۱. نحوه عملکرد سیستم بلاکهای ماژولار
در Strapi، صفحه اصلی از یک فیلد Dynamic Zone به نام sections استفاده میکند. میتوانید انواع مختلف بلاک را در این ناحیه اضافه، حذف و مرتب کنید. هر بلاکی که اضافه کنید به طور خودکار به عنوان یک بخش جدید در فروشگاه نمایش داده میشود.
- به Content Manager → Homepage در Strapi بروید.
- به پایین اسکرول کنید تا ناحیه داینامیک Sections را ببینید.
- روی Add a component کلیک کنید تا بلاک جدید اضافه کنید.
- یک نوع بلاک از لیست انتخاب کرده و محتوای آن را پر کنید.
- روی Save و سپس Publish کلیک کنید تا تغییرات در سایت اعمال شوند.
۲. افزودن استایلهای جدید و استقرار خودکار (CI/CD)
افزودن استایلهای جدید از داشبورد Strapi
جهت افزودن یا حذف استایلهای بصری برای هر بلاک، به منوی Storefront Management در پنل ادمین استراپی بروید، استایل مورد نظر را انتخاب کرده و دکمه Update Storefront را بزنید. گیتهاب اکشن به صورت خودکار فرایند بیلد و استقرار را انجام میدهد (معمولاً ۱ الی ۲ دقیقه زمان میبرد). پس از اتمام بیلد، میتوانید نام استایل جدید را مستقیماً در فیلد متنی Style هر سکشن وارد کنید تا اعمال شود.
- 1. ورود به پنل استراپی > منوی Storefront Management
- 2. انتخاب کامپوننت > مشاهده پیشنمایش در Styles Inspector و کلیک روی + Add to Storefront (Queue)
- 3. کلیک روی دکمه Update Storefront (همگامسازی خودکار تنظیمات صفحات و استارت بیلد توسط گیتهاب اکشن)
۳. کاتالوگ و پیشنمایش گرافیکی بلاکهای صفحه اصلی
هر بلاک دارای استایلهای آماده متعددی است که میتوانید با وارد کردن نام استایل (مانند style-1 یا style-2) در فیلد متنی Style در استراپی، ظاهر آن را در کسری از ثانیه تغییر دهید.
🎨 سکشن هیرو (Section Hero)
سکشن اصلی و شاخص بالای صفحه (Hero Banner) شامل عنوان بزرگ، دکمههای فراخوان (CTA)، بجها و ترکیب تصاویر اصلی و کناری.
- Main Images: تصاویر یا محصول شاخص بنر هیرو.
- Side Images: تصاویر/گیفهای حاشیهای یا موزاییک مدلهای هیرو.
🎨 سکشن نمایش محصول (Section Showcase)
برای نمایش محصولات به صورت اسلایدر یا گرید همراه با تصویر و ویدیوهای پیشنمایش.
- Products: انتخاب محصولات یا کالکشنهای نمایشی.
- Media (Image / Video): قابلیت افزودن عکس، GIF یا ویدیو (MP4) به عنوان بنر یا پیشنمایش داینامیک استایل.
کارتهای داینامیک محصول
استایل اصلی سکشن (style)
🎨 سکشن اسکرول محصولات (Section Scroll Product)
نمایش محصولات به صورت اسکرول عمودی در کنار یک تصویر/بنر ثابت (Split View).
- Products: انتخاب دستی محصولاتی که در این بخش اسکرول میشوند.
- Image: تصویر اصلی و ثابت در یک سمت صفحه.
استایل اصلی سکشن (style)
🎨 سکشن ویژگیها و نظرات مشتریان (Section Features & Testimonials)
برای نمایش مزایای کلیدی فروشگاه (ارسال رایگان، پشتیبانی ۲۴ ساعته و...) و همچنین نظرات و رضایت خریداران (Testimonials / Social Proof).
- انتخاب نوع محتوا (contentType): امکان انتخاب بین
features(ویژگیها و مزایا) یاtestimonials(نظرات و نقلقولهای مشتریان). - تنوع استایلها: استایلهای ۱ و ۲ برای کارتهای ویژگیها، و استایلهای ۳ و ۴ برای نمایش تعاملی و متحرک نظرات مشتریان.
- دارای فیلدهای Repeatable برای افزودن بینهایت آیتم، آیکون، عکس، نام و سمت نویسنده نظر.
استایل اصلی سکشن (style)
🎨 سکشن دستهبندیها (Section Category Collection)
نمایش بصری گرید دستهبندیهای اصلی سایت.
- دارای فیلد Dynamic Zone به نام
itemsبرای چیدن آیتمهای دستهبندی در کنار هم.
استایل اصلی سکشن (style)
🎨 سکشن مقالات مجله (Section Blog)
فراخوانی خودکار یا دستی آخرین مقالات در صفحه اصلی.
- Source: نحوه فراخوانی (latest = جدیدترینها، views = پربازدیدها، manual = انتخاب دستی مقالات).
استایل اصلی سکشن (style)
تنظیم استایلهای سراسری و پالتهای رنگی تم
برای تغییر استایلهای هدر، فوتر، صفحات سبد خرید، تسویهحساب و پالتهای رنگی به راهنمای تنظیمات سراسری مراجعه کنید.