ساخت قالب برای وبلاگ شخصی در بلاگفا

قالب وبلاگ – نگاه کلی

قبل از هرچیزی خوبه که بدونیم قالب وبلاگ یعنی ظاهر وبلاگ ما. این یعنی مجموعه‌ای از کدهای HTML و CSS و کدهای مخصوص بلاگفا که نحوه نمایش محتوای مارو مشخص می‌کنن. توی این پست در مورد مزایای ساخت قالب اختصاصی برای وبلاگمون بحث می‌کنیم و بعد از اون یک قالب برای بلاگفا درست می‌کنیم. با اینکه توی این پست روی ساخت قالب بلاگفا تمرکز می‌کنیم، منطق کلی طراحی و پیاده‌سازی در سرویس‌های وبلاگ‌دهی دیگه هم مشابهه؛ کدهای اختصاصی هر سرویس فرق دارن.

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

قبل از شروع

از اونجایی که ساختار و ظاهر صفحه‌های معمول وب تا حد زیادی با HTML و CSS شکل می‌گیره، آشنایی با این موارد برای ساخت قالب بلاگفا هم ضروریه. پس با وجود اینکه سعی کردم تا جای ممکن کامل و واضح در مورد تمام مطالب توضیح بدم، برای استفاده از این مطلب و ساخت قالب وبلاگ، به آشنایی نسبی با HTML و CSS نیاز خواهد بود. توی این پست تمرکز اصلی روی ساخت قالب برای پلتفرم بلاگفا خواهد بود تا از این طریق، با مراحل ساخت قالب وبلاگ و مفاهیمی مثل کدهای اختصاصی و غیره آشنا بشیم.

همون طور که گفتم، برای ساخت قالب برای وبلاگ، باید با HTML و CSS آشنا باشید. دونستن جاوا اسکریپت ضروری نیست اما می تونه مفید باشه. اگر هنوز با اچ تی ام ال و سی اس اس آشنا نیستید، می‌تونید از راهنمای HTML در بلو وب کلاب شروع کنید. منابع زیادی هم برای یادگیری HTML و CSS توی اینترنت وجود دارن. مثلا، سایت w3schools.com یک منبع عالی برای یادگیریه. آموزش های HTML و CSS زیادی به صورت رایگان و غیر رایگان به فارسی هم وجود دارن که می تونید از اونا هم استفاده کنید. به علاوه اگر کنجکاو بودید، می تونید کمی بیشتر درمورد اینکه وب چیه و چطور کار می کنه هم بخونید.

اهمیت قالب وبلاگ

توی مقایسه ی پلتفرم های وبلاگ نویسی، فهمیدیم هر کدومشون مزایا و معایبی دارن و نهایتا باید باهاشون سوخت و ساخت. بعضی از قالب‌های آماده سرویس‌های وبلاگ‌دهی رایگان مثل بلاگفا از نظر ظاهر، خوانایی یا نمایش در موبایل با چیزی که برای وبلاگمون می‌خواهیم فاصله دارن. به علاوه، خیلی از قالب‌های آماده در دسترس بقیه هم هستن و ممکنه ظاهر وبلاگمون شبیه وبلاگ‌های دیگه بشه. ساخت قالب اختصاصی به ما اجازه می‌ده ظاهر دلخواه‌مون رو بسازیم و به چیزهایی مثل ساختار درست صفحه، خوانایی و نمایش مناسب در موبایل توجه کنیم. این کار به‌تنهایی رتبه یا بازدید وبلاگ رو بالا نمی‌بره، ولی می‌تونه بخشی از تجربه بهتر خواننده باشه. در نهایت، می‌تونیم ظاهر وبلاگ رو با نیاز و سلیقه خودمون هماهنگ کنیم.

ویژگی های قالب وبلاگ خوب

برای من، دو ویژگی مهم یک قالب خوب اینه که بازدیدکننده بتونه راحت مطلب رو پیدا کنه و بخونه، و صفحه هم ساختار HTML روشن و نمایش مناسبی در اندازه‌های مختلف داشته باشه. چیدمان مناسب به خوانایی کمک می‌کنه؛ استفاده درست از عنوان‌ها و بخش‌های HTML هم ساختار محتوا رو برای مرورگر و موتور جست‌وجو روشن‌تر می‌کنه.

