این MTInclude های دوست داشتنی

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

نخست نگاهی به تصویر صفحه اول و دو صفحه داخلی سایت بیندازید:

قسمتهایی که در تصویر اول با خطوط رنگی و شماره مشخص کرده ام بخشهایی از سایت هستند که در صفحات مختلف عینا تکرار می شوند. هر سایتی شامل تعدادی از این قسمت هاست. مثلا لوگوی سایت٬ منوی بالا یا کنار سایت (که به آن Navigation هم می گویند)٬ ستونهای کناری (Sidebar) و همچنین فوتر (Footer) که معمولا شامل کپی رایت و سایر اطلاعاتی است که در تمام صفحات تکرار می شوند.

اگر دقت کرده باشید متوجه شده اید که هرگاه نیاز به تغییر یکی از این قسمتها داشتیم مجبور بودیم آن تغییر را در تمام صفحات به صورت دستی (و البته طاقت فرسایی) اعمال کنیم. مثلا دیدید که وقتی در قسمت آخر به صفحه اول سایتمان (index.html) یک Sidebar اضافه کردیم مجبور شدیم آن را به صفحات آرشیو تکی٬ موضوعی و ماهانه هم اضافه کنیم. اما راه آسانتری هم وجود دارد. راه آسانتری که موضوع آموزش امروز ماست: استفاده از MTInclude دوست داشتنی.

پیش از هرچیز بگذارید کمی توضیح بدهم:

در حقیقت ما می خواهیم قالب را به اجزاء کوچکتر تقسیم کنیم. با اینکار در صورتی که هر جزء نیاز به تغییر داشته باشد نیاز به انجام تغییر در کل قالبها نیست. تنها با تغییر در همان جزء کوچک می توان همه صفحات قالب را تغییر داد. البته این تنها در صورتی امکان پذیر است که چیزی این اجزاء کوچک را به بدنه اصلی پیوند بزند. این “چیز” همان MTInclude است.
بیایید به قسمت عملی برویم. ابتدا بیایید قسمت بالا (یعنی قسمتی که در تصویر بالا با شماره 1 مشخص شده) را از قالب صفحه اول جدا کنیم. دست بکار می شویم:

1- قالب index.html را در دریم ویور باز کنید.

2- تکه کد زیر را پیدا و Cut کنید:

<div id=”header”>
<h1>Primitif</h1>
<h2>Learn Movable Type by Writeage</h2>
</div>

3- حالا یک فایل جدید در دریم ویور بسازید. این فایل باید خالی (کاملا خالی) باشد یعنی هیچ کدی در قسمت کد آن دیده نشود. حالا کدهای Cut شده مرحله قبل را در قسمت کد این فایل Paste کنید و فایل را با نام logo.html در همان شاخه ای که مووبل تایپ فایلها را در آن منتشر می کند (در مثال ما شاخه writeage_2 در شاخه htdocs) ذخیره کنید. حاصل کار باید شبیه تصاویر زیر باشد:

حالا باید از کد MTInclude استفاده کنیم تا این تکه جدا شده از بدن را به آن پیوند بزنیم. اما پیش از آن بیایید کمی این کد را تجزیه و تحلیل کنیم. این کد می تواند با چند متغیر استفاده شود که ما به دو مورد از آنها در این مثال اشاره می کنیم:

<MTInclude file=”File Name”>
<MTInclude module=”Module Name”>

در حالت اول شما یک “فایل” را به بدنه پیوند می زنید (این فایل می تواند مثلا حاوی همان دو سه خط کدی باشد که در مرحله 3 آنها را کات و Paste کردیم).
در حالت دوم شما یک “ماژول” را به بدنه مرتبط می سازید. ماژول تکه کدی است که محتوای دینامیک(متغیر) دارد. یعنی پیش از آنکه به بدنه پیوند بخورد محتوای آن توسط مووبل تایپ پردازش می شود و نتیجه به بدنه پیوند داده می شود. در مثال فعلی از حالت اول استفاده می کنیم.

4- در فایل index.html به جای تکه کدی که در مرحله 2 حذف کردید کد زیر را وارد کنید:

<MTInclude file=”logo.html”>

دقت داشته باشید که اگر فایل را به جز در Root سایت در شاخه دیگری ذخیره کرده باشید لازم است آدرس همانجا را بدهید مثلا

<MTInclude file=”include/logo.html”>
<MTInclude file=”files/logo.html”>

5- حالا فایل را ذخیره کنید و به سراغ ام تی بروید.

6- اگر طبق آموزش های قبلی جلو آمده باشید (منظورم قسمت Link to File است) تنها نیاز دارید یکبار سایت را بازسازی کنید. حالا اگر نگاهی به سایتتان بیندازید درواقع چیزی تغییر نکرده است!

7- کمی وقت بگذارید و مراحل 1 تا 4 را (البته به جز مرحله 3) برای همه قالبهایی که تا حالا ساخته اید تکرار کنید (قالبهای آرشیو تکی٬ موضوعی٬ ماهانه).

8- حالا امتحان اصلی آغاز می شود. بیایید چیزی را در فایل logo.html تغییر بدهیم. مثلا بیایید به جای کد

<h1>Primitif</h1>

از کد زیر استفاده کنیم:

<h1>MovableType 4</h1>

