Кое от къде идва?

На практика всичко, което виждате по екрана е генерирано от темплейт-файлове. Отначало ще се запознаем само с няколко, но с напредване на работата ще обогатяваме знанията си за темплейтите, защото това е от критична важност при създаването на теми. Нека изходим от структурата на стандартен html файл:

 

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<title>Some Title</title>
</head>
<body>
	<h1>This is sample HTML template</h1>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</p>
</body>
</html>

 

Виждаме, че логиката на файла е разделена на няколко секции. Най-външната обвивка е html-декларацията и html-тага. В него се съдържат двете основни части - head и body. Всичко, което е записано в head-частта служи за връзка със css-файлове, както и за мета-информация. Тези кодове не се показват в прозореца на браузъра. Всичко, което е записано между body таговете се показва в прозореца на браузъра и служи за връзка с потребителя. Това логическо разделение е запазено в темплейтната система на Drupal. За това се грижат два темплейтни файла:

html.html.twig

и

page.html.twig

За да стане по-ясно може да разгледате следната картинка:

templates

Първият от тях - html.html.twig съдържа декларацията за типа на документа, html - таговете и head-частта. Ето неговото съдържание:

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

Виждаме, че структурата му е идентична с чистия html-темплейт, който разгледахме по-горе.

 

 

Ако редовете

{{ page_top }}
{{ page }}
{{ page_bottom }}

са Ви непознати не се плашете. Това са т.нар. TWIG-променливи. Засега с другите няма да се занимаваме, в момента ни интересува само {{ page }}. На практика при визуализирането на страницата тагът

{{ page }}

ще бъде заменен от съдържанието на темплейта page.html.twig.

 

Съдържанието на page.html.twig е следното:

<div class="layout-container">

  <header role="banner">
    {{ page.header }}
  </header>

  {{ page.primary_menu }}
  {{ page.secondary_menu }}

  {{ page.breadcrumb }}

  {{ page.highlighted }}

  {{ page.help }}

  <main role="main">
    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

    <div class="layout-content">
      {{ page.content }}
    </div>{# /.layout-content #}

    {% if page.sidebar_first %}
      <aside class="layout-sidebar-first" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}

    {% if page.sidebar_second %}
      <aside class="layout-sidebar-second" role="complementary">
        {{ page.sidebar_second }}
      </aside>
    {% endif %}

  </main>

  {% if page.footer %}
    <footer role="contentinfo">
      {{ page.footer }}
    </footer>
  {% endif %}

</div>{# /.layout-container #}

Можем ли да променим съдържанието на темплейт файловете?

Видяхме, че page.html.twig съдържа всичко, което се намира между <body> ... </body> таговете на html-темплейта.

Разглеждайки съдържанието на файла виждаме, че всичко си е стандартен html с познатите вече TWIG-променливи. Работата им е подобна на тагът {{ page }} от темплейта html.html.twig - да визуализират съдържанието от други темплейти. Така например {{ page.sidebar_first }} при показването в браузъра ще бъде заменен от темплейт, който показва странична лента (сайдбар) на нашата страница.

Не само, че може, но в общия случай ще трябва да го правим. За да модифицираме съдържанието на страницата така, че да показва това, което искаме се налага да модифицираме съдържанието на посочените два файла. Добре, но къде да ги открием?

Файловете html.html.twig и page.html.twig се намират в директория

core/themes/stable/templates/layout

на основната drupal инсталация

Внимание! Никога, никога, НИКОГА не променяйте съдържанието на файлове в ядрото (core) на Drupal. Това правило гарантира правилната работа на системата. Как тогава да променим съдържанието на темплейт - файловете така, че да показват това, което искаме?

Правилният начин!

Не трябва да променяме съдържанието на тези файлове, а да ги препокрием. Как става това?

В директорията на нашата тема създаваме нова директория с име templates. От папка core/themes/stable/templates/layout копираме двата файла html.html.twig и page.html.twig в новата папка. Съдържанието на тези новосъздадени файлове вече може да бъде променяно (внимателно).

За да може Drupal да показва изхода от тях, вместо от оригиналните трябва само да изчистим кеша.