От темплейт към тема

След като научихме как се дефинират библиотеки със стилове и скриптове в Drupal 8 нека видим и как да го направим на практика с нашия темплейт. За целта ще използваме един темплейтен файл от системата на Drupal, който е специален с това, че ако присъства в папка templates на темата, ще отговаря за началната страница на сайта. Името на този темплейт трябва да е page--front.html.twig. След като сме създали файл с такова име просто копираме в него всичко, което се намира между <body> и </body> от нашия HTML-темплейт. Съдържанието на styles.css файла от темплейта копираме в styles.css файла на темата. И понеже в предната статия видяхме, че всички файлове се зареждат коректно ако изчистим кеша и презаредим страницата в браузъра би трябвало да видим съдържанието на нашия темплейт с всички елементи стилизирани от нашия css файл. Единственото, което не трябва да видим са снимките, защото те да дефинирани в темплейта като абсолютни пътища, които в темата не съществуват. Това не бива да ни притеснява, защото всички снимки по темплейта ще могат да се сменят от административната страница на темата.

page front

Ако обаче това ни дразни и искаме да видим и снимките трябва да направим следното:

  1. правим папка images в основната директория на темата и в нея копираме всички снимки от темплейта.
  2. Навсякъде в page--front.html.twig където има път до снимка точно преди пътя добавяме '{{ base_path ~ directory }}/'

т.е. от:

<div class="service-image">
  <img class="picture" src="images/manicure-870857_1280.jpg" alt="" />
</div>

трябва да стане:

<div class="service-image">
  <img class="picture" src="{{ base_path ~ directory }}/images/manicure-870857_1280.jpg" alt="" />
</div>

 

{{ base_path ~ directory }} e TWIG - променлива, която съдържа пътя до основната директория на текущата тема. По-нататък ще се запознаем по-подробно с TWIG.

В крайна сметка полученият код на page--front.html.twig трябва да стане:

<header>
    <div class="logo">
      <a href="#"><img src="{{ base_path ~ directory }}/images/deep_theme_logo.png" alt="" /></a>
    </div>
    <nav>
      <ul class="menu lavaLamp">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="top-section">
    </section>
    <section id="services">
      <div class="service left-service">
        <div class="service-image">
          <img class="picture" src="{{ base_path ~ directory }}/images/manicure-870857_1280.jpg" alt="" />
        </div>
        <h2><a href="#">Nail Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="service middle-service">
        <div class="service-image">
          <img class="picture" src="{{ base_path ~ directory }}/images/cosmetics-2130540_1280.jpg" alt="" />
        </div>
        <h2><a href="#">Skin Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="service right-service">
        <div class="service-image">
          <img class="picture" src="{{ base_path ~ directory }}/images/fashion-3308387_1280.jpg" alt="" />
        </div>
        <h2><a href="#">Hair Care</a></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </section>
    <section id="paralax">
      <h2>Don't be shy,</h2>
      <h3>Contact Us!</h3>
    </section>
    <section id="slogan">
    
    </section>
  </main>
  
  <footer>
    <div class="top-footer">
      <div class="logo-footer">
        <img src="{{ base_path ~ directory }}/images/deep_theme_logo_white.png" alt=""/>
      </div>
    </div>
    <div class="middle-footer">
      <div class="middle-footer-left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
      <div class="middle-footer-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
      <div class="middle-footer-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel arcu est. Vestibulum vestibulum scelerisque iaculis. Donec ac gravida est, a finibus neque.</p>
      </div>
    </div>
    <div class="bottom-footer">
      <div class="social-icons">
        <ul>
          <li><a href="#"><img src='{{ base_path ~ directory }}/images/facebook-icon.svg'/></a></li>
          <li><a href="#"><img src='{{ base_path ~ directory }}/images/tweeter-icon.svg'/></a></li>
          <li><a href="#"><img src='{{ base_path ~ directory }}/images/messenger-icon.svg'/></a></li>
          <li><a href="#"><img src='{{ base_path ~ directory }}/images/skype-icon.svg'/></a></li>
        </ul>
      </div>
    </div>    
  </footer>
	<div class="copyright">
    <span><a href="#">&copy; CodeMyArt</a></span>
  </div>

Като резултат след като запишем файла и изчистим кеш-а трябва да видим всичко, което виждахме в темплейта:

Drupal 8 page front

Червената подложка на меню-елемента показва, че lavalamp също работи коректно. Ако обаче това не е така Ви моля да се запознаете със статията за включване на jQuery в WordPress. В предишни версии на ядрото на Drupal обръщението към jQuery се извършваше по същия начин. Просто променете съдържанието на scripts.js съгласно това описание.