شخصی‌سازی قالب
نام و برند
متن
نام «پریمیوم کارت» در این جاها آمده است:
</code> و <code>meta description</code> هر صفحه</li> <li>ثابت <code>BRAND_NAME</code> در <a href="../assets/js/premium.js"><code>assets/js/premium.js</code></a></li> <li><a href="../_partials/"><code>_partials/</code></a>: نوار بالا، فوتر و منوی موبایل (بعد از ویرایش، همگامسازی را اجرا کنید؛ پایین‌تر)</li> <li>نوار و فوتر سه صفحه اصلی، که مستقیم در خود آن فایل‌ها نوشته شده‌اند</li> </ul> <h3 id="نشانه">نشانه</h3> <p>نشانه کارت یک SVG درون‌خطی است (یک مسیر ۳۰×۲۰ کنار نام) و آیکون مرورگر در <code>assets/images/favicon.svg</code> است. هر دو با <code>currentColor</code> یا رنگ‌های پالت کشیده شده‌اند.</p> <h3 id="ایمیل-و-راههای-تماس">ایمیل و راههای تماس</h3> <p>جستجو برای <code>info@premiumcard.ir</code>، <code>t.me/premiumcard</code>، <code>wa.me/989100000000</code> و <code>۰۲۱-۹۱۰۰۰۰۰۰</code> و جایگزینی با اطلاعات خودتان. شماره تلفن و شناسه‌ها نمونه‌اند.</p> <h2 id="همگامسازی-نوار-و-فوتر">همگامسازی نوار و فوتر</h2> <p>صفحه‌های داخلی نوار بالا، فوتر، منوی موبایل و لینک‌های <code><head></code> را از <code>_partials/</code> می‌گیرند. هر کدام بین دو کامنت قرار دارد:</p> <pre><code class="language-html"><!-- pc:bar --> ... <!-- /pc:bar --> </code></pre> <p>بعد از ویرایش یکی از فایل‌های <code>_partials/pc-*.html</code>، از ریشه پروژه اجرا کنید:</p> <pre><code>node scripts/sync-partials.mjs </code></pre> <p>اسکریپت فقط بین کامنت‌ها را عوض می‌کند. اجرای چندباره چیزی را دوباره تغییر نمی‌دهد. صفحه‌ها بدون این اسکریپت هم کامل کار می‌کنند؛ فقط برای ویرایش یک‌جا لازم است.</p> <h2 id="رنگ-و-فونت">رنگ و فونت</h2> <p>همه رنگ‌ها و اندازه‌ها توکن‌اند؛ جزئیات در <a href="10-css-and-styling.html">CSS و استایل</a>.</p> <ul> <li><strong>رنگ برند:</strong> <code>--ink</code>، <code>--accent</code> و <code>--field-1</code> در <code>:root</code> فایل <a href="../assets/css/pc-tokens.css"><code>pc-tokens.css</code></a>. همین سه رنگ دکمه‌ها، متن و فوتر را می‌سازند. نسخه تاریک زیر <code>:root[data-theme="dark"]</code> است.</li> <li><strong>فونت:</strong> هر سه فونت از فونت‌های رایج وب فارسی‌اند و محلی در <code>assets/fonts/</code> قرار دارند (woff2): دانا با اعداد فارسی (صفحه اصلی اول و همه صفحه‌های داخلی)، ایران‌یکان (صفحه اصلی دوم) و کلمه (صفحه اصلی سوم). برای تعویض، فایل woff2 را در <code>assets/fonts/</code> بگذارید و <code>@font-face</code> بالای <code>pc-tokens.css</code> را عوض کنید.</li> <li>هر صفحه فقط یک خانواده فونت دارد؛ فونت دوم اضافه نکنید.</li> </ul> <h2 id="آیکونها">آیکونها</h2> <p>آیکونها از <a href="https://phosphoricons.com">Phosphor</a> هستند و محلی در <code>assets/vendor/phosphor/</code> قرار دارند (وزن regular و bold):</p> <pre><code class="language-html"><i class="ph ph-shopping-bag" aria-hidden="true"></i> <i class="ph-bold ph-check" aria-hidden="true"></i> </code></pre> <p>آیکون فقط برای کنترل‌ها و راهنمای کوچک است. دکمه‌ای که فقط آیکون دارد باید <code>aria-label</code> داشته باشد.</p> <h2 id="سرویسها-و-قیمتها">سرویسها و قیمتها</h2> <p>همه در <a href="../assets/js/premium.js"><code>assets/js/premium.js</code></a>:</p> <div class="docs-table-wrap"><table class="docs-table"> <thead><tr><th>داده</th><th>کاربرد</th></tr></thead> <tbody> <tr><td><code>DIGITAL_CATALOG</code></td><td>سرویس‌های اصلی با پلن، قیمت، ویژگی و پرسش</td></tr> <tr><td><code>EXTRA_SERVICES</code></td><td>سرویس‌های فهرست قیمت (نمونه؛ پیش از انتشار تأیید کنید)</td></tr> <tr><td><code>CATALOG_META</code></td><td>نام کوتاه، نشان سرویس (<code>assets/images/marks/</code>) و شماره عکس هر سرویس</td></tr> <tr><td><code>CATEGORY_LIST</code></td><td>دسته‌ها و ترتیبشان در فهرست قیمت</td></tr> <tr><td><code>blogArticles</code></td><td>مقاله‌های مجله</td></tr> </tbody></table></div> <p>قیمتها به تومان و عدد ساده‌اند (<code>890000</code>). نمایش فارسی با <code>formatPrice()</code> و <code>priceShort()</code> انجام می‌شود.</p> <h2 id="عکسها">عکسها</h2> <p>عکسها در <code>assets/images/photos/</code> در سه برش‌اند: <code>wide/</code> (۱۶۰۰×۱۰۰۰)، <code>tall/</code> (۹۶۰×۱۲۰۰) و <code>square/</code> (۱۰۰۰×۱۰۰۰). همه WebP هستند و با <code>photo(id, 'tall')</code> در جاوااسکریپت ساخته می‌شوند. منبع و عکاس هر کدام در <a href="CREDITS.html"><code>CREDITS.md</code></a> آمده است.</p> <p>عکسها دنیای خریدار را نشان می‌دهند (میز کار، گوشی، کتاب، موسیقی). برای جایگزینی، فایل خودتان را با همان نام و برش بگذارید.</p> <h2 id="سبد-خرید-و-ورود-دمو">سبد خرید و ورود دمو</h2> <ul> <li>سبد در <code>sessionStorage</code> با کلید <code>dsCart</code> نگه داشته می‌شود، پس بین صفحه‌ها می‌ماند. اتصال به بک‌اند: <code>dsLoadCart()</code> و <code>dsSaveCart()</code> در <code>premium.js</code>.</li> <li>ورود دمو با کلید <code>dsAuth</code> است (<code>dsIsLoggedIn()</code>)، و صفحه پرداخت فقط به صفحه تأیید می‌رود. هر دو را پیش از انتشار به سرور و درگاه واقعی وصل کنید.</li> </ul> <h2 id="meta-و-SEO">meta و SEO</h2> <p>در <code><head></code> هر صفحه <code>title</code>، <code>description</code> و <code>theme-color</code> را عوض کنید. <code>theme-color</code> با رنگ اولین بخش صفحه هم‌خوان است.</p> <h2 id="گام-بعدی">گام بعدی</h2> <ul> <li><a href="09-javascript-architecture.html">معماری جاوااسکریپت</a></li> <li><a href="10-css-and-styling.html">CSS و استایل</a></li> </ul> </article> <footer class="docs-footer"> <p>قالب پریمیوم کارت · مستندات</p> <p><a href="index.html">بازگشت به فهرست</a></p> </footer> </main> </div> </body> </html>