آموزش ماژول display suite

display suite module

طراحی قالب دروپال با استفاده از تکنیک و روش های مختلفی انجام می شود که در این بخش از آموزش دروپال ، به آموزش ماژول display suite خواهیم پرداخت. ماژول پرکاربرد و بسیار ساده ds  یا Display suite قطعا در طراحی سایت دروپالی به شما کمک بسیاری خواهد کرد.

موارد کاربرد ماژول display suite

در ابتدا باید به این نکته اشاره کنم که از ماژول ds در چه بخش هایی از طراحی قالب دروپال می تونیم استفاده کنیم :
1-    طراحی صفحات مختلف قالب دروپال
2-    صفحات داخلی مربوط به نوع محتوا (node)
3-    طراحی صفحات در حالت های مختلف نمایش نظیر :  teaser , default  و...
4-    طراحی صفحات مربوط به term refrence  مانند : کلمات کلیدی ، دسته بندی ها و ...
5-    و...
طراحی صفحات داخلی کاملا واکنش گرا با چیدمان های مختلف به راحتی و با کمترین کد با ماژول display suite امکان پذیر خواهد بود.بطور مثال فرض کنید می خواهیم صفحه مربوط به اخبار رو طراحی کنیم که دارای دو بخش هستش : نمایش اخبار ، سایدبار
در بخش اصلی لیستی از آخرین اخبار با فیلدهایی نظیر : عنوان ، توضیحات ، تصویر ، لینک ادامه مطلب ، کلمات کلیدی ، تعداد بازدید ، نام نویسنده ، تاریخ مطلب ، تعداد دیدگاه ها و..
سایدبارهم تعدادی بلوک نظیر : دسته بندی اخبار ، بلوک پربازدیدترین اخبار  نمایش داده خواهد شد.در پایین صفحه نیز بلوکی از اخبار منتخب متناسب با دسته بندی اخبار با فیلدهای منتخب به نمایش در بیاد و در صفحه داخلی هر خبر ، تمامی فیلدهای اخبار ، به همراه اخبار مرتبط و اخبار پیشنهادی نشون داده خواهد شد .
نکته : در صفحه داخلی اخبار فقط مطالب پیشنهادی خواهیم داشت و صفحه مربوطه بصورت کاملا wide بدون سایدبار خواهد بود.
برای طراحی صفحه اخبار گفته شده در دروپال با استفاده از ماژول ds ابتدا این ماژول رو دانلود و نصب میکنیم.
نکته : در این آموزش این ماژول رو برای قالب بوت استرپ نصب کردیم و توضیحات برای ماژول مربوط به قالب بوت استرپ هستش.برای نصب ماژول مربوط به نسخه بوت استرپ ، بعد از نصب ds باید ماژول ds_bootstrap_layouts رو نیز نصب کنیم تا قابلیت های قالب بوت استرپ رو در اختیار ما قرار بده.
بعد ازفعال کردن ماژول ، وارد صفحه مربوط به مدیریت نمایش نوع محتوای خودمون میشیم.در پایین صفحه یک بخش جدید اضافه خواهد شد که این امکان رو به ما میده تا ساختار مورد نظر خودمون رو انتخاب کنیم.ساختار 3 ستونه ، ساختار 2 ستونه یا ساختار تک سلولی (یک ستون) که در هر ساختار میتونیم عرض مربوط به هر سلول رو مشخص کنیم.
بطور مثال : Bootstrap Two Columns: 8-4 که در این حالت ستون اول دارای عرض 8 و ستون دوم دارای عرض 4  خواهد بود که با توجه به نیاز ما برای طراحی صفحه اخبار گزینه مناسبی خواهد بود.
سوال : ساختار8-4 رو برای چه سبک نمایشی باید انتخاب کنیم ؟
همان طور که میدونیم دو سبک نمایشی بصورت پیش فرض در دروپال به نام های خلاصه (teaser) و پیش فرض (default) وجود داره.
حالت پیش فرض (default) : برای نمایش صفحه داخلی مطلب یا Node هستش.
حالت خلاصه (teaser) : قابلیت استفاده در هرجایی رو داره ، اما  مهمترین جایی که استفاده میشه در نمایش نتیجه جستجو مطلب در دروپال ، صفحه مربوط به کلمات کلیدی و term refrence  ها هستش.
با توجه به توضیح در خصوص حالت های نمایش ، برای صفحه اخبار از حالت خلاصه استفاده خواهیم کرد.پس از بالای صفحه حالت خلاصه رو انتخاب و مدل نمایش رو روی Bootstrap Two Columns: 8-4 قرار میدیم.بعد از ذخیره کردن ، خواهیم دید که فیلدهای دیگری هم به این حالت نمایش اضافه شدن که به واسطه فعال کردن ماژول display suite در این قسمت نشون داده شدن.
درصورتی که درحالت عادی این فیلد ها فقط از طریق views قابل فراخوانی و نمایش خواهند بود.حالا فیلد هایی که ساختیم  و فیلدهایی که وجود دارند رو به تناسب نیاز در جاهایی که نیاز داریم  (در این جا یعنی در عرض 8 )  قرار میدیم.
مرحله بعدی ساخت صفحه مورد نظر با views هستش ، یک ویو از نوع صفحه ایجاد میکنیم و نوع نمایش رو بر روی محتوا و حالت خلاصه قرار میدیم. (پس دیگه نیازی به فراخوانی فیلد ها و ایجاد ارتباط برای نمایش اطلاعات نویسنده و... نیست.)
کار دیگه ای که باید انجام بدیم ، نمایش بلوک های مورد نیاز در سایدبار ما یا همون بخش با عرض 4 هستش.برای نمایش بلوک های در ds ،   پایین صفحه مربوط به سبک نمایش  تب هایی وجود داره که گزینه Custom fields رو انتخاب میکنیم و در مقابل اون گزینه هایی برای ما نمایش داده خواهد شد که افزودن بلوک رو انتخاب میکنیم.در ادامه نوع بلوک رو انتخاب خواهیم کرد که برای محتوا ، کاربران ، دسته بندی ها یا دیدگاه ها هستش که بسته به نیاز  بلوک مورد نظرمون رو انتخاب میکنیم .
برای اضافه کردن بلوک های دیگر نیز به همین ترتیب ادامه خواهیم داد.
بلوک هایی که انتخاب میکنیم ، بلوک های پیش فرض هسته دروپال میتونن باشن هم بلوک هایی که با ویوز مانند مطالب مرتبط ، اطلاعات نویسنده ، سایر مطالب نویسنده و ... ایجاد میکنیم.
کار پایانی بعد ذخیره کردن تغییرات ، مقداری css با چاشنی سلیقه و خلاقیت هستش تا یک صفحه جذاب متناسب با نیازمون طراحی کنیم.
برای نمایش صفحه داخلی هم به همین ترتیب کارهارو انجام میدیم ؛ اما برای حالت نمایش پیش فرض.
چون ما در مثال برای صفحات داخلی اخبار سایدبار در نظرنگرفتیم حالت تک ستونه یا Bootstrap One Column: 12 رو انتخاب میکنیم.

چند نکته در استفاده از ماژول display suite :

1-    با استفاده از ماژول display suite دیگه نیازی به فراخوانی ناحیه های مختلف وجود ندارد.
2-    برای حالت های نمایش در ds مانند تک ستونه ، دو ستونه و... نیز امکان نوشتن tpl وجود داره که در همون بخش نام هایی که میتونیم استفاده کنیم رو به مانشون میده.
3-    امکان تعریف سبک های نمایشی مختلف وجود داره که میتونیم در مدیریت نمایش هر نوع محتوا ، حالت های مختلفی برای استفاده های گوناگون به کار ببریم.
4-     از حالت های نمایش ds در صفحه مربوط به افزودن محتوا نیز میتوانیم استفاده کنیم.(در پروژه هایی که حق دسترسی به کاربران جهت افزودن محتوا داده می شود کاربرد دارد.مانند سایت های ثبت آگهی)
5-     از ماژول display suite برای طراحی قالب مدیریتی نیز می توانیم استفاده کنیم.

 

 

خبرنامه دروپال تم

باعضویت در خبرنامه هوشمند دروپال تم از جدیدترین قالب های دروپالی مطلع شوید.

افزودن دیدگاه جدید