بعد از تاخیر زمانی یکماهه از انتشار هفتمین قسمت از سری راهنمای عملی مووبل تایپ بار دیگر بازگشته ام تا گوشه دیگری از زیبایی های کار با این سیستم مدیریت محتوای بی نظیر را به دوستان علاقمند تقدیم کنم. در صورتی که دنبال کننده این سلسله مطالب بوده اید بار دیگر در ادامه مطلب با ما باشید.
در قسمت قبل توانستیم یک قالب ساده را طوری کدنویسی کنیم که به عنوان صفحه اول سایت و صفحه آرشیو تکی هر مطلب انجام وظیفه نماید. در این قسمت بیایید کمی به صفحه اول سایتمان بال و پر بدهیم. مثلا چطور است که اطلاعات مربوط به هر نوشته را در زیر خلاصه آن مطلب در صفحه اول نشان دهیم. این اطلاعات عبارت خواهند بود از: نام نویسنده٬ تاریخ انتشار و سرانجام دسته یا Category مطلب. دست بکار می شویم:
1- ابتدا قالب صفحه اصلی یعنی index.html را در دریم ویور باز می کنیم. همانطور که در شکل زیر می بینید ما با قسمتی که به رنگ آبی مشخص شده است سروکار داریم.
(برای دیدن تصویر بزرگتر روی آن کلیک کنید)
2- قسمتی را که حاوی کدهای زیر است پیدا کنید:
<p><MTEntryBody><a href="<MTEntryPermalink>">More...</a></p>
و در خط پس از آن سه خط کد زیر را وارد کنید:
<p>Author:<MTEntryAuthor></p>
<p>Date:<MTEntryDate></p>
<p>Category:<MTEntryCategory></p>
خط اول نیاز به توضیح خاصی ندارد. چرا که به سادگی نام کاربری نویسنده را نمایش می دهد. فقط دقت کنید که این کد٬ نام کاربری (و نه اسم نویسنده) را نمایش می دهد. در صورتی که بخواهید اسم نویسنده را نمایش دهید (که معمولا هم همینطور است) باید از کد زیر به جای قبلی استفاده کنید:
<p>Author:<MTEntryAuthorNickname></p>
خط دوم کدها نشان دهنده تاریخ انتشار هر مطلب است. لازم به ذکر است که نمایش تاریخ می تواند به صورتهای مختلفی انجام شود. در صورتی که کد به صورت معمولی یعنی :
<p>Date:<MTEntryDate></p>
بکار رود تاریخ به صورت پیش فرض مووبل تایپ نمایش داده می شود (October 17, 2008 1:14 PM)
اما می توان به سادگی نحوه نمایش تاریخ را عوض کرد. برای این کار از فرمتهای زمان (Time Formats) استفاده می کنیم. به نمونه زیر توجه کنید:
<p>Date:<MTEntryDate format="%Y.%m.%d"></p>
خروجی این کد٬ تاریخی شبیه به این خواهد بود:
Date:2008.10.16
برای دیدن لیستی از فرمتهای مختلف زمان به این صفحه مراجعه کنید.
و اما خط سوم کد٬ نمایش دهنده دسته یا Category مطلب است. اما این دسته بندی کجا انجام می شود؟ اگر از قسمت ششم به یاد داشته باشید هنگام نوشتن یک مطلب در قسمت مدیریت مووبل تایپ با عناصری مانند Title٬ Body و غیره سروکار داشتیم. اگر به تصویر زیر نگاه کنید می بینید که یکی از این قسمتها به دسته یا Category مطلب اختصاص دارد.
(برای دیدن تصویر بزرگتر روی آن کلیک کنید)
برای استفاده از این قابلیت ابتدا لازم است برای مطالب قبلی خودمان دسته هایی بسازیم و هرکدام را به یک دسته منتصب کنیم.
برای اینکار از منوی مدیریت مووبل تایپ روی Manage و بعد Entries کلیک کنید. حالا روی لینک عنوان یکی از مطالب کلیک کنید و وارد صفحه مربوط به آن مطلب شوید (شکل قبل)
در سمت راست صفحه زیر عنوان Categories روی Add new کلیک کنید. حالا اسم دلخواه خود را (در این مثال Computer) در جای خالی بنویسید و روی علامت بعلاوه (+)کلیک کنید. دسته ای به نام Computer ایجاد می شود و مووبل تایپ این مطلب را به آن دسته منتصب می کند. حالا روی Save کلیک کنید.
دقت کنید که در مووبل تایپ می توانید یک مطلب را به تعداد زیادی Category منتصب کنید. در این صورت یک دسته به عنوان دسته اصلی و بقیه دسته ها به عنوان دسته های فرعی شناخته می شوند.
برای کامل شدن این قسمت مطلب دوم را هم باز کنید و آن را به دسته جدیدی بنام Mobile منتصب کنید.
3- بیایید ببینیم حاصل اضافه کردن سه خط کد ابتدای این آموزش به صفحه index.html چه بوده است. برای اینکار در دریم ویور کلیه کدهای صفحه index.html را کپی کنید. حالا از مسیر
Design>Templates
به صفحه قالبها بروید و روی قالب index.html (که در قسمت ششم آن را با نام Home Page ساختیم) کلیک کنید.
4- کدهای کپی شده در مرحله 3 را در قسمت مربوطه Paste کنید و روی دکمه Save and Publish کلیک کنید.
5- نتیجه را در صفحه مربوطه مشاهده کنید. باید چیزی شبیه این شده باشد:
(برای دیدن تصویر بزرگتر روی آن کلیک کنید)
6- همانطور که می بینید نام نویسنده٬ تاریخ انتشار و دسته مطلب به صورت زیر هم نشان داده شده اند. هرچند چگونگی حالت دادن به این قسمتها (با استفاده از CSS یا هر تکنیک دیگر) موضوع این آموزش نیست با این حال با تغییراتی کوچک در کدها می توان عجالتا سر و سامانی به ظاهر این قسمت داد:
<MTEntries>
<h3><MTEntryTitle></h3>
<p><MTEntryBody><a href="<MTEntryPermalink>">More...</a></p>
<p style="float:left; margin-right:10px">
<strong>Author:</strong><MTEntryAuthorNickname>
</p>
<p style="float:left; margin-right:10px">
<strong>Date:</strong><MTEntryDate format="%Y.%m.%d">
</p>
<p style="float:left; margin-right:10px">
<strong>Category:</strong><MTEntryCategory>
</p>
<p style="clear:both"></p>
</MTEntries>
خروجی جدید به صورت زیر خواهد بود:
(برای دیدن تصویر بزرگتر روی آن کلیک کنید)
7- بیایید همین اطلاعات (یعنی نام نویسنده٬ تاریخ انتشار و دسته بندی مطلب) را در آرشیو تکی هر مطلب هم نشان دهیم. این کار بسیار راحت است. در دریم ویور و از فایل index.html تکه کد زیر را کپی کنید:
<p style="float:left; margin-right:10px">
<strong>Author:</strong><MTEntryAuthorNickname>
</p>
<p style="float:left; margin-right:10px">
<strong>Date:</strong><MTEntryDate format="%Y.%m.%d">
</p>
<p style="float:left; margin-right:10px">
<strong>Category:</strong><MTEntryCategory>
</p>
<p style="clear:both"></p>
حالا فایل individual-entry.html را در دریم ویور باز کنید و تکه کد بالا را بلافاصله بعد از
<p><MTEntryMore></p>
اضافه کنید.
حالا مانند مرحله 3 به قسمت قالبها بروید و روی قالب Individual Entry کلیک کنید. در دریم ویور کل کدهای موجود در فایل individual-entry.html را کپی و در این قسمت Paste کنید و روی Save and Publish کلیک کنید.
8- تمام شد. از صفحه اول سایت به آرشیو تکی هر کدام از مطالب بروید (با کلیک روی لینک More در انتهای هر مطلب). تصویر زیر مشابه آن چیزی است که شما خواهید داشت.
(برای دیدن تصویر بزرگتر روی آن کلیک کنید)
امیدوارم از این آموزش هم استفاده برده باشید. در قسمتهای بعد با هم قابلیتهای کاربردی دیگری از دنیای مووبل تایپ را کشف و استفاده خواهیم کرد. با ما بمانید.
ارسال نظر