آموزش های زندگی با امیر بندری
. . : : : : : بهترين بهترين ها : : : : : . .
آموزش ساخت قالب بلاگفا – جلسه سوم


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

آموزش ساخت قالب بلاگفا - جلسه سوم

 

قسمت بدنه و ستون مطالب

در قالب استاتیکی که طراحی کرده ایم، کل ستون مطالب دارای کلاس content میباشند:





و هر مطلب به طور جداگانه دارای کلاسی با عنوان article است یعنی:







پس تگ باید بعد از کلاس content و قبل از کلاس article قرار بگیرد تا هر مطلبی که ارسال میشود را شامل شود:









در ستون کناری، برای هر منو باید کد اصلی را تکرار میکردیم و سپس کدهای مربوط به آن منو را جایگزین می نمودیم. ولی برای ستون مطالب اینکار نیاز نیست و خود تگ این کار را انجام خواهد داد. در واقع این برچسب مانند یک حلقه (Loop) عمل خواهد کرد و هر تعداد پست ارسال شده باشد، به همان تعداد کلاس article را تکرار میکند.
در اینجا هم به کدهای html کاری نداریم و تنها نوشته هایی که وجود دارد را با کدهای اختصاصی بلاگفا جایگزین میکنیم.
اگر به کد قالب استاتیک توجه کنید، متوجه میشوید که درون کلاس article سه کلاس اصلی داریم که عبارتند از:

  1. Post-title
  2. Post
  3. Post-meta

و کد زیر را تشکیل داده اند:



عنوان مطلب یک





متن مطلب




البته درون کلاس post به جای عبارت “متن مطلب” کدهای دیگری بود که برای مثال ذکر شده بودند و در اینجا آنها را پاک کردیم و با یک نوشته ی ساده جایگزین کردیم تا راحت تر متوجه شوید.

*دقت کنید که کدهای ذکر شده در بالا درون کلاس Article قرار دارند!

همانطور که گفتیم اولین کلاس عبارت است از post-title و کد آن به صورت زیر است:



عنوان مطلب یک



در بلاگفا، کدی که عنوان مطلب را نمایش میدهید <-PostTitle -> است. پس باید کد بالا را به کد زیر تغییر دهیم:



< -PostTitle - >



به این ترتیب عنوان هر پست همان خواهد بود که کاربر در هنگام نگارش مطلب تعیین میکند.
قسمت بعدی که باید ویرایش کنیم درون کلاس post است تا متن مطالب را نمایش دهیم و برای اینکار باید از تگ <-PostContent -> استفاده کنیم.



<-PostContent->

ولی محتوای هر مطلب بیشتر از متن اصلی است و شامل بخشهای دیگری از جمله برچسبها و لینک ادامه ی مطلب نیز هست. پس باید در ادامه ی تگ<-PostContent -> تگهای دیگری نیز بکار ببریم:



<-PostContent->



برچسب‌ها :
<-TagName->



قسمت نمایش دهنده لینک “ادامه ی مطلب” خواهد بود و قسمت نیز برچسبهایی را که به هر پست نسبت داده شده اند نمایش میدهد.

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



که باید بجای نوشته ها، از کدهای blogfa استفاده کنیم.
نام نویسنده توسط تگ <-PostAuthor -> نمایش داده میشود. با استفاده از برچسبهای <-PostDate -> و <-PostTime -> میتوانید زمان ارسال پست را نمایش دهید. نظرات وبلاگ نیز توسط یک کد اختصاصی به همراه کد جاوااسکریپت نمایش داده میشوند. پس کد اصلی را باید به شکل زیر تغییر دهیم:



فراموش نکنید که بعد از این قطعه کد باید تگ

مربوط به کلاس Article را قرار دهید و تگ بلاگفا را نیز ببندید یعنی . در جلسه آینده قسمت پانوشت یا فوتر را تکمیل خواهیم کرد.



نويسنده :امیر
تاريخ: یکشنبه بیست و نهم اردیبهشت ۱۳۹۲ ساعت: 23:5