به‌روزرسانی پلتفرم وب: صفحه ساز بلوک‌محور، ابزارک‌ها و تنظیمات قالب

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

چه چیزی تغییر کرده است؟

• صفحات بلوک‌محور: بلوک‌های هیرو، متن غنی، شبکه ویژگی‌ها، آمار، سوالات متداول، جدول زمانی، دو ستونه، گواهی‌ها، لوگوهای مشتریان، فرم تماس و محتوای جاسازی‌شده.
• تنظیمات بلوک: نوع، پس‌زمینه (شیشه‌ای، شبکه‌ای، اورورا، گرادیان)، تراز، فاصله‌گذاری و ترجیحات انیمیشن به طور جداگانه برای هر بلوک مدیریت می‌شوند.
• ابزارک‌ها: بلوک‌های تکرار شونده مانند فراخوان «پروژه خود را شرح دهید» یا نوار فناوری، یک بار تعریف شده و با ارجاع به صفحه دلخواه اضافه می‌شوند.
• قالب‌های صفحه: صفحات جدید با قالب‌های فرود، خدمات، کمپین و درباره ما با چیدمان بلوک آماده شروع می‌شوند.
• تنظیمات قالب: نوع قالب، رنگ اصلی و شدت انیمیشن را می‌توان از پنل تغییر داد؛ به ترجیحات کاهش حرکت بازدیدکنندگان احترام گذاشته می‌شود.

مدل داده: فیلدها قدیمی حفظ می‌شوند

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

alter table public.page_sections
  add column block_type text not null default 'rich_text',
  add column settings   jsonb not null default '{}'::jsonb,
  add column is_visible boolean not null default true;

alter table public.page_sections
  add constraint page_sections_block_type_check check (block_type in (
    'hero', 'rich_text', 'feature_grid', 'stats', 'cta', 'gallery', 'faq', 'logo_wall',
    'testimonial', 'contact_form', 'embed_html', 'spacer', 'two_column', 'timeline', 'widget_ref'));

قوانین دیده‌بانی و انتشار در پایگاه داده

بازدیدکننده ناشناس فقط می‌تواند صفحات منتشر شده، بلوک‌های منتشر شده و قابل مشاهده را بخواند. این قانون در رابط کاربری تعریف نشده، بلکه در سیاست امنیت سطح ردیف (Row Level Security) پست‌گرس‌اس‌کیوال تعریف شده است؛ بنابراین کسی که مستقیماً به API درخواست می‌فرستد نیز نمی‌تواند پیش‌نویس‌ها یا بلوک‌های پنهان را ببیند. ما همین رویکرد را در تمام جداول محتوا اعمال می‌کنیم.

اگر دکمه «پنهان کردن» فقط در رابط کاربری کار کند، پنهان نشده است. قانون حریم خصوصی باید در جایی که داده‌ها زندگی می‌کنند تعریف شود.

حالت نمایشی: سایتی که بدون اتصال نیز کار می‌کند

یکی از ویژگی‌های پلتفرم این است که می‌تواند بدون اتصال به پایگاه داده کار کند. تمام محتوای اولیه از یک فایل منبع واحد تولید می‌شود؛ همان مرحله تولید، هم فایل سید (seed) پایگاه داده و هم داده‌های نمایشی ایستا را ایجاد می‌کند. بنابراین محیط‌های توسعه، تست و معرفی همان محتوا را می‌بینند و تغییرات ایجاد شده در محتوا نیازی به ویرایش دستی در دو مکان مختلف ندارند.

دسترس‌پذیری و عملکرد

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

در بخش Insights چه خبر است؟

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

چه چیزی در راه است؟

در دوره آینده، انواع A/B در سطح بلوک، گردش کار ترجمه برای محتوای چندزبانه و بهبود کتابخانه رسانه برنامه‌ریزی شده است. تاریخچه نقشه راه را به محض قطعی شدن در اینجا اعلام خواهیم کرد؛ اصول ما این است که یک ویژگی تکمیل نشده را به عنوان ویژگی تکمیل شده توصیف نکنیم.

