Notes theme drupal 8 drupalcamp Floride 2017

http://slides.com/cottser/d8-theming-drupalcampfl-2017#/4 et https://www.fldrupal.camp/sessions/approved/florida-drupalcamp-2017/desi...

core themes

2 camps : Thèmes core drupal 8

Sensible ⅔

Clean ⅓

utilise Classy utilise Stable

my_theme.info.yml:

base theme: classy

my_theme.info.yml:

 

Avec Stable (plus simple), sur qu'une grosse maj ne casse rien :)

 

Déplacement des classes (les tags "libres") de pré-process vers les templates => plus facile de les modifier.
(Dans le code d'un template de base, chercher "set classes = " ou cf twig. On peux ajouter/modifier des attributs)

without

Soit on est plutot "ajout" (v8) soit plutot "retrait" (v7) dans le markup, des fonctions pour cacher/montrer et le nouveau without.

  • drupal 7 : tableau de rendu, avec la "clé" hash printed en true ou false... ce 1er exemple ne marche pas, c'est juste pour donner une explication (de drupal 7 "twigé" vers drupal 8) et comparer avec le code d'après:
{% hide(content.comments) %}
{% hide(content.links) %}
{{ content }}
{{ content.links }}
{% show(content.links) %}

{# Content with links but without comments #}
{{ content }}
  •  drupal 8 a without (on n'aura plus les 6 lignes de code de la v7)
{{ content|without('comments', 'links') }}

{{ content.links }}

{{ content|without('comments') }}

registre de thème twig

2 facons de référencer d'autres templates twig :

  • (3) avec le nom du template :  "block.html.twig" (voir plus bas)
  • (2) via le namespace : "@stable/block/block.html.twig"
  • (1) avec le chemin complet (du root drupal) : "core/themes/stable/templates/block/block.html.twig"
    C'est la 1ere version utilisée au début. Si par ex, on veux déplacer son thème d'un dossier à l'autre, voir ici car codé en dur.

Pourquoi avoir besoin de cela ? à cause des "blocks de twigs" (à ne pas confondre avec le blocs drupal) - voici un extrait de block.html.twig:

extrait de block.html.twig dans son theme :
<div{{ attributes }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
    {{ content }}
  {% endblock %}

</div>
{% extends "@stable/block/block.html.twig %}
{% block content %}
  <div class="block-content-wrapper">
   {{ parent() }}
  </div>
{% endblock %}

Un ex, personnaliser le bloc de recherche. On va construire :

.
├── my_theme.info.yml
└── templates
    ├── block--search-form-block.html.twig
    ├── block.html.twig
    └── page.html.twig

avec block--search-form-block.html.twig:

{% extends "@stable/block/block.html.twig" %}
{% block content %}
  <div class="block-search-form-wrapper">
    {{ parent() }}
  </div>
{% endblock %}

Manipuler les variables

block--search-form-block.html.twig:

{% extends "block.html.twig" %}
{% set title_attributes = title_attributes.addClass('hello-there') %}
{% set attributes = attributes.removeClass('from-earlier') %}

peux etre compliqué car les changements dynamiques (codé dans le template parent) sera en fait joué après dans le temps.

Les librairies

Le registre de thème de drupal surveille : les surcharges de thème (template overide), fonctions preprocess - en gros, il regarde quel template est actif. Pour afficher le formulaire de recherche précédent, il voit (dans le registre des thème) le fichier surchargé...

my_theme.libraries.yml (Typiquement, si ca ne marche plus qd on se délogue, vérifier les dépendances ici :)):

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

 

On override les lib - dans my_theme.info.yml:

libraries-override:
  classy/base:
    css:
      component:
        css/components/menu.css: false
  user/drupal.user: false

false permet de désactiver.

ici, jQuery Update dans my_theme.info.yml:

libraries-override:
  core/jquery:
    js:
      assets/vendor/jquery/jquery.min.js: js/jquery-5000.max.js

Pour Modernizr dans my_theme.info.yml (le core en a besoin):

libraries-override:
  core/modernizr:
    js:
      assets/vendor/modernizr/modernizr.min.js: js/modernizr.min.js

 

Etendre (comme une dépendance inversées)

Pour etre sur que nos lib soient chargées avec les lib du core (au moment où les lib du core sont appellées - par ex, les css du node ne sont chargées que qd on en a besoin), avec my_theme.info.yml (quand ce thème est actif):

libraries-extend:
  user/drupal.user:
    - my_theme/user
  classy/node:
    - my_theme/node

Note : elles ne seront pas chargées avec le theme d'admin (seven) - car notre thème n'y est pas actif.

Ajout de lib à partir de twig

Dans unexemple.html.twig :

{{ attach_library('my_theme/cuddly-slider') }}

 

logo drush