آماده سازی محیط کار برای ساخت قالب

من برای طراحی قالب، از نرم‌افزار Adobe XD و برای نوشتن کدهای HTML و CSS قالب، از نرم‌افزار VS Code استفاده کردم که رایگانه. ولی شما می‌تونید از هر کد ادیتور دیگه ای که می‌خواید هم استفاده کنید. حتی همونطور که اکثر آموزش های مقدماتی HTML میگن، می‌تونید از نوت پد هم استفاده کنید. البته من این کارو به هیچ عنوان توصیه نمیکنم چون استفاده از یک تکست ادیتور خوب مثل ویژوال استودیو کد (VS Code) می‌تونه کار مارو خیلی راحت و سریع تر کنه.

افزونه live server برای دیدن تغییرات صفحات اچ تی ام ال در مرورگر بدون نیاز به رفرش کردن صفحه.

ساخت قالب بلاگفا

مسیر این قالب برای من از طراحی ظاهر در Adobe XD شروع شد، بعد ساختار و ظاهرش رو با HTML و CSS پیاده کردم و در مرحله آخر کدهای اختصاصی بلاگفا رو بهش اضافه کردم. طرح اولیه فقط یک تصویر از صفحه بود؛ تا وقتی به کد تبدیل نشه و به داده‌های بلاگفا وصل نشه، مطالب واقعی وبلاگ رو نمایش نمی‌ده. این روند مربوط به پروژه‌ایه که چند سال پیش شروع کردم، نه طراحی تازه‌ای با ابزارهای امروزی.

طراحی قالب وبلاگ

برای طراحی قالب وبلاگ من از نرم‌افزار Adobe XD استفاده کردم که یه نرم‌افزار مخصوص طراحی رابط کاربری و تجربه کاربریه. رابط کاربری یا UI یک وب‌سایت در حقیقت همون ظاهر گرافیکیشه که کاربر ها از طریق اون با وب سایت ما ارتباط برقرار می‌کنن. تجربه کاربری یا UX، همون طور که از اسمش پیداست به معنی تجربه و احساس کاربران موقع استفاده از رابط کاربری و خدمات وب‌سایت ماست. رابط کاربری خوانا و مسیر روشن برای پیدا کردن مطالب می‌تونه استفاده از وبلاگ رو برای بازدیدکننده راحت‌تر کنه.

برای اینکه بازدیدکننده‌ها بتونن مطالب مورد نظرشون رو پیدا کنن و راحت بخونن، چیدمان صفحه مهمه. اگر پیدا کردن مطلب مورد نظر سخت باشه، کاربر ممکنه از ادامه گشتن در وبلاگ منصرف بشه. رعایت اصول طراحی رابط کاربری می‌تونه جلوی سردرگمی خواننده رو بگیره. این چیزها به‌تنهایی بازگشت بازدیدکننده رو تضمین نمی‌کنن، اما دلیل خوبی هم نیست که خواننده رو با یک صفحه شلوغ یا گیج‌کننده روبه‌رو کنیم.

عکس بالا طرح اولیه‌ایه که چند سال پیش خودم در Adobe XD کشیدم. کدی که پایین‌تر می‌بینید، پیاده‌سازی ساده‌شده‌ای بر اساس همین طرحه، نه بازسازی دقیق تک‌تک فاصله‌ها و جزئیات تصویر. تمرکزم این بود که مسیر خواندن مطلب روشن باشه و نوشته‌ها از منوی کناری جدا دیده بشن. امروز ابزارهای طراحی دیگه‌ای هم در دسترسن؛ Adobe XD هم حالا در حالت نگهداری قرار داره. اما چون این طرح رو واقعاً با XD ساخته‌ام، اسمش رو در روایت ساخت پروژه نگه می‌دارم. وضعیت فعلی Adobe XD

اشتباهات رایج در طراحی رابط کاربری

حالا که از اهمیت طراحی و رعایت قواعد طراحی رابط کاربری صحبت کردیم، خوبه که باهم چندتا از اشتباهات رایج که افراد موقع طراحی انجام میدنو بررسی کنیم. موقع طراحی UI (User Interface) سایت، بهتره که از رنگ های زیاد استفاده نکنیم. استفاده از یک پالت رنگی محدود کمک می‌کنه اجزای صفحه هماهنگ‌تر به نظر برسن. اشتباه رایج دیگه ای که خیلی از طراح ها انجام میدن، استفاده از فونت های مختلفه. بهتره تعداد فونت‌ها محدود باشه و برای تیترها و متن اصلی یک الگوی ثابت داشته باشیم.

