مووبل تایپ از الف تا ی : قسمت آخر

در قسمتهای قبل دیدیم مراحل کلی ساخت اجزاء سایت به صورت زیر است:

1- باز کردن قالب در ویرایشگر HTML (در مثالهای ما Dreamweaver)
2- اضافه کردن کدهای مورد نیاز برای هر قسمت در مکان مناسب در قالب بوسیله دریم ویور
3- ایجاد صفحه مربوط به قالب در قسمت مربوطه در ام تی (Design>Templates)
4- کپی کردن همه کدهای قالب
5- Paste کردن کدها در قسمت کد قالب (یعنی مرحله 3)
6- ذخیره و بازسازی (Publish)

باید اضافه کنم برای ایجاد تغییرات در یک قالب هم باز ناچارید مسیر مشابه ای را طی کنید (به استثنای مرحله 3 که بجای ایجاد قالب جدید٬ قالب ایجاد شده قبلی را باز می کنید)

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

قسمتی که مدنظر ماست با فلش مشخص شده است. شما با استفاده از فیلد Link to File می توانید فایلی را به عنوان فایل مادر (یا رفرنس) به ام تی معرفی کنید تا هر زمان آن فایل تغییر کرد ام تی قالب را به طور اتوماتیک بر اساس آن تغییر دهد. به عنوان یک مثال عملی به سراغ قالب صفحه اول (قسمت ششم) خودمان می رویم:
1- از قسمت Design>Templates به سراغ قالب Home Page بروید و روی آن کلیک کنید تا به صفحه مربوطه برسید. اگر بخش Template Optionsدر زیر قسمت کدها فعال نیست روی آن کلیک کنید تا فیلدهای آن نمایان شود.

2- هرچه را که در قسمت کد می بینید پاک کنید.
3- در قسمت Link to File آدرس فیزیکی فایل قالب را وارد کنید (توضیح: این آدرس همانجایی است که شما فایلهای قالبتان را که در دریم ویور تغییر داده اید ذخیره می کنید و به هیچ وجه به شاخه ای از سرور که ام تی فایلهایتان را در آن ایجاد می کند ارتباطی ندارد). به عنوان مثال فایلهای قالب من در شاخه زیر وجود دارند:

E:hpmt-guide

و من هرگاه بخواهم آنها را در دریم ویور تغییر بدهم به سراغ این شاخه از رایانه ام می روم.

به تصویر زیر دقت کنید و در صورت اطمینان از آدرس فایل index.html خودتان روی دکمه Save کلیک کنید.

بعد از اتمام کار می بینید تمام کدها دوباره سر جای اولشان برگشته اند.
4- حالا بیایید تغییری در فایل اصلی به وجود بیاوریم. فایل index.html را در دریم ویور باز کنید.

5- در قسمت بالای قالب آنجا که نوشته شده by Free Css Templates پیدا کنید و بجایش بنویسید
Learn Movable Type by Writeage

6- حالا آن را در دریم ویور ذخیره کنید.

7- بدون اینکه کار دیگری بکنید بلافاصله به سراغ ام تی می رویم. فقط کافی است یکبار سایت را بازسازی (Publish) کنید: 

8- حالا نتیجه را در سایت ببینید.

همانطور که می بینید بدون اینکه مراحل اضافی Copy و Paste را انجام دهیم تغییراتمان روی قالب در ام تی  اعمال می شوند.نکته: در صورتی که از این روش استفاده کرده اید حتما پس از بازسازی سایتتان متوجه یک پیغام در دریم ویور شده اید که به شما می گوید “فایل در خارج از برنامه ویرایش شده است و در صورت تمایل می توانید آن را reload کنید”. دقت کنید که پاسخ شما همیشه باید خیر باشد.

حالا به سراغ بقیه قالبهایتان یعنی Main Archive Index ٬ Style Sheet ٬ Individual Entry و Category Each Archive بروید و همین مراحل را تکرار کنید تا آنها هم به فایل مربوطه شان متصل شوند. در این صورت دیگر در مواقع تغییر٬ نیازی به طی کردن مراحل اضافی نخواهد بود.

