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
Sensible ⅔ |
Clean ⅓ |
utilise Classy | utilise Stable |
my_theme.info.yml:
|
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 }}> |
{% extends "@stable/block/block.html.twig %} |
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') }}