ابزارهای ساخت (اختیاری)
این بخش را فقط وقتی لازم دارید که بخواهید صفحات را بازتولید کنید. برای استفاده از قالب هیچکدام از اینها لازم نیست: فایلهای HTML محصول نهاییاند و مستقیم قابل ویرایش.
چرا مولد؟
۱۷ صفحه، همگی با یک هدر، مگامنو، درور موبایل و فوتر مشترک. تغییر یک لینک در منو یعنی ویرایش ۱۷ فایل. مولدها همان تغییر را یکبار میگیرند و همهی صفحات را دوباره مینویسند.
پیشنیاز
- پایتون ۳.۱۰ یا بالاتر
- برای تصاویر:
pip install pillow - برای اسکرینشات تمامصفحه:
pip install playwright(مرورگر نصبشدهی خودتان استفاده میشود؛ چیزی دانلود نمیشود)
فایلها
| فایل | کار |
|---|---|
tools/catalogue.py | عنوانهای فارسی کالاها، دستهبندیها و کلیدواژههای جستجو |
tools/fetch_products.py | ساخت داده و تصاویر کالا، تولید products.json و docs/image-credits.md |
tools/layout.py | هدر، مگامنو، درور، فوتر، آیکونها، نام برند |
tools/components.py | کارت کالا، ریل، نمایشهای دستهبندی، بردکرامب، حالت خالی |
tools/pages_*.py | بدنهی هر گروه از صفحات |
tools/build_pages.py | ساخت همهی HTMLها + products.js + pages.json |
tools/shots.py | اسکرینشات تمامصفحهی همهی صفحات (دسکتاپ و موبایل) |
tools/build_demo.py | ساخت demo.html از روی pages.json و اسکرینشاتها |
help/_build_html.py | ساخت همین مستندات از روی فایلهای .md |
دستورهای رایج
# ساخت همهی صفحات
python tools/build_pages.py
# فقط صفحاتی که «market» در نامشان است
python tools/build_pages.py market
# اسکرینشات یک صفحه
python tools/shots.py --only cart
# اسکرینشات همه (تمامصفحه، خروجی WebP)
python tools/shots.py
# بازسازی صفحهی معرفی
python tools/build_demo.py
# بازسازی مستندات
python help/_build_html.py
ترتیب درست
بعد از تغییر در کاتالوگ یا تصاویر:
python tools/fetch_products.py --source art # داده و تصاویر
python tools/build_pages.py # صفحات
python tools/shots.py # اسکرینشاتها
python tools/build_demo.py # صفحهی معرفی
تصاویر کالا و مسئلهی حقوقی
fetch_products.py سه منبع دارد:
| منبع | کیفیت | پروانه | مناسب برای |
|---|---|---|---|
snapp (پیشفرض بسته) | عالی، عکس استودیویی روی زمینهی سفید | متعلق به تولیدکننده - برای انتشار مجدد آزاد نیست | نمونهسازی و ارائه به کارفرما |
art | تصاویر برداری تولیدشده، تمیز ولی انتزاعی | کاملاً متعلق به شما | فروش و انتشار مجدد |
off | عکس واقعی ولی بسیار متغیر | CC-BY-SA ۳.۰ | وقتی حتماً عکس واقعی میخواهید |
⚠ پیش از فروش یا انتشار مجدد قالب، تصاویر را بازتولید کنید:
python tools/fetch_products.py --source art
هر سه منبع دقیقاً یک ساختار خروجی دارند؛ هیچ صفحهای نیاز به ویرایش ندارد. فهرست منبع هر فایل در docs/image-credits.md نگهداری میشود.
اسکرینشاتها
shots.py تمام صفحه را از هدر تا فوتر میگیرد، در دو عرض دسکتاپ (۱۴۴۰) و موبایل (۳۹۰)، و خروجی WebP در assets/images/shots/ میگذارد.
- اگر Playwright نصب باشد، از مرورگر نصبشدهی خودتان استفاده میکند و کل صفحه را میگیرد.
- اگر نصب نباشد، به حالت «تا اندازهی پنجره» برمیگردد و همان را اعلام میکند.
--viewportهمان حالت کوتاه را بهاجبار انتخاب میکند.
هشدار مهم
اجرای build_pages.py فایلهای HTML را بازنویسی میکند. اگر مستقیم روی HTML کار کردهاید، یا مولدها را اجرا نکنید، یا همان تغییر را در tools/*.py هم اعمال کنید.