آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب

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

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

تگ <box:post_list> به بلاگ میگه باکس لیست مطالب ازاینجا شروع می شود واگر این وبلاگ دارای مطلب هست هرچی متن وتگ بین ما هست را نشون بده درغیر اینصورت بخیال من برو برای نمایش بعدی واین باکس هم با تگ </box:post_list> بسته می شود.

در قالب های بلاگ بیان تگ <box:xyz> تگ های شرطی هستند یعنی اگر باکس مورد نظر وجود داشت محتویات رو نشون بده در غیر اینصورت بخیال . پس هر چی می خواهیم در باکس لیست مطالب مان نشون داده بشه باید داخل همین تگ بنویسیم. این تگ ، تگ ِ مادر برای نمایش باکس لیست مطالب هست و برای اینکه مطالب وبلاگ لیست شوند (نمایش داده شوند) باید از تگ  نمایش لیست مطلب استفاده کنیم که بدین صورت می باشد <view:post_list>  و بسته این تگ هم </view:post_list> هست.

تمام محتویات داخل این تگ برای نمایش هرمطلب تکرار می شود. مثلا شما ۱۰ مطلب داشته باشید این تگ ۱۰ بار اجرا میشه تا لیست مطالب رو نشون بدهد.در قالب های بلاگ به تگ های که بصورت <view:xyz> هستن تگ های تکرار می گویند یعنی به ازای هر آیتم تکرار می شوند.
تعداد دفعات تکرا این تگ قابل تنظیم می باشد. (بعدا در بخش جدا مطالب جزئی گفته خواهد شد).

دراین قسمت ما به چه تگ های نیاز داریم:
تگ نویسنده مطلب (*post_author*)
تاریخ مطلب (*post_date*)
عنوان مطلب (*post_title*)
باکس برچسب های مطلب <box:post_tags></box:post_tags>
باکس موضوعات مطلب <box:post_categories></box:post_categories>
خلاصه مطلب (*post_summary*)
تصویر مطلب (*post_image*)
تعداد نظرات (*post_comment_count*)
باکس رتبه دهی به مطالب <box:post_rating></box:post_rating>
لینک مطلب (*post_link*) برای نمایش جداگانه مطلب در صفحه مخصوص آن مطلب (همون ادامه مطلب یا بیشتر بخوانید).

هر کسی با خلاقیت سلیقه خودش این موارد رو برای نمایش در وبلاگ طراحی می کند.
ماهم باکس خلاصه مطلب رو به صورت زیر تقسیم می کنیم. طراحی و زیباسازی قالب برای جلسه های مربوط به استایل دهی قالب می گذاریم که قدم به قدم باهم انجام خواهیم داد.

چینش باکس مطلب ( برای نمایش لیست مطلب در صفحه نخست ) مانند تصویر زیر هست.

هدر یا سربرگ باکس مطلب شامل : عنوان مطلب،نویسنده،تاریخ ایجاد،تعداد نظرات و رتبه دهی به مطلب می باشد.

فوتر یا پانویس باکس مطلب شامل : برچسب های مطلب،موضوعات و لینک به ادامه مطلب می باشد.

تگ های مرکب رو از  الان بشناسید و بخاطر بسپارید.

تگ‌های مرکب،تگ‌هایی هستند که مانند تگ‌های html تگ باز و بسته دارند و داخل آنها می‌تواند متن و یا تگ‌های دیگر قرار بگیرد، مانند <box:post_list></box:post_list> در این نوع تگ‌ها علامت / که قبل از نام تگ قرار می‌گیرد، نشان‌گر بسته شدن تگ می‌باشد.

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

• تگ های باکس  که به شکل   <box:xyz> </box:xyz>
• تگ های نمایش تکراری  به شکل  <view:xyz>  </view:xyz>
• تگ  های شرطی  <check:if>  </check:if>

توضیح : مقدار برخی تگ ها در قالب های بلاگ می تواند خالی باشد. مثلا وقتی شما مطلبی را منتشر می کنید شاید آن مطلب تصویر نداشته باشد برای اینکه بررسی کنیم آیا  مطلب دارای تصویر هست (اگر بود تصویر رو نشان بده) یا نه (می توانیم  انتخاب کنیم یه تصویر پیشفرض بارگذاری بشه یا  هیچی)از این تگ استفاده می کنیم. بصورت زیر :

<check:if post_image>
<img src="(*post_image*) alt="">
</check:if>
<ceck:if not post_image>
تصویر برای نمایش وجود ندارد 
</check:if>

شروع کدنویسی باکس لیست مطالب قالب بلاگ بیان

قبل از شروع کدنویسی قالب بلاگ یه نگاهی به طرح قالب بیندازیم بد نیست.

