راهنمای جامع طراحی و ویرایش قالب سایت

۱. ساختار اصلی قالب و نحوه‌ی عملکرد بخش مدیریت قالب

در سیستم جدید قالب‌سازی (قالب‌های نسل جدید با شناسه -tmp)، هر قالب از پنج بخش اصلی کد و یک بخش تنظیمات تشکیل شده است:

• [HEADER]: شامل بخش بالایی سایت (هدر)، منوی اصلی و تگ‌های ابتدایی HTML.
• [MAIN]: محتوای اصلی صفحه اصلی مانند اسلایدر، معرفی خدمات، آخرین اخبار و مقالات.
• [FOOTER]: شامل بخش پایینی سایت (فوتر)، اسکریپت‌های نهایی و تگ‌های پایانی HTML.
• [STYLE]: کدهای CSS خالص برای استایل‌دهی به قالب (ذخیره در فایل style.css).
• [SCRIPT]: کدهای جاوا اسکریپت خالص برای عملکردهای قالب (ذخیره در فایل script.js).
• [TEMPLATECONFIG]: تنظیمات قابل ویرایش قالب و فیلدهای سفارشی در فرمت کد JSON.

۲. متغیرهای پایه و سینتکس اصلی

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

متن‌ها (Texts)

برای نمایش متون قابل ویرایش از پنل، از فرمت {{mN | متن_پیش‌فرض}} استفاده کنید. N یک عدد یکتا است.

<h1>{{m41 | به وب‌سایت ما خوش آمدید}}</h1>

تصاویر (Images)

برای تصاویر از فرمت {{imgID | آدرس_تصویر_پیش‌فرض}} استفاده کنید. ID یک شناسه یکتا است.

<img src="{{img50 | https://picsum.photos/800/600}}" alt="توضیحات تصویر">

لینک‌ها (Links)

برای لینک‌ها حتماً از جفت متغیر {{linkN}} برای آدرس و {{linktitleN}} برای عنوان استفاده کنید.

<a href="{{link20}}" title="{{linktitle20}}">{{linktitle20}}</a>

رنگ‌ها و فونت‌ها

شما می‌توانید رنگ‌ها و فونت‌های اصلی قالب را به صورت متغیر تعریف کنید تا کاربر بتواند از پنل مدیریت آن‌ها را تغییر دهد.

.header {
    background-color: {{color1 | #3498db}};
}
body {
    font-family: '{{font1 | vazir}}', sans-serif;
}

دستورات شرطی (Conditions)

موتور قالب‌ساز جدید امکان استفاده از دستورات شرطی {{if key}} ... {{endif}} را فراهم کرده است. در صورتی که متغیر یا کلید مورد نظر مقدار داشته باشد (خالی یا undefined نباشد)، محتوای داخل شرط نمایش داده می‌شود.

{{if description}}
  <p class="desc">{{description}}</p>
{{endif}}

۳. کار با لیست‌های اطلاعاتی (حلقه‌ها)

برای نمایش لیست‌هایی از اطلاعات که از دیتابیس خوانده می‌شوند (مانند اخبار، محصولات، اسلایدها)، از حلقه‌های foreach استفاده می‌کنیم.

فرمت کلی: {{foreach listName | JSON_Default | MaxItems | Filter}} ... {{endforeach}}

لیست‌های اصلی سیستم

<div class="news-section">
  {{foreach news | [] | 3 | newest}}
    <div class="news-item">
      <a href="{{link}}">
        <img src="/files/{{pic}}">
        <h3>{{title}}</h3>
      </a>
    </div>
  {{endforeach}}
</div>

۴. ساخت لیست‌های سفارشی (ListN)

گاهی نیاز دارید لیست‌هایی بسازید که در سیستم تعریف نشده‌اند، مانند "لیست ویژگی‌ها"، "نظرات مشتریان" یا "اعضای تیم". در این موارد از استراتژی listN استفاده کنید.

این لیست‌ها به شما اجازه می‌دهند یک بخش تکرارشونده با محتوای دلخواه بسازید که مدیر سایت بتواند آیتم‌های آن را از پنل مدیریت کم یا زیاد کند.

<div class="features">
  {{foreach list1 | [{"title":"عنوان پیش‌فرض", "desc":"توضیحات...", "icon":"default.png"}] }}
    <div class="feature-item">
      <img src="/files/{{icon}}" alt="{{title}}">
      <h3>{{title}}</h3>
      <p>{{desc}}</p>
    </div>
  {{endforeach}}
</div>

{
  "list1": {
    "title": "لیست ویژگی‌های صفحه اصلی",
    "type": "list",
    "listconfig": [
      { "name": "title", "title": "عنوان ویژگی", "type": "txt" },
      { "name": "desc", "title": "توضیحات کوتاه", "type": "txt" },
      { "name": "icon", "title": "تصویر/آیکن", "type": "image" }
    ]
  }
}

۵. فعال‌سازی ویرایشگر دیداری (دکمه‌های ویرایش)

برای اینکه مدیر سایت بتواند مستقیماً از روی سایت محتوا را ویرایش کند، باید دکمه‌های ویرایش را در قالب خود قرار دهید. این کار با قرار دادن شناسه متغیر در دو براکت [[]] انجام می‌شود.

• متن‌ها: دکمه ویرایش را بلافاصله بعد از تگ قرار دهید. مثال: <h1>{{m1}}</h1>[[m1]]
• لینک‌ها: بلافاصله بعد از تگ </a> قرار دهید. مثال: <a href="{{link1}}">...</a>[[link1]]
• تصاویر: بعد از تگ <img> و در داخل تگ والد آن قرار دهید.
• لیست‌ها: قبل از شروع حلقه foreach قرار دهید. مثال: [[news]] {{foreach news}}...

۶. استفاده از دستیار هوش مصنوعی برای ساخت قالب

شما می‌توانید از دستیار هوش مصنوعی برای تولید خودکار کدهای قالب استفاده کنید. کافی است درخواست خود را به زبان ساده و واضح برای او بنویسید.