خب٬ حالا که روش ساده تر شدن سر و کله زدن با قالب ها در مووبل تایپ را یاد گرفتید بیایید به سراغ ادامه آموزشمان برویم. در قسمت قبل طریقه ساخت آرشیو موضوعی را فراگرفتید. آرشیوهای ماهانه یکی دیگر از راههای طبقه بندی و بایگانی مطالب هستند که به راحتی توسط هر CMS از جمله مووبل تایپ دسترسی به آنها امکان پذیر است.

روش ساخت آرشیو ماهانه در مووبل تایپ

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

صفحه ب: این صفحه در حقیقت آرشیو مخصوص هر ماه است. یعنی در آن علاوه بر نام ماه ٬ لیستی از مطالب منتشر شده در آن ماه وجود دارد. باز هم با کلیک روی عنوان هر مطلب باید بتوان به صفحه تکی آن مطلب رسید.

صفحه ج: این یکی اختیاری است و به صورت یک Sidebar در صفحه اول سایت عمل می کند و به صورت لیستی شامل نام ماه ها دیده می شود که با کلیک روی نام هر ماه می توان به صفحه ب (که در بالا توضیح داده ام) رسید.

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

تصویری از صفحه آرشیو ماه نوامبر (برای دیدن تصویر بزرگتر کلیک کنید)

تصویری از صفحه آرشیو ماه اکتبر (برای دیدن تصویر بزرگتر کلیک کنید)

1- صفحه category-each-archive.html را در دریم ویور باز کنید و آن را به اسم month-each-archive.html مجددا Save کنید.

2- تنها تغییری که نیاز دارید پیدا کردن تکه کد زیر

<h2><$MTCategoryLabel$></h2>

و جایگزین کردن آن با تکه کد زیر است:

<h2><$MTArchiveTitle$></h2>

حالا فایل را Save کنید و به سراغ ام تی بروید.

3- در قسمت Design>Templates در بخش Archive Templates روی Entry Listing کلیک کنید.

4- نام قالب جدید را Monthly Each Archive بگذارید اما بر طبق آموزشی که در ابتدای این قسمت داده شد قسمت کد را خالی بگذارید و به جای آن در فیلد Link to File آدرس فیزیکی قالب جدیدتان (یعنی month-each-archive.html) را وارد کنید. این آدرس برای من به این شکل است:

E:hpmt-guidemonth-each-archive.html

حالا روی Save کلیک کنید. همانطور که می بینید قسمت کد به صورت خودکار با کدهای قالب شما پر شده است.

5- حالا وقت آن است که برای این آرشیو٬ یک Archive Mapping در نظر بگیریم (اگر هنوز با این مفهوم آشنا نیستید بار دیگر بخش 8 قسمت نهم و یا قسمت هفتم را مطالعه کنید. به طور مختصر این بخش نحوه نمایش آدرس آرشیو را تعیین می کند). برای این کار در همان صفحه روی Template Options و بعد Create Archive Mapping کلیک کنید.

6- در قسمت Type گزینه های بسیار متنوعی برای آرشیو وجود دارد. با این گزینه ها می توانید انواع آرشیوهای روزانه٬ هفتگی٬ ماهانه٬ آرشیو نویسندگان٬ آرشیو موضوعی و حتی آرشیوهای ترکیبی مثلا آرشیو موضوعی – روزانه یا موضوعی – سالانه و غیره را بسازید. برای مورد ما انتخاب گزینه Monthly کفایت می کند پس آن را انتخاب کنید و روی Add کلیک کنید.

7- حالا باید در قسمت Path نحوه نمایش آرشیو ماهانه تان را مشخص کنید. حالت پیش فرض یعنی

yyyy/mm/index.html

آرشیو ماهانه شما را به صورت زیر نمایش می دهد:

http://localhost/2008/08/10/index.html