برای طراحی UI مناسب برای وب سایت ها و اپلیکیشن ها باید با اصول طراحی آشنا باشید. منابع زیادی برای یاد گیری به زبان اینگلیسی و فارسی توی سطح اینترنت وجود دارن که می تونید از اونا برای یادگیری این حوزه استفاده کنید.

HTML و CSS برای ساخت قالب وبلاگ

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

از روی طرح چه چیزهایی باید بسازیم؟

در تصویر، بالای صفحه یک نوار تیره داریم که نام وبلاگ سمت چپ و دو لینک «صفحه اصلی» و «درباره من» سمت راست اون قرار گرفتن. پایین نوار، نوشته‌ها در ستون پهن‌ترِ سمت چپ و یک کادر منو در ستون باریکِ سمت راست دیده می‌شن. پس‌زمینه خاکستری روشنه، نوشته‌ها داخل کادرهای سفید قرار دارن و خط زیر عنوان و دکمه «ادامه مطلب» بنفش هستن. در نسخه ثابت می‌تونیم دو کارت نمونه بگذاریم تا چیدمان رو ببینیم. بعداً در قالب بلاگفا یک کارت رو داخل بلاک تکرار مطالب می‌گذاریم.

در تصویر، متن داخل منو آزمایشیه و لینک «درباره من» هم فقط بخشی از طرحه. اگر در وبلاگتون صفحه‌ای برای معرفی خودتون ساخته‌اید، بعداً می‌تونید نشانی اون صفحه رو جای لینک نمونه بگذارید. منوی سمت راست رو هم می‌تونیم با موضوعات یا آرشیو واقعی وبلاگ پر کنیم. تصویری از فوتر در طرح دیده نمی‌شه؛ اگر بخواهید، افزودن یک فوتر ساده انتخاب خودتونه.

اول HTML، بعد CSS

HTML مشخص می‌کنه هر بخش چیست: هدر، محتوای اصلی، هر نوشته و منوی کناری. CSS مشخص می‌کنه این بخش‌ها چطور دیده می‌شن: پهنای ستون‌ها، رنگ‌ها، فاصله‌ها و رفتار صفحه در موبایل. مثلاً یک نسخه خیلی ساده و ثابت از بخش نوشته می‌تونه این شکلی باشه:

<article class="post-card">
  <p class="post-category">دسته‌بندی</p>
  <h2>موضوع مطلب</h2>
  <p class="post-meta">نویسنده: نام نویسنده | تاریخ: ۱۴۰۰/۱/۱</p>
  <div class="post-content">متن آزمایشی مطلب اینجا قرار می‌گیره.</div>
  <a class="read-more" href="#">ادامه مطلب</a>
</article>

اگر همین قطعه رو در یک صفحه HTML بگذارید و با مرورگر باز کنید، محتوا دیده می‌شه؛ ولی عنوان و تاریخ همون متن ثابت نمونه باقی می‌مونن. اینجا به کدهای بلاگفا نیاز داریم.

کدهای بلاگفا چطور کار می‌کنن؟

بلاگفا بعضی عبارت‌های مخصوص قالب رو موقع نمایش صفحه با اطلاعات وبلاگ جایگزین می‌کنه. برای مثال، <-BlogTitle-> عنوان وبلاگ و <-PostTitle-> عنوان یک مطلب رو نشان می‌ده. کدهای عمومی مثل عنوان وبلاگ تقریباً در هر جای قالب قابل استفاده هستن، ولی کدهای مربوط به هر نوشته باید داخل بلاک <BLOGFA> ... </BLOGFA> قرار بگیرن. بلاگفا محتوای این بلاک رو برای نوشته‌های صفحه تکرار می‌کنه. کوچک و بزرگ بودن حروف کدها هم مهمه؛ اون‌ها رو دقیق بنویسید. راهنمای رسمی کدهای قالب بلاگفا فهرست کامل کدها و محدوده استفاده از هر بلاک رو توضیح داده.

