آموزش طراحی قالب دروپال 8 - بخش سوم ::: طراحی قالب اختصاصی

در بخش سوم از آموزش های  طراحی قالب دروپال 8 قصد داریم تا نحوه طراحی یک قالب در دروپال 8 رو به شما آموزش بدیم.همون طور که در آموزش قبلی گفتیم ، فولدر  themes که در روت قرار گرفته برای فراخوانی یک قالب جدید ازش استفاده میشه.حال میخوایم در چند گام یک قالب اختصاصی رو طراحی کنیم : 

گام اول : ایجاد یک فولدر به نام قالبی که مورد نظر هست.بطور مثال من اسم قالبم رو میزارم drupalcenter .

گام دوم : ایجاد فایل   THEMENAME.info.yml

بطور مثال : drupalcenter.info.yml 

خوب از این فایل برای تعریف اطلاعات پایه تم و ناحیه ها (region) استفاده خواهد شد.اطلاعات این فایل بصورت زیر خواهد بود:

name: Drupalcenter

description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'

type: theme

base theme: drupalcenter

version: '8.0.4'

core: '8.x'

libraries:

 -  drupalcenter/global

regions:

menu: Menu

logo:Logo

 content: Content 

# Information added by DrupalCenter.ir  

که بخش های مختلف را توضیح خواهیم داد :

بخش اول :

name  : نام قالب که در بخش ظاهر  (appearance) نمایش داده خواهد شد. 

description : برای نوشتن توضیحات در موردقالب که در بخش ظاهر (appearance) قابل نمایش هست.

 type : نشان دهنده نوع فرمت هستش.بطور مثال : ماژول ، قالب یا پروفایل ، که در قالب همیشه گزینه theme خواهد بود.

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

version : نوشتن ورژن هسته استفاده شده برای اینکه از ماژول های سازگار با اون ورژن استفاده بشه.

core : نوشتن نسخه هسته.

بخش دوم : 

در این بخش میخواهیم نحوه فراخوانی فایل های css , js و.. رو توضیح بدیم.

در دروپال 7 تمامی این فایل های در خود فایل .info فراخوانی می شد.اما در دروپال 8 ، فایل های css , js در یک فایل دیگری با نام  THEMENAME. libraries.yml فراخوانی خواهد شد. بطور مثال : drupalcenter. libraries.yml

پس یک فایل بصورتی که گفته شد ایجاد میکنیم و به صورت زیر css ,js مورد نظر رو فراخوانی خواهیم کرد :

global:

  version: VERSION

  css:

    theme:

      css/style.css: {}

      css/bootstrap.min.css: {}

  js:

    js/bootstrap.min.js: {}

 

global : نام یک تابع هست که از این نام تابع برای فراخوانی فایل drupalcenter. libraries.yml  در  فایل drupalcenter.info.yml استفاده خواهیم کرد.

version : میتوان ورژن مربوط به فایل را نوشت و یا نام VERSION  را قرارداد.

اگر بخواهیم فایل css را فراخوانی کنیم در ابتدا باید نام css:  را نوشت ، سپس یک نام برای اینکه مشخص کنیم برای کدام بخش قسط نوشتن css داریم بطور مثال :   

global:

  version:VERSION

    css:

      theme:

و بعد از آن مسیر مربوط به فایل را بصورت زیر خواهیم نوشت : 

css/style.css: {}

نکته: قراردادن {} بعد از نوشتن مسیر الزامی می باشد.

برای  صدا زدن فایل js  هم مانند css عمل خواهیم کرد .در ابتدا مشخص میکنیم که میخواهیم js صدا بزنیم و بعد نوشتن مسیر فایل مورد نظر : 

js:

   js/demo.js: {}

خوب نوشتن فایل drupalcenter. libraries.yml  تمام شد ، فقط باید اون رو فراخوانی کنیم.

همان طور که گفته شد این فایل باید در drupalcenter. info.yml  بصورت زیر فراخوانی شود : 

ابتدا مشخص میکنیم که قصد صدا کردن libraries  را داریم ، سپس بعد از نوشتن نام قالب همراه با علامت دش (-) ، نام تابع را مینویسیم.

libraries:

- drupalcenter/global

 

نکته : نام تابعی که بعد از قالب(global) در این جا نوشته می شود باید هم نام تابع نوشته شده در فایل 

drupalcenter. libraries.yml  باشد.

بخش سوم : 

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

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

regions:

  menu: Menu

  logo:Logo

 content: Content

خوب در این جا نوشتن فایل info  به پایان رسید. !

گام سوم : ایجاد فولدرهای css , js , images که در فایل های مربوط به هریک رو در فولدر مربوطه قرار خواهیم داد.

گام چهارم : قرار دادن یک لوگو با پسوند .svg  در فایل قالب بصورت  logo.svg  .

در صورتی که بخواهیم یک شات از قالب در صفحه مربوط به قالب نمایش داده شود یک تصویر از قالب بصورت screenshot.png  در فایل قرار میدهیم.

گام پنجم : ایجاد یک فولدر با نام templates که فایل مربوط به طراحی صفحه اصلی ، صفحات داخلی ، صفحه نمایش یک محتوای خاص ، طراحی یک قالب برای بلوک ، کامنت ها و....... در آن قرار خواهد گرفت.

بطور مثال برای  ایجاد صفحه اصلی سایت (front) ابتدا یک فایل با نام page--front.html.twig  ایجاد میکنیم.

خوب حالا فایل رو باز میکنیم و شروع میکنیم به نوشتن html , html5 , bootstrap  و یا هرچیز دیگری که بلد هستیم.

من میخوام از بوت استرپ(bootstrap) استفاده کنم اما قبل از اون باید فایل های اون رو فراخوانی کنم.پس کد زیر رو به فایل 

drupalcenter. libraries.yml که مربوط به css , js هست اضافه میکنم. در نتیجه فایل بصورت زیر خواهد شد : 

 

 

global:

 version: VERSION

   css:

     theme:

       css/one.css: {}

      css/bootstrap.min.css: {}

   js:

      js/bootstrap.min.js: {}

 

بعد از انجام تغییرات شروع میکنیم به طراحی یک هدر که میخوایم لوگوو منوی ما در اون قرار بگیره :

<header class="header">

     <div class="container">

          <div class="col-md-4">

               {{page.logo}}

         </div>

         <div class="col-md-8">

               {{ page.menu }}

          </div>

     </div>

</header>

همان طور که در کد ها مشخص هست برای فراخوانی ناحیه در صفحات بصورت {{page.REGION NAME}} عمل خواهیم کرد.

خوب حالا تنها کاری که باقی مانده این هست بلوک لوگو که در دروپال8 به نام site branding  هستش رو در ناحیه logo قرار بدیم و بلوک منو هم در ناحیه menu !

برای سایر بخش های قالب نظیر ناحیه محتوا ، سایدبار،فوتر و .... نیز به همین روش انجام میشه.

دوستان در این بخش بطور کامل فولدر و فایل های مربوط به ایجاد یک قالب اختصاصی دروپال 8 رو بطور کامل توضیح دادیم ، تنها چیزی که باقی می مونه کمی تمرین و کار کردن با این کدها هستش، هرجایی که نیاز به راهنمایی و یا سوال بود ، تیم پشتیبانی مرکز دروپال ایران در خدمت شماست تا  باهم بتونیم بیشتر و حرفه ای تر دروپال رو یاد بگیرم.

در بخش بعدی آموزش طراحی قالب برای دروپال 8 باهم صفر تا صد یک قالب رو کد خواهیم کرد.