سربرگ یا هدر قالب رو در مطلب قبلی باهم کدنویسی کردیم.
الان نوبت باکس اصلی هستش که شامل لیست مطالب ، صفحه بندی مطالب و ستون کناری یا سایدبار می باشد.
در این مطلب ما قسمت لیست مطالب را انجام می دهیم.
اول باکس اصلی کدش رو می نویسیم و بعداٌ تگ و کدهای مربوط به لیست مطالب رو داخلش می نویسیم.

گام اول : نوشتن کد باکس اصلی

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
</main>
<!-- پایان باکس اصلی -->

گام دوم : افزودن کد لیست مطالب به باکس اصلی

همانطور که در تصویر بالا می بینید لیست مطالب داخل یه باکس قرار گرفته تا مطالب منتشرشده منظم باشند.
با استفاده از تگ اچ تی ام ال ۵ <SECTION></SECTION> این کار را انجام می دهیم.

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
	<!--شروع باکس خلاصه مطلب / لیست مطالب-->
<box:post_list>
<section id="post_list" class="posts"></section>
	</box:post_list>
	<!--/پایان باکس خلاصه مطلب -- لیست مطالب-->
</main>

گام سوم : افزودن تگ و کد مربوط به نمایش یک مطلب (به ازای هر تعداد مطلب تکرار می شوند)

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
	<!--شروع باکس خلاصه مطلب / لیست مطالب-->
	<box:post_list>
		<section id="post_list" class="posts">
		<!-- شروع نمایش لیست مطلب : هر چقدر مطلب داشته باشید تموم کد و تگ های داخل تگ زیر به همان اندازه تکرار می شوند-->	
<view:post_list>
				<article class="post">
					</article>
			</view:post_list>
<!-- پایان نمایش لیست مطالب -->
		</section>
	</box:post_list>
	<!--/پایان خلاصه مطلب -- لیست مطالب-->
</main>
<!-- پایان باکس اصلی-->

گام پایانی: افزودن جزئیات و تگ های مربوط به یک مطلب در بلاگ بیان

<!--شروع باکس اصلی -->
<main id="blogthemes_main" class="mainContent">
	<!--شروع باکس خلاصه مطلب / لیست مطالب-->
	<box:post_list>
		<section id="post_list" class="posts">
			<view:post_list>
				<article class="post">
					<header class="post_header">
						<h3 class="post_title"><a href="(*post_link*)">(*post_title*)</a></h3>
						<ul class="post_meta--header post_meta">
							<li class="post_author">توسط : <span>(*post_author*)</span></li>
							<li class="post_date">در <span>(*post_date*)</span></li>
							<li class="post_comment_count">دیدگاه  <span>(*post_comment_count*)</span></li>
							<li class="post_rate">
								<box:post_rating>
									<span class="rate-box (*user_rated*)">
										<span class="rate-button-box rate-up (*user_rated_up*)">
											<a class="rate-button" href="(*rate_up_link*)" rel="nofollow" title="موافق">
												<img alt="موافقین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">
												(*up_rates*)
											</a>
										</span>
										<span class="rate-button-box rate-down (*user_rated_down*)">
											<a class="rate-button" href="(*rate_down_link*)" rel="nofollow" title="مخالف">
												<img alt="مخالفین" class="rateimg" src="//blog.ir/media/images/cleardot.gif">
												(*down_rates*)
											</a>
										</span>
									</span>
								</box:post_rating>
							</li>
						</ul>
						<check:if post_image>
							<figure class="post_image">
								<img src="(*post_image*)" alt="(*post_title*)">
							</figure>
						</check:if>
					</header>
					<!--\پایان هدر باکس مطلب-->
					<div class="post_summary">(*post_summary*)</div>
					<!-- \پایان خلاصه مطلب-->
					<footer class="post_footer">
						<ul class="post_meta--footer post_meta">
							<box:post_tags>
								<li class="post_tags">
									<span>برچسب ها : </span>
									<view:post_tags><a href="(*tag_link*)">(*tag_name*)</a></view:post_tags>
								</li>
							</box:post_tags>
							<!-- پایان برچسب های مطلب-->
							<box:post_categories>
								<li class="post_cats">
									<span>موضوع :</span>
									<view:post_categories>
										<a href="(*category_link*)">(*category_name*)</a>
									</view:post_categories>
								</li>
							</box:post_categories>
							<!--\پایان موضوعات مطلب-->
							<check:if post_has_read_more>
								<li class="readmore"><a href="(*post_link*)">ادامه مطلب</a></li>
							</check:if>
						</ul>
					</footer>
				</article>
			</view:post_list>
		</section>
	</box:post_list>
	<!--/پایان خلاصه مطلب -- لیست مطالب-->
</main>

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