برای این آموزش ترجیح می دهم روال نمایش آرشیو به صورت زیر باشد:

http://localhost/200810.html

در این نحوه نمایش علاوه بر اینکه فایلهای آرشیو در ریشه اصلی سایت منتشر می شوند ماه و سال مربوطه نیز در آدرس مشخص است. برای دستیابی به چنین آدرسی از منوی Path گزینه Custom را انتخاب کنید و در قسمت مربوطه کدهای زیر را وارد کنید:

%y%m%x

و روی Save کلیک کنید.

نکته: همانطور که قبلا گفتم این کدها در حقیقت علایم اختصاری اجزاء آدرس در Archive Mapping هستند که به آنها Archive File Path Specifiers می گویند. برای دیدن فهرست کامل این اختصارات به این صفحه مراجعه کنید.

8- پیش از آنکه نتیجه را ببینید باید سایت را بازسازی (Publish) کنید. بعد از آن اگر به سراغ شاخه ای از سرور که ام تی فایلها را در آن منتشر می کند بروید یک یا تعدادی فایل با نام های مشابه 200810 و یا 200811 با پسوند html می بینید که همان آرشیوهای ماهانه شما هستند. اگر آنها را در مرورگر ببینید تقریبا با همان تصاویر ابتدای آموزش برابرند (چون زمان بکار بردن این آموزش برای شما فرق می کند شما نامهای متفاوتی برای فایلهایتان خواهید داشت).

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

برای دیدن تصویر بزرگتر کلیک کنید.

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

9- فایل main-archive-index.html را در دریم ویور باز کنید و به اسم main-monthly-archive.html ذخیره کنید.

10- هرچه بین دو کد زیر وجود دارد پاک کنید (از جمله خود این دو کد را):

<MTIfArchiveTypeEnabled archive_type=”Category”>
.
.
.
</MTIfArchiveTypeEnabled>

و بجای آن تکه کد زیر را قرار دهید:

<MTIfArchiveTypeEnabled archive_type=”Monthly”>
<MTArchiveList archive_type=”Monthly”>
<h2><a href=”<$MTArchiveLink$>”><$MTArchiveTitle$></a></h2>
<ul>
<MTEntries>
<li><a href=”<MTEntryPermalink>”><MTEntryTitle></a></li>
</MTEntries>
</ul>
</MTArchiveList>
</MTIfArchiveTypeEnabled>

این تکه کد شباهتهای زیادی با کدی که برای آرشیو موضوعی در قسمت نهم نوشتیم دارد. پس از تحلیل خط به خط آن می گذریم و به سراغ مرحله بعدی می رویم.

11- حالا به سراغ ام تی می رویم و از قسمت Design>Templates و در بخش Index Templates روی Create index template کلیک کنید.

12- نام قالب جدید را Main Monthly Archive می گذاریم. طبق آموزشی که در ابتدای این قسمت داده شد قسمت کد را خالی بگذارید و به جای آن در فیلد Link to File آدرس فیزیکی قالب جدیدتان (یعنی main-monthly-index.html) را وارد کنید. این آدرس برای من به این شکل است:

E:hpmt-guidemain-monthly-index.html

در قسمت Output File اسم صفحه خروجی را main-monthly-index.html قرار دهید.حالا روی Save کلیک کنید. همانطور که می بینید قسمت کد به صورت خودکار با کدهای قالب شما پر شده است.

13- سایتتان را Publish کنید.

14- اگر به سراغ شاخه ای از سرور که ام تی فایلها را در آن منتشر می کند بروید یک فایل جدید در آن به وجود آمده است. این فایل که main-monthly-index.html نام دارد در حقیقت آرشیو ماهانه اصلی ماست و همانطور که در شکل قبل مشخص است لینکی به صفحه اختصاصی هر ماه بعلاوه لینکی به صفحه تکی هر مطلب در ماه مربوط به آن دارد.

