شخصی‌سازی

دو راه برای ویرایش

راه	چه وقت	چطور
مستقیم روی HTML	تغییرات معمولی: متن، لینک، ترتیب بخش‌ها	همان فایل `.html` را باز و ویرایش کنید
از طریق مولدها	وقتی یک تغییر باید در همه‌ی ۱۷ صفحه اعمال شود	فایل‌های `tools/*.py` را عوض کنید و دوباره بسازید

اگر مولدها را اجرا کنید، فایل‌های HTML بازنویسی می‌شوند و ویرایش‌های دستی از بین می‌رود. یکی از دو راه را انتخاب کنید. جزئیات در ابزارهای ساخت.

رنگ‌ها

تنها فایلی که رنگ را مقدار می‌دهد superium-palettes.css است. بقیه‌ی استایل‌ها فقط var(--sp-*) مصرف می‌کنند.

.sp-theme--fresh {
  --sp-primary: #f2600c;        /* رنگ اصلی برند */
  --sp-primary-strong: #d34e05; /* حالت hover */
  --sp-primary-soft: #fff1e7;   /* پس‌زمینه‌ی ملایم */
  --sp-accent: #16a34a;         /* رنگ مکمل */
  --sp-bg: #fdf7f1;             /* زمینه‌ی صفحه */
  --sp-surface: #ffffff;        /* کارت‌ها */
  --sp-text: #241a12;
  --sp-border: #ece2d8;
  --sp-radius-lg: 20px;
}

برای یک برند نارنجی، فقط --sp-primary و دو مشتقش را عوض کنید؛ کل قالب همراهش می‌آید.

سه پالت به‌صورت کلاس روی <body> اعمال می‌شوند و کاملاً از هم جدا هستند:

<body class="sp-page sp-theme--fresh">     <!-- گرم -->
<body class="sp-page sp-theme--aqua">      <!-- سرد -->
<body class="sp-page sp-theme--graphite">  <!-- تیره -->

برای پوسته‌ی جدید، یک بلوک .sp-theme--mybrand با همان توکن‌ها بنویسید و کلاس <body> صفحات را عوض کنید. هیچ فایل دیگری تغییر نمی‌کند.

فونت

بلوک‌های @font-face در بالای superium.css و دو توکن در superium-palettes.css:

--sp-font: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
--sp-font-display: 'Rokh', 'Vazirmatn', ui-sans-serif, sans-serif;

فایل woff2 خودتان را در assets/fonts/ بگذارید، @font-face را به آن اشاره دهید و نام را در توکن عوض کنید.

لوگو، نام برند و فاویکون

مورد	کجا
علامت SVG لوگو	تابع `logo_mark()` در tools/layout.py - یا مستقیم داخل HTML هر صفحه
نام برند	ثابت `BRAND` در همان فایل
فاویکون	assets/images/brand/favicon.svg

اگر مستقیم روی HTML کار می‌کنید، لوگو در ابتدای <header class="sp-header"> هر صفحه است.

منو و دسته‌بندی‌ها

در tools/layout.py:

NAV_LINKS - نوار لینک‌های بالای صفحه
MEGA_COLUMNS - ستون‌های مگامنو
CATEGORY_META - نام و اسلاگ دسته‌بندی‌ها در منو و درور موبایل

برای ویرایش دستی، همین بخش‌ها را در HTML هر صفحه پیدا کنید (کلاس‌های sp-nav-row و sp-mega).

کالاها

منبع حقیقت assets/data/products.json است و products.js همان داده برای مرورگر. ساختار هر کالا:

{
  id: "dairy-1234567",
  title: "شیر پرچرب مدت‌دار کاله ۱ لیتری",
  category: "dairy",
  categoryTitle: "لبنیات و پروتئین",
  price: 89000,          // قیمت پیش از تخفیف (تومان)
  discount: 12,          // درصد تخفیف
  discountRatio: 12,
  final: 78320,          // قیمت نهایی
  image: "assets/images/products/dairy/01.webp",
  thumb: "assets/images/products/dairy/01-sm.webp"
}

برای کاتالوگ خودتان یکی از این دو راه:

دستی: products.js را ویرایش کنید (و اگر مولدها را اجرا می‌کنید، products.json را هم).
با ابزار: عنوان‌ها را در tools/catalogue.py عوض کنید و fetch_products.py را اجرا کنید تا داده و تصاویر بازتولید شوند.

تصاویر کالا

کافی است فایل هم‌نام را در همان مسیر جایگزین کنید؛ هیچ کد یا صفحه‌ای تغییر نمی‌خواهد:

assets/images/products/dairy/01.webp      ۶۰۰×۶۰۰ برای کارت و صفحه کالا
assets/images/products/dairy/01-sm.webp   ۳۰۰×۳۰۰ برای سبد و لیست‌های کوچک

متن‌ها و ارقام فارسی

همه‌ی اعداد با ارقام فارسی و جداکننده‌ی هزارگان نمایش داده می‌شوند. در جاوااسکریپت تابع fa() این کار را می‌کند:

<span x-text="fa(12500)"></span>   <!-- ۱۲,۵۰۰ -->

اگر عدد ثابتی را دستی در HTML می‌نویسید، خودتان با ارقام فارسی بنویسید تا با بقیه‌ی صفحه یکدست بماند.

واحد پول

کلمه‌ی «تومان» در کنار قیمت‌ها به‌صورت متن ثابت آمده. برای ریال یا هر واحد دیگر، در HTML جستجو و جایگزین کنید - یا اگر با مولدها کار می‌کنید، در tools/components.py (تابع product_card) و صفحات مربوطه.