Plik szablonu NODE.html.twig

Implementacja szablonu do wyświetlania węzła

Dostępne zmienne:
-----------------

• node:	jednostka z ograniczonym dostępem do właściwości i metod obiektu.

  Typowe metody:
   - id - 
   - label -
   - bundle - maszynowa nazwa rodzaju zawartości np.: article

  Metody zaczynające się od „get”, „has” lub „is”:
   - node.getCreatedTime() - zwróci znacznik czasu utworzenia węzła.
   - node.hasField('field_example') - zwraca wartość TRUE, jeśli węzeł zawiera jakiekolwiek pole/a (field_example).
     Nie jest to jednoznaczne z tym, że pole/a mają wartość
   - node.isPromoted() - zwróci informacje, czy node jest promowany na stronie głównej
   - node.isPublished() - zwróci informację, czy węzeł ma status opublikowany.
   - NOT node.isPublished() - zwróci informację, czy węzeł ma status NIEopublikowany.

  Wywołanie innych metod, takich jak node.delete() spowoduje wyjątek.
  Pełna lista publicznych właściwości i metod dla obiektu węzła: "namespace Drupal\node\Entity".
• label:	tytuł węzła (opcjonalny)
• content:	wszystkie pola, elementy węzła
  - wyświetlenie wszystkich pól węzła:                  {{ content }}		
  - wyświetlenie danego pola w węźle:                   {{ content.field_nazwa }}	
  - wykluczenie danego pola podczas wyświetlania:       {{ content|without('field_example') }}
  - wykluczenie wielu pól:                              {{ content|without('field_n1', 'field_n2', 'field_n3') }}
• metadata:              meta dane dla węzła
• author_picture:	auto węzła. Renderowany przy pomocy "compact" view mode
• author_name:		(optional) nazwa autora węzła
• date:			(optional) Data utworzenia węzła
• url:			bezpośredni URL węzła
• display_submitted:	Czy info o przesłaniu ma być wyświetlane
• attributes: atrybuty HTML dla zawierającego elementu
  Element "attributes.class" może zawierać jedną (lub więcej) z poniższych klas
  - node:			typ szablonu (template type) nazywany też "theming hook"
  - node--type-[type]:		typ węzła. 
      Np.: jeśli Article to wartość node--type-article. 
      Maszynowa nazwa często będzie w krótkiej formie, czytelniejszej dla człowieka. 
  - node--view-mode-[view_mode]:tryb widoku węzła. 
      Np.: teaser zwróci "node--view-mode-teaser", a full zwróci "node--view-mode-full".
 
  Opcje publikowania węzła
  - node--promoted:	węzeł z zaznaczoną opcją "promowany na stronie głównej".
  - node--sticky:	węzeł z zaznaczoną opcją "przyklejony na górze listy".
  - node--unpublished:	węzeł z odzaznaczoną opcją "opublikowane". Węzeł widoczny tylko dla administratora.
• title_attributes:	tak samo jak attributes z tym, że dotyczy "main title tag", tego w H1
• content_attributes:	tak samo jak attributes z tym, że dotyczy tagu zawierającego zawartość {{ content }}
• author_attributes:	tak samo jak attributes z tym, że dotyczy tagu zawierającego autora węzła
• title_prefix:	dodatkowe dane PRZED znacznikiem tytułu, wypełniane przez inne moduły
• title_suffix:	dodatkowe dane PO znaczniku tytułu, wypełniane przez inne moduły
• view_mode:	Tryb podglądu. Np. "teaser" lub "full".
• teaser:	flaga stanu - TRUE jeśli powyższy "view_mode" ma wartość teaser
• page:		flaga stanu - TRUE jeśli powyższy "view_mode" ma wartość full
• readmore:	flaga stanu "more state" - TRUE jeśli "teaser content" nie będzie mógł pomieścić "main body content"
• logged_in:	flaga stanu logowania użytkownika - TRUE jeśli użytkownik jest zalogowany
• is_admin:	flaga stanu roli użytkownika - TRUE jeśli użytkownik jest Administratorem

 

@ToDo

Usunąć atrybut ID w HTML (lub utworzyć klasę) w przypadku dwukrotnego renderowania w dwóch różnych miejscach na tej samej podstronie. Implementacja szablonu do wyświetlania węzła article - główna treść.

Przykładowe sugestie nazw plików dla szczególnych zastosowań

node.html.twig -

node--type--viewmode.html.twig -

node--teaser.html.twig - to pewnie to co wyżej

node--TYPE.html.twig - Np.: node--article.html.twig

node--TYPE--teaser.html.twig - Np.: node--article--teaser.html.twig

node--nodeID.html.twig - Np.: node--1.html.twig

node--nodeID--teaser.html.twig - Np.: node--1--teaser.html.twig

node--view--frontpage.html.twig -

node--view--frontpage--page-1.html.twig -

node--page.html.twig -

node--full.html.twig -

node--.html.twig -

Moje główne zmiany:

  • usunięcie atrybutu role="article" metodą attributes.removeAttribute('role').
  • Wyświetlenie tytułu strony H1 w tym pliku szablonu z uwzględnieniem warunku skrótu, prefixu, suffixu oraz atrybutów łącznie z klasą page-title
  • opcja dla skrótu bez widocznego tytułu wpisu (należy utworzyć w systemie nowy tryb wyświetlania)
{{ title_prefix }}
  {% if label and not page %}
    {% if teaser %}
    <h2{{ title_attributes }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h2>
    {% else %}
    <h3{{ title_attributes.addClass('nodisplay') }}>{{ label }}</h3> 
    {% endif %}
  {% endif %}
{{ title_suffix }}

Alternatywą jest użycie modułu Exclude Node Title - nadal trzeba utworzyć dodatkowy tryb wyświetlania i niestety nie sprawdzi się, jeśli wymagany jest tag H3. Ale do samego ukrywania tytułu bez ingerencji w szablony i kod CSS jak najbardziej zadziała.

Jak dodać klasę do tytułu strony H1 bez dodawania atrybutu class?

Dodanie jednej klasy

<h1 {{ title_attributes.addClass('classname') }}>

Dodanie wielu klas

{%  set classes = 
[
    'title-site',
    'site-title',
    'main-title'
]  
%}
<h1 {{ title_attributes.addClass(classes) }}>

Jak usunąć atrybut role="article" ze znacznika ?

<article{{ attributes.removeAttribute('role') }}>

Jak dodać page-title w pliku node.html.twig?

Poniżej kod, który pozwala dodać w templatce tytuł strony H1:

{% if node.title.value %}
  <h1>{{ node.title.value }}</h1>
{% elseif page['#title'] %}
  <h1>{{ page['#title'] }}</h1>
{% endif %}
{{ label }} or {{ node.label }} or {{ node.getTitle() }} 

Źródło: Print title in page.html.twig in D8 / D9

Jak pobrać adres pliku obrazu lub innego pliku templatki?

{{  file_url(node.field_nazwa.entity.fileuri)  }}

lub

{{  file_url(node.field_nazwa.entity.uri.value)  }}

Jak dodać dodatkową zmienną przy renderowaniu węzła?

Kategoria