حالا که قالبهای الف و ب آرشیو ماهانه ساخته شده اند بیایید آرشیو ماهانه را به Sidebar سایت (یعنی ستون سمت چپ صفحه اصلی) هم اضافه کنیم.

15- برای اینکار فایل index.html را در دریم ویور باز کنید و به سراغ کدهای ساید بار که بین دو تکه کد زیر هستند بروید:

<div id=”columnB”>
.
.
.
</div>

حالا هرچه بین دو div وجود دارد را پاک کنید و بجای آن تکه کد زیر را وارد کنید:

<h3>Monthly Archive</h3>
<MTIfArchiveTypeEnabled archive_type=”Monthly”>
<MTArchiveList archive_type=”Monthly”>
<ul>
<li><a href=”<$MTArchiveLink$>”><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
</ul>
</MTArchiveList>
</MTIfArchiveTypeEnabled>
<hr />

16- فایل را در دریم ویور ذخیره کنید و به سراغ ام تی بروید. فقط کافی است سایت را Publish کنید. حالا به صفحه اول سایتتان نگاهی بیندازید.

برای دیدن تصویر بزرگتر کلیک کنید

در ستون سمت چپ می توانید آرشیو ماهانه مطالبتان را ببینید. اعدادی که در سمت راست نام ماه ها می بینید تعداد مطالبی است که در آن ماه منتشر کرده اید.

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

همینجا بیایید کمی تغییرات در منوی بالای قالبمان بدهیم تا از آرشیوهای ساخته شده بیشتر استفاده کنیم.

17- فایل index.html را بار دیگر در دریم ویور باز کنید. در تصویر زیر قسمتی که می خواهیم تغییر بدهیم مشخص است.

برای دیدن تصویر بزرگتر کلیک کنید.

تغییرات به این شکل خواهند بود: ابتدا لینک صفحه اول (Home) را اصلاح کنید. این لینک باید به صفحه index.html هدایت شود. بعد کلمه Products را به Categories تبدیل کنید و آن را به صفحه main-archive-index.html لینک کنید. سپس کلمه Services را به Monthly Archive تبدیل کنید و آن را به main-monthly-index.html لینک کنید.

نتیجه نهایی چیزی شبیه به این خواهد بود:

18- پیشنهاد من این است که این منوی تغییر یافته را در باقی صفحاتی که تا کنون ساخته اید هم کپی کنید.

امیدوارم از این سلسله مطالب استفاده لازم را برده باشید. با بکار بردن روشهای مطرح شده در این سلسله مطالب شما می توانید به آسانی قالبهای دلخواه خودتان را برای ام تی کدنویسی کنید. هرچند سلسله مطالب با عنوان “مووبل تایپ از الف تا ی” در اینجا به پایان می رسد با این حال منتظر آموزشهای پیشرفته تر مووبل تایپ در آینده باشید. در آن آموزش ها به طور موردی به آموزش تکنیکهای پیشرفته تر در طراحی سایتهای برپایه ام تی خواهم پرداخت. موفق باشید.

توجه: کدهای نهایی این آموزش به صورت یک فایل زیپ شده از اینجا قابل دریافت است.

پایان

توجه: این سلسله مطالب به طور اختصاصی برای سایت writeage.com نوشته شده است. درج تمام یا قسمتی از ‏این ‏مطالب، ‏تنها با ذکر نام سایت و آدرس دقیق این صفحه مجاز است.

مووبل تایپ: از الف تا ی (قسمت اول) | مووبل تایپ: از الف تا ی (قسمت دوم) | مووبل تایپ: از الف تا ی (قسمت سوم) | مووبل تایپ: از الف تا ی (قسمت چهارم) | مووبل تایپ: از الف تا ی (قسمت پنجم) | مووبل تایپ: از الف تا ی (قسمت ششم) | مووبل تایپ: از الف تا ی (قسمت هفتم) |مووبل تایپ: از الف تا ی (قسمت هشتم) | مووبل تایپ: از الف تا ی (قسمت نهم)