تنظیمات بلوک چگونه کار می‌کنند؟

هر بلوک دارای دو فیلد داده است: محتوا و تنظیمات. محتوا شامل متن‌های مبتنی بر زبان و لیست آیتم‌ها (به عنوان مثال سوالات متداول) است؛ در حالی که تنظیمات ظاهر را تعیین می‌کنند. طرح تنظیمات آگاهانه باریک نگه داشته شد: نوع، پس‌زمینه، تراز، فاصله و انیمیشن. CSS آزاد یا فیلدهای تصادفی پذیرفته نمی‌شوند؛ بنابراین هر تغییر ایجاد شده از پنل در حدود سیستم طراحی باقی می‌ماند و یکپارچگی سایت از بین نمی‌رود.

{
  "variant": "accordion",
  "background": "glass",
  "align": "left",
  "padding": "md",
  "animation": "fade"
}

گزینه‌های جایگزین محتوا: امتحان کردن بدون حذف

هنگام تغییر محتوای یک بلوک، نمی‌خواهید نسخه قدیمی را از دست بدهید. در این نسخه، بلوک‌ها می‌توانند گزینه‌های محتوای نام‌گذاری شده را حمل کنند: دو نسخه عنوان یا دو نسخه توضیحات از یک بلوک ذخیره می‌شود و از پنل انتخاب می‌شود که کدام یک فعال باشد. این زیرساختی برای آزمایش‌های A/B برنامه‌ریزی شده در آینده نیز است.

ویرایش در محل در پنل مدیریت

ویرایشگران بلوک‌ها را در یک صفحه فرم جداگانه ویرایش نمی‌کنند، بلکه روی خود صفحه ویرایش می‌کنند: کلیک روی متن و نوشتن، اضافه کردن آیتم، کشیدن و رها کردن برای تغییر ترتیب. در نمای عمومی، این لایه ویرایش اصلاً بارگذاری نمی‌شود؛ به این معنی که کد ویرایشگر به مرورگر بازدیدکننده نمی‌رود. این جداسازی از نظر عملکرد و امنیت مهم است.

حسابرسی و تاریخچه نسخه

هر تغییر بلوک با اطلاعات چه کسی و چه زمانی آن را تغییر داده است در گزارش حسابرسی ثبت می‌شود؛ بازبینی‌های محتوا ذخیره می‌شوند و در صورت نیاز می‌توان به نسخه قبلی بازگشت. مجوز انتشار و مجوز ویرایش جدا هستند: یک ویرایشگر ممکن است پیش‌نویس آماده کند اما مجوز انتشار نداشته باشد. این تفکیک نقش به عنوان استاندارد در پنل‌های مشتریان سازمانی ما وجود دارد.

پشته فنی

• رابط کاربری: React، TypeScript، Vite، Tailwind CSS؛ Motion و GSAP برای انیمیشن‌ها.
• داده‌ها: Supabase روی PostgreSQL؛ مجوزها با سیاست‌های Row Level Security.
• اعتبارسنجی: طرح‌واره‌های Zod هم ورودی‌های فرم و هم ساختار محتوا را بررسی می‌کنند.
• استقرار: Docker و Nginx؛ صفحات عمومی در زمان کامپایل پیش‌رندر می‌شوند.

رویکرد تست

طرح‌واره بلوک، توابع نرمال‌سازی و رندر کننده عمومی با تست‌های واحد؛ و سیاست‌های پایگاه داده با تست‌های SQL در حال اجرا بر روی یک PostgreSQL واقعی تایید می‌شوند. قوانینی مانند «بلوک پنهان برای کاربر ناشناس قابل مشاهده نیست» نه تنها در رابط کاربری، بلکه در تست سیاست نیز بررسی می‌شوند. تست کردن یک قانون در دو مکان اضافی نیست، بلکه یک انتخاب آگاهانه از نظر امنیتی است.

اگر پنل مدیریتی مشابه و زیرساخت محتوایی برای سازمان خود می‌خواهید، می‌توانید از طریق خدمات برنامه‌های وب و موبایل ما با ما تماس بگیرید.