SD راهنمای سوپردوپر مارکت صفحه معرفی صفحه اصلی قالب

راهنمای قالب سوپردوپر مارکت

نسخه HTML: برای مطالعه در مرورگر، فایل help/help.html را باز کنید.

سوپردوپر مارکت یک قالب HTML استاتیک و راست‌به‌چپ برای سوپرمارکت آنلاین چندفروشگاهی است: کاربر سبد خرید را می‌بندد، قیمت همان سبد بین فروشگاه‌های اطراف مقایسه می‌شود، فروشنده را انتخاب می‌کند و با پیک یا حضوری تحویل می‌گیرد.

۱۷ صفحه آماده، سه صفحه اصلی با پالت و چیدمان کاملاً مستقل، ۲۰۰ کالای نمونه در ۱۰ دسته‌بندی، و بدون هیچ مرحله build.

نقطه شروع

هدففایل
معرفی قالب و گالری همه صفحاتdemo.html
صفحه اصلی (پالت گرم)home-1-fresh.html
رفتار مشترک همه صفحاتassets/js/superium.js
استایل پایهassets/css/superium.css
رنگ‌ها و توکن‌هاassets/css/superium-palettes.css
داده‌ی کالاهاassets/data/products.js

فهرست مطالب

#موضوعفایل
۱معرفی قالب، مخاطب و محدودیت‌ها01-overview.html
۲شروع سریع (۵ دقیقه)02-quick-start.html
۳اجرای محلی03-local-setup.html
۴نصب روی هاست04-hosting-deployment.html
۵ساختار پوشه‌ها05-folder-structure.html
۶راهنمای صفحات06-pages-guide.html
۷تکنولوژی‌ها و کتابخانه‌ها07-technologies.html
۸شخصی‌سازی08-customization.html
۹معماری JavaScript09-javascript-architecture.html
۱۰CSS و استایل10-css-and-styling.html
۱۱ابزارهای ساخت (اختیاری)11-build-tools.html
۱۲عیب‌یابی12-troubleshooting.html

پیش‌نیازهای حداقلی

  • یک مرورگر مدرن (Chrome، Firefox، Edge، Safari)
  • یک ویرایشگر متن (VS Code پیشنهاد می‌شود)
  • برای انتشار: هر هاستی که فایل استاتیک سرو کند (Apache، Nginx، Netlify، GitHub Pages …)
  • بدون npm، بدون Node.js، بدون مرحله build

پایتون فقط برای بازتولید صفحات لازم است، نه برای استفاده از آن‌ها. اگر ترجیح می‌دهید مستقیم HTML را ویرایش کنید، اصلاً به آن نیاز ندارید (ابزارهای ساخت).

سه کار اول

  1. demo.html را باز کنید تا همه صفحات را یک‌جا ببینید.
  2. رنگ برند را در superium-palettes.css عوض کنید و یکی از صفحات اصلی را رفرش کنید.
  3. متن‌ها را مستقیم در فایل‌های .html ویرایش کنید - ساختارشان استاندارد و بدون قالب‌بندی خاص است.

پشتیبانی

پیش از تماس با پشتیبانی، عیب‌یابی را ببینید؛ بیشتر پرسش‌های رایج همان‌جا پاسخ داده شده. برای انتشار روی هاست هم نصب روی هاست را دنبال کنید.