به تفاوت دو نوع موضوع دقت کنید: موضوع بالای هر کارت مطلب باید به همون مطلب مربوط باشه؛ موضوعات داخل منوی کناری فهرست موضوعات کل وبلاگ هستن. برای همین هم بلاک‌های متفاوتی دارن. همین‌طور <-PostContent-> داخل بلاک نوشته قرار می‌گیره و با <-BlogDescription-> که توضیح کل وبلاگه فرق داره.

تبدیل طرح ثابت به قالب بلاگفا

برای دیدن تغییر در یک بخش کوچک، این قطعه ثابت رو در نظر بگیرید:

<h2>موضوع مطلب</h2>
<p>متن آزمایشی مطلب</p>

همون بخش، وقتی به نوشته‌های بلاگفا وصل بشه، می‌تونه این شکلی باشه:

<BLOGFA>
  <article>
    <h2><-PostTitle-></h2>
    <div><-PostContent-></div>
  </article>
</BLOGFA>

عنوان و متن ثابت رو با کدهای مطلب جایگزین کردیم و کارت رو داخل <BLOGFA> گذاشتیم تا برای نوشته‌های صفحه تکرار بشه. در قالب کامل، لینک‌ها، تاریخ، موضوع و ظاهر کارت رو هم اضافه می‌کنیم.

حالا کار اصلی رو انجام می‌دیم: متن‌های آزمایشی طرح رو با کدهای واقعی جایگزین می‌کنیم. مثلاً «وبلاگ من» در هدر می‌شه <-BlogTitle->، «موضوع مطلب» می‌شه <-PostTitle-> و متن ساختگی زیر اون می‌شه <-PostContent->. برای تکرار کارت‌ها، کل <article> رو داخل <BLOGFA> قرار می‌دیم. تاریخ و نام نویسنده هم از اطلاعات همون مطلب میان.

برای لینک «ادامه مطلب» از بلاک <BlogExtendedPost> استفاده می‌کنیم. این بلاک فقط برای نوشته‌هایی نمایش داده می‌شه که بخش «ادامه مطلب» دارن. اگر همه مطلب‌ها رو با یک لینک ثابت به اسم «ادامه مطلب» پیوند بدیم، برای نوشته‌هایی که ادامه ندارن هم دکمه بی‌دلیل دیده می‌شه. لینک عنوان مطلب جداگانه همیشه می‌تونه به صفحه خود مطلب بره.

کد قالب