9- فایل logo.html را ذخیره کنید و به سراغ MT بروید. یک بار بازسازی (Publish)کافی است. حالا تغییر کوچک شما در تمامی صفحات اعمال شده است. به همین راحتی و فقط با یک بار تغییر در جزء کوچکتر تمام صفحاتی که آن جزء به آنها پیوند خورده تغییر می کنند.

این مراحل برای بقیه المانهایی که کما بیش در سایت به صورت یکسان نمایش داده می شوند قابل اجراست. برای تمرین بیشتر٬ منوی بالای سایت(Navigation) و فوتر سایت را به صورت یک فایل جداگانه درآورید و به آنها نامهای top-menu.html و footer.html بدهید. حالا با استفاده از

<MTInclude file=”File Name”>

آنها را به بدنه اصلی پیوند بزنید.

اگر دقت کرده باشید در مورد ستون سمت چپ هنوز صحبتی نکرده ام. ستون سمت چپ سایت در حال حاضر شامل آرشیو ماهانه سایت است. این قسمت جزء قسمتهای دینامیک (متغیر) به حساب می آید از اینرو نمی توانیم آن را به صورت فایل جداگانه به سیستم معرفی کنیم (همانطور که گفتم فایلهایی که به MTInclude می چسبند بدون پردازش توسط ام تی نمایش داده می شوند اما قسمت آرشیو ماهانه دارای انواع کدهای ام تی است. این کدها پیش از نمایش در سایت باید توسط ام تی پردازش شوند تا اطلاعات آنها به صورت قابل فهم برای Browser به آن برگشت داده شود(. در این مواقع از module استفاده می کنیم. ماژول ها توسط مووبل تایپ پردازش می شوند و آنگاه برای چسبیدن به بدنه از آنها استفاده می شود. شاید اگر به قسمت عملی برویم کمی از این پیچیدگی کاسته شود. پس دست بکار می شویم:

10- فایل index.html را مجددا در دریم ویور باز کنید. تکه کد زیر را پیدا و Cut کنید:

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

11- اینجا باید کار متفاوتی انجام دهیم. به سراغ مووبل تایپ بروید. از قسمت Design>Templates و از بخش Template Modules روی Create template module کلیک کنید.

12- نام این ماژول جدید را Monthly ز یا هرچیز دلخواهی بگذارید و کدهایی را که در مرحله 10 کات کردید در قسمت کد Paste کنید و روی Save کلیک کنید.

13- وقت آن است که به فایل index.html برگردیم. جای آن کدی که در مرحله 10 کات کردید تکه کد زیر را بنویسید:

<MTInclude module=”Monthly Module”>

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

14- دوباره کمی وقت بگذارید و در همه قالبهایی که تا حالا ساخته اید(قالبهای آرشیو تکی٬ موضوعی٬ ماهانه) آن تکه کد مرحله 10 را پیدا کنید و به جایش کد مرحله 13 را بگذارید و همه را ذخیره کنید.

15- حالا وقت امتحان است. بیایید تغییری کوچک در ستون آرشیومان ایجاد کنیم. مثلا بیایید به انتهای کدهایی که در ماژولمان در ام تی کپی کردیم تکه کد زیر را اضافه کنیم:

<p><a href=”main-monthly-index.html”>All Months Archive</a></p>

این تکه کد٬ لینکی به صفحه اختصاصی آرشیو ماهانه به ستون اضافه می کند.

16- یادتان باشد در این مرحله باید حتما کد تغییر کرده را به قسمت کد ماژول مربوطه اضافه کنیم. اما اگر دقت کنید می بینید که در قسمت پایین کدها باز هم فیلد آشنای Link to File وجود دارد که می توانیم طبق روشی که اینجا گفتم آن را به یک فایل مرتبط سازیم. در این صورت دیگر نیاز نیست هر دفعه تغییرات را در ام تی کپی و Paste کنیم بلکه بجای آن یک فایل را در دریم ویور ویرایش خواهیم کرد که بسیار آسانتر است.

17- قبل از اینکه نتیجه را ببینیم تنها کافی است یکبار سایتمان را Publish کنیم. اگر مراحل را درست انجام داده باشید باید ستون سمت چپ سایت شما در تمام صفحات شبیه به تصویر زیر شده باشید:

در انتها شاید لازم باشد یکبار دیگر تفاوت Include کردن فایل و ماژول را با هم مرور کنیم:
Include کردن فایل تنها زمانی بکار می رود که فایل حاوی کدهای ام تی نباشد. در غیر این صورت آن کدها چون پردازش نمی شوند عینا در نتیجه نهایی نشان داده می شوند که قطعا هدف ما این نیست. توجه داشته باشید که کدهای مووبل تایپ به خودی خود برای Brawser ها چیزی به جز Text هایی بی معنا نیستند که عینا به نمایش در می آیند.

هرچند Include کردن ماژول همه جا امکان پذیر است اما بهتر است تنها زمانی که اطلاعات دینامیک در تکه کد مربوطه وجود دارد از آن استفاده کنیم. توجه کنید که هرگونه پردازش توسط مووبل تایپ٬ باری را به CPU ی سرور شما تحمیل می کند که گاهی می تواند منجر به از کار افتادن سایتتان (البته در بازدیدهای بسیار زیاد) به دلیل CPU Exceeded Error شود.

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

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