📝 راهنمای کامل پنل محتوا (Strapi CMS)
این راهنما به شما (مدیران محتوا و سردبیران) آموزش میدهد تا چطور صفحات سایت را به صورت داینامیک بسازید و تنظیمات ظاهری فروشگاه را کنترل کنید.
۱. درک ساختار محتوایی Strapi
در منوی سمت چپ بخش Content Manager، دو نوع ساختار داده میبینید:
Single Types (انواع تکی)
اینها صفحاتی هستند که فقط یک نسخه از آنها در کل سایت وجود دارد.
- Homepage: محتوای صفحه اصلی سایت.
- Storefront Setting: تنظیمات سراسری (رنگها، هدر، فوتر).
Collection Types (کالکشنها)
اینها مانند جدولهای دیتابیس هستند که بینهایت آیتم میتوانند داشته باشند.
- Blog Post: مقالات مجله شما.
- Section (...): بلوکهای محتوایی آماده (Lego) برای استفاده در صفحات.
۲. تغییر تنظیمات وبسایت (Website Settings)
برای تغییر ظاهر کلی سایت، از بخش Single Types وارد Storefront Setting شوید.
- تغییر به تومان (convertToToman): با روشن کردن این دکمه، تمام قیمتهای دریافتی از مدوسا (که ریال هستند) با حذف یک صفر به صورت تومان نمایش داده میشوند.
- راستچین (isRtl): کنترل جهتگیری سایت برای زبانهای راستچین مثل فارسی.
- تنظیمات ماژولار (Dynamic Zones): در بخش
modulesروی دکمه+ Add a component to modulesکلیک کنید تا تنظیمات بخشهای مختلف مثلHeader SettingsیاFooter SettingsیاTheme Settings(رنگبندی) را اضافه کرده و تغییر دهید.
۳. ترجمه متغیرهای محصول (Dictionary Entries)
زمانی که شما در پنل مدوسا متغیرهای محصول (Variants) را تعریف میکنید (مانند Color یا Size)، برای اینکه این کلمات در فروشگاه به زبان فارسی یا زبانهای دیگر نمایش داده شوند، باید از بخش دیکشنری استرپی استفاده کنید.
🌐 نحوه تعریف ترجمه جدید
- از منوی سمت چپ در بخش Collection Types، روی Dictionary Entries کلیک کنید.
- دکمه Create new entry را بزنید.
- در فیلد Key، دقیقاً همان کلمهای که از مدوسا میآید را بنویسید (مثلاً
ColorیاRed). توجه داشته باشید که به بزرگی و کوچکی حروف حساس است. - در بخش Translations روی دکمه افزودن کلیک کنید.
- زبان (مثلاً
defaultیاfa-IR) را انتخاب کرده و در فیلد Value ترجمه آن را بنویسید (مثلاًرنگیاقرمز). - نهایتاً تغییرات را Save و Publish کنید. پس از این کار، سیستم فرانتاند بهصورت خودکار هرکجا که کلمه
Colorرا از محصولات مدوسا دریافت کند، آن را بهرنگترجمه کرده و به کاربر نمایش میدهد.
۴. ساخت و ویرایش صفحه اصلی با Dynamic Zones
صفحه اصلی سایت هارد-کد نشده است؛ بلکه شما میتوانید بلوکهای مختلف را مانند تکههای پازل روی هم بچینید. برای افزودن یک بلاک جدید، مراحل زیر را بهترتیب طی کنید:
1ابتدا محتوای بلاک را در Collection Types بسازید
قبل از اضافه کردن بلاک به صفحه اصلی، باید محتوای آن را ابتدا در بخش Collection Types ایجاد کنید. هر بلاک به یک Section مرتبط است که دادهها از آن خوانده میشوند:
- برای نمایش محصولات: یک Hp Section Showcase بسازید.
- برای سکشن هیرو: یک Hp Section Hero بسازید.
- برای ویژگیها یا نظرات: یک Hp Section Feature بسازید.
- برای مقالات: یک Hp Section Blog بسازید.
- برای دستهبندیها: یک Hp Section Category Collection بسازید.
تنظیمات دلخواه را مشخص کنید، سپس Save و Publish را بزنید.
2بلاک را به Dynamic Zone صفحه اصلی اضافه کنید
- از منوی چپ، بخش Single Types را باز کرده و روی Homepage کلیک کنید.
- اسکرول کنید تا به فیلد blocks (Dynamic Zone) برسید.
- روی دکمه «+ افزودن کامپوننت» کلیک کنید و نوع بلاک مورد نظر را انتخاب کنید.
- در فیلد Relation داخل بلاک، Sectionای که در مرحله ۱ ساختید را جستجو و انتخاب کنید.
- با Drag & Drop میتوانید ترتیب نمایش بلاکها را تغییر دهید.
3ذخیره و پیشنمایش
- روی دکمه Save کلیک کنید تا تغییرات در حالت Draft ذخیره شوند.
- از دکمه Open Live Preview استفاده کنید تا ظاهر نهایی را قبل از انتشار ببینید.
- اگر نتیجه مورد تأیید بود به مرحله بعد بروید، در غیر این صورت تنظیمات را اصلاح کنید.
4انتشار (Publish)
- روی دکمه Publish در بالای صفحه کلیک کنید.
- Strapi بهصورت خودکار یک Webhook به فرانتاند ارسال میکند و کش صفحه اصلی پاکسازی میشود.
- در عرض چند ثانیه، بلاک جدید روی سایت زنده نمایش داده میشود.
توصیه کاری
۵. سازماندهی و نامگذاری بلاکها (adminDisplayTitle)
مدیریت بهتر آیتمها در استرپی (فیلد adminDisplayTitle)
برای مدیریت راحتتر بلاکها در لیستهای شلوغ Dynamic Zone یا Relationها، یک فیلد اختصاصی با نام adminDisplayTitle به همه فرمهای استرپی اضافه شده است. شما میتوانید از طریق چرخدنده تنظیمات (Configure the view)، فیلد Entry title را روی adminDisplayTitle تنظیم کنید. حالا اگر در هر آیتم یک نام دلخواه (مثلاً «بنر پاییزه») بنویسید، آن نام در لیست کشویی و کارتها نمایش داده میشود تا پیدا کردنشان سادهتر باشد. این فیلد کاملاً Private است و به سمت کاربر فرستاده نمیشود.
۶. پیشنمایش زنده و انتشار آنی محتوا
با کلیک روی دکمه Preview در پنل استراپی، بدون انتشار عمومی، محتوای پیشنویس را مستقیماً در استورفرانت Next.js مشاهده کنید.
با کلیک روی Publish، وبهوکهای امن به فرانتاند ارسال شده و کش صفحات در کسری از ثانیه بهروزرسانی میشوند.
۷. راهنماهای تخصصی استایل و بلاکها
برای مشاهده پیشنمایش گرافیکی، انتخاب استایلها و تنظیمات تم، بخشهای زیر را بررسی کنید:
سیستم بلاکهای ماژولار
مشاهده کاتالوگ و استایلهای ۶ بلاک صفحه اصلی به همراه راهنمای استقرار CI/CD.
مشاهده کاتالوگ بلاکهاتنظیمات سراسری و تمها
پالتهای رنگی تم، استایلهای هدر و فوتر، صفحات سبد خرید، تسویهحساب و حساب کاربری.
مشاهده تنظیمات سراسری