کد پایین مربوط به بخش «صفحه اصلی و پست‌ها» در ویرایش قالب بلاگفاست. این قالب رو روی بلاگفا اجرا کرده‌ام و کار می‌کنه؛ شکل کلی طرح اولیه رو می‌گیره، ولی قرار نیست کپی دقیق پیکسل‌های تصویر باشه. اگر می‌خواهید همین ظاهر در آرشیو و صفحات جداگانه هم اعمال بشه، باید قالب‌های مربوط به اون بخش‌ها رو هم بررسی و تنظیم کنید. نشانی صفحه «درباره من» را فقط در صورتی نگه دارید که صفحه‌ای با شناسه about ساخته باشید؛ در غیر این صورت اون لینک رو تغییر بدید یا بردارید.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><-BlogAndPostTitle-></title>
  <meta name="description" content="<-BlogDescription->">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; background: #f0f1f3; color: #383838;
      font-family: Tahoma, sans-serif; line-height: 1.9; }
    a { color: inherit; text-decoration: none; }
    a:hover, a:focus-visible { text-decoration: underline; }
    .wrap { width: min(1100px, calc(100% - 32px)); margin-inline: auto; }
    .site-header { background: #363636; color: #fff; }
    .header-inner { min-height: 56px; display: flex; align-items: center;
      justify-content: space-between; gap: 20px; }
    .site-name { font-weight: bold; font-size: 1.2rem; }
    .top-nav { display: flex; gap: 28px; font-size: .85rem; }
    .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr);
      gap: 10px; align-items: start; margin-top: 16px; }
    .sidebar, .post-card { background: #fff; padding: 20px; }
    .sidebar { min-height: 220px; font-size: .85rem; }
    .sidebar h2 { font-size: .9rem; margin: 0 0 18px;
      padding-bottom: 8px; border-bottom: 3px solid #9b00bb; }
    .sidebar ul { list-style: none; padding: 0; margin: 0 0 22px; }
    .sidebar li { margin-bottom: 6px; }
    .posts { min-width: 0; }
    .post-card { margin-bottom: 16px; }
    .post-category { font-size: .75rem; font-weight: bold; margin: 0; }
    .post-card h2 { font-size: 1.55rem; font-weight: normal;
      line-height: 1.5; margin: 0 0 2px; }
    .post-meta { color: #858585; font-size: .7rem; margin: 0 0 24px;
      padding-bottom: 9px; border-bottom: 3px solid #9b00bb; }
    .post-content { font-size: .88rem; overflow-wrap: anywhere; }
    .post-content img { max-width: 100%; height: auto; }
    .post-actions { margin-top: 22px; }
    .read-more { display: inline-block; background: #9500b4; color: #fff;
      padding: 5px 28px; font-size: .8rem; }
    .read-more:hover, .read-more:focus-visible { background: #75008e; }
    @media (max-width: 720px) {
      .layout { grid-template-columns: 1fr; }
      .sidebar { order: 2; min-height: 0; }
      .posts { order: 1; }
      .header-inner { flex-wrap: wrap; padding-block: 10px; }
      .post-card h2 { font-size: 1.3rem; }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="wrap header-inner">
      <nav class="top-nav" aria-label="منوی اصلی">
        <a href="<-BlogUrl->">صفحه اصلی</a>
        <a href="<-BlogUrl->/page/about">درباره من</a>
      </nav>
      <a class="site-name" href="<-BlogUrl->"><-BlogTitle-></a>
    </div>
  </header>

  <div class="wrap layout">
    <aside class="sidebar" aria-label="منوی کناری">
      <h2>منو</h2>
      <p><-BlogDescription-></p>
      <BlogCategoriesBlock>
        <h2>موضوعات</h2>
        <ul>
          <BlogCategories>
            <li><a href="<-CategoryLink->"><-CategoryName-></a></li>
          </BlogCategories>
        </ul>
      </BlogCategoriesBlock>
      <h2>آرشیو</h2>
      <ul>
        <BlogArchive>
          <li><a href="<-ArchiveLink->"><-ArchiveTitle-></a></li>
        </BlogArchive>
      </ul>
      <p><a href="<-BlogUrl->/<-BlogArchiveLink->">همه آرشیو</a></p>
    </aside>

    <main class="posts" id="content">
      <BLOGFA>
        <article class="post-card">
          <BlogPostCategoriesBlock>
            <div class="post-category">
              <BlogPostCategories separator="، ">
                <a href="<-CategoryLink->"><-CategoryName-></a>
              </BlogPostCategories>
            </div>
          </BlogPostCategoriesBlock>
          <h2><a href="<-BlogUrl-><-PostLink->"><-PostTitle-></a></h2>
          <p class="post-meta">نویسنده: <-PostAuthor-> | تاریخ: <-PostDate-></p>
          <div class="post-content"><-PostContent-></div>
          <BlogExtendedPost>
            <div class="post-actions">
              <a class="read-more" href="<-BlogUrl-><-PostLink->">ادامه مطلب</a>
            </div>
          </BlogExtendedPost>
        </article>
      </BLOGFA>
    </main>
  </div>
</body>
</html>

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><-BlogAndPostTitle-></title>
  <meta name="description" content="<-BlogDescription->">
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; background: #f0f1f3; color: #383838;
      font-family: Tahoma, sans-serif; line-height: 1.9; }
    a { color: inherit; text-decoration: none; }
    a:hover, a:focus-visible { text-decoration: underline; }
    .wrap { width: min(1100px, calc(100% - 32px)); margin-inline: auto; }
    .site-header { background: #363636; color: #fff; }
    .header-inner { min-height: 56px; display: flex; align-items: center;
      justify-content: space-between; gap: 20px; }
    .site-name { font-weight: bold; font-size: 1.2rem; }
    .top-nav { display: flex; gap: 28px; font-size: .85rem; }
    .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr);
      gap: 10px; align-items: start; margin-top: 16px; }
    .sidebar, .post-card { background: #fff; padding: 20px; }
    .sidebar { min-height: 220px; font-size: .85rem; }
    .sidebar h2 { font-size: .9rem; margin: 0 0 18px;
      padding-bottom: 8px; border-bottom: 3px solid #9b00bb; }
    .sidebar ul { list-style: none; padding: 0; margin: 0 0 22px; }
    .sidebar li { margin-bottom: 6px; }
    .posts { min-width: 0; }
    .post-card { margin-bottom: 16px; }
    .post-category { font-size: .75rem; font-weight: bold; margin: 0; }
    .post-card h2 { font-size: 1.55rem; font-weight: normal;
      line-height: 1.5; margin: 0 0 2px; }
    .post-meta { color: #858585; font-size: .7rem; margin: 0 0 24px;
      padding-bottom: 9px; border-bottom: 3px solid #9b00bb; }
    .post-content { font-size: .88rem; overflow-wrap: anywhere; }
    .post-content img { max-width: 100%; height: auto; }
    .post-actions { margin-top: 22px; }
    .read-more { display: inline-block; background: #9500b4; color: #fff;
      padding: 5px 28px; font-size: .8rem; }
    .read-more:hover, .read-more:focus-visible { background: #75008e; }
    @media (max-width: 720px) {
      .layout { grid-template-columns: 1fr; }
      .sidebar { order: 2; min-height: 0; }
      .posts { order: 1; }
      .header-inner { flex-wrap: wrap; padding-block: 10px; }
      .post-card h2 { font-size: 1.3rem; }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="wrap header-inner">
      <nav class="top-nav" aria-label="منوی اصلی">
        <a href="<-BlogUrl->">صفحه اصلی</a>
        <a href="<-BlogUrl->/page/about">درباره من</a>
      </nav>
      <a class="site-name" href="<-BlogUrl->"><-BlogTitle-></a>
    </div>
  </header>

  <div class="wrap layout">
    <aside class="sidebar" aria-label="منوی کناری">
      <h2>منو</h2>
      <p><-BlogDescription-></p>
      <BlogCategoriesBlock>
        <h2>موضوعات</h2>
        <ul>
          <BlogCategories>
            <li><a href="<-CategoryLink->"><-CategoryName-></a></li>
          </BlogCategories>
        </ul>
      </BlogCategoriesBlock>
      <h2>آرشیو</h2>
      <ul>
        <BlogArchive>
          <li><a href="<-ArchiveLink->"><-ArchiveTitle-></a></li>
        </BlogArchive>
      </ul>
      <p><a href="<-BlogUrl->/<-BlogArchiveLink->">همه آرشیو</a></p>
    </aside>

    <main class="posts" id="content">
      <BLOGFA>
        <article class="post-card">
          <BlogPostCategoriesBlock>
            <div class="post-category">
              <BlogPostCategories separator="، ">
                <a href="<-CategoryLink->"><-CategoryName-></a>
              </BlogPostCategories>
            </div>
          </BlogPostCategoriesBlock>
          <h2><a href="<-BlogUrl-><-PostLink->"><-PostTitle-></a></h2>
          <p class="post-meta">نویسنده: <-PostAuthor-> | تاریخ: <-PostDate-></p>
          <div class="post-content"><-PostContent-></div>
          <BlogExtendedPost>
            <div class="post-actions">
              <a class="read-more" href="<-BlogUrl-><-PostLink->">ادامه مطلب</a>
            </div>
          </BlogExtendedPost>
        </article>
      </BLOGFA>
    </main>
  </div>
</body>
</html>

اگر فایل HTML رو قبل از گذاشتن در بلاگفا با Live Server باز کنید، ممکنه متن‌هایی مثل <-BlogTitle-> نمایش داده نشن یا ظاهر عجیبی داشته باشن. مرورگر کدهای مخصوص بلاگفا رو نمی‌شناسه؛ این کدها فقط بعد از قرار گرفتن قالب در بلاگفا پردازش می‌شن. برای بررسی چیدمان، نسخه ثابت با متن نمونه مفیده؛ عملکرد کدهای بلاگفا رو باید روی خود وبلاگ دید. من قالب رو روی بلاگفا اجرا کرده‌ام، اما اگر چیزی رو در وبلاگ خودتون تغییر می‌دید، نتیجه رو بعد از ذخیره ببینید.

در CSS، grid-template-columns دو ستون طرح رو می‌سازه؛ به خاطر راست‌به‌چپ بودن صفحه، ستون باریک منو سمت راست قرار می‌گیره. رنگ بنفش هم روی خط زیر عنوان و دکمه استفاده شده. اندازه‌ها و رنگ‌ها رو می‌تونید بر اساس فایل طراحی خودتون تنظیم کنید. بخش @media باعث می‌شه در صفحه باریک، کارت‌ها و منو روی هم قرار بگیرن و متن از عرض موبایل بیرون نزنه. لازم نیست برای هر پست کارت جدیدی بنویسید: بلاک <BLOGFA> این کار رو انجام می‌ده.

موضوعات، آرشیو و صفحه‌های دیگر

طرح ما یک کادر «منو» داره، ولی لازم نیست داخلش همیشه همان متن آزمایشی تصویر بمونه. <BlogCategories> فهرست موضوعاتی رو می‌سازه که در تنظیمات وبلاگ تعریف کرده‌اید. <BlogCategoriesBlock> کمک می‌کنه اگر موضوعی ندارید، عنوان و فهرست خالی هم نمایش داده نشن. <BlogArchive> هم برای هر بازه زمانی آرشیو یک لینک می‌سازه. اگر منوی ساده‌تری می‌خواهید، می‌تونید یکی از این دو بخش رو حذف کنید.

این کد برای قالب صفحه اصلی و صفحه نوشته‌هاست. بلاگفا برای صفحه آرشیو و صفحه‌های جداگانه هم بخش‌های قالب مخصوص خودش رو داره؛ بنابراین بعد از آماده کردن صفحه اصلی، نمایش اون دو نوع صفحه رو هم بررسی کنید. برای نمونه، در صفحه جداگانه کدهای <-BlogPageTitle-> و <-BlogPageContent-> وجود دارن و بلاک تکرار پست‌های صفحه اصلی جایگزین محتوای اون صفحه نمی‌شه. راهنمای رسمی بلاگفا محدوده هر کد رو مشخص کرده.

قرار دادن و آزمایش قالب در بلاگفا

اول از کد قالب فعلی وبلاگتون یک نسخه در یک فایل متنی ذخیره کنید. سپس وارد بخش مدیریت وبلاگ بشید، قسمت ویرایش قالب رو باز کنید و کد نمونه رو در بخش قالب «صفحه اصلی و پست‌ها» قرار بدید. بعد از ذخیره در وبلاگ خودتون صفحه رو باز کنید و چند مورد رو بررسی کنید: عنوان وبلاگ درست نمایش داده می‌شه؟ برای دو مطلب مختلف، عنوان و تاریخ متفاوت می‌بینید؟ لینک عنوان به همان مطلب می‌ره؟ دکمه «ادامه مطلب» فقط برای نوشته‌هایی دیده می‌شه که ادامه دارن؟ موضوعات و آرشیو به صفحات درست لینک می‌شن؟

صفحه رو یک بار روی موبایل یا با ابزار نمایش موبایل مرورگر هم ببینید. مطلبی با عنوان طولانی، تصویری بزرگ و چند خط متن انتخاب کنید تا مشکلات اندازه و فاصله بهتر معلوم بشن. اگر بخشی خالی موند، قبل از تغییر CSS مطمئن بشید داده مربوط به اون رو در وبلاگ ثبت کرده‌اید و کد بلاگفا در بلاک درست قرار گرفته. برای صفحه «درباره من» هم نشانی واقعی صفحه‌ای رو که خودتون ساخته‌اید جایگزین کنید.

جمع‌بندی

برای ساخت قالب بلاگفا لازم نیست همه چیز رو یک‌باره بلد باشید. از یک طرح ساده مثل همین نمونه شروع کنید، اول ساختارش رو با HTML بسازید، ظاهرش رو با CSS تنظیم کنید و بعد متن‌های ثابت رو به کدهای بلاگفا وصل کنید. این آموزش قرار نیست جای یادگیری HTML، CSS یا راهنمای کدهای خود بلاگفا رو بگیره؛ نقشه‌ایه برای اینکه موقع ساخت قالب خودتون بدونید هر بخش از کجا میاد و چطور می‌تونید نتیجه رو مرحله‌به‌مرحله بررسی کنید.