Cramnurbel

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Création d'un thème depuis zéro ======

Sources:
  * [[https://www.drupal.org/docs/theming-drupal|Drupal Theming Guide]]
  * [[https://blog.templatetoaster.com/create-drupal-theme-from-scratch/]]

===== Création du dossier =====

Nom du thème créé : **mytheme**

  * Créer le dossier **/themes/custom/mytheme**
  * Y créer l'arborescente suivante :

<code>
themes
    custom
        mytheme
            css
                style.css
            js
                main.js
            templates
                page.html.twig
            mytheme.info.yml
            mytheme.libraries.yml
</code>

===== Configuration du Thème =====

<code yaml /themes/custom/mytheme/mytheme.info.yml>
name: My Great Theme
description: This is my first theme project
type: theme
base theme: false
core_version_requirement: ^8 || ^9

regions:
  header: Header
  content: Content
  footer: Footer
  page_top: Page top
  page_bottom: Page bottom

libraries:
  - mytheme/global-css
</code>

**page_top** et **page_bottom** sont deux régions cachées,
on ne peut pas y placer de bloc, mais elles doivent exister.
Comme on déclare au moins une région, il faut les déclarer toutes,
y compris ces deux-ci.

===== Librairies =====

<code yaml /themes/custom/mytheme/mytheme.libraries.yml>
global-css:
  version: VERSION
  css:
    theme:
      css/elements.css: {}
      css/layout.css: {}
      css/print.css: { media: print }
  js:
    js/main.js: {}
  dependencies:
    - core/jquery
</code>

===== Structure des templates du core =====

<code>
x-- core/modules/system/templates/html.html.twig
|
|   <html>
|       <head>
|       </head>
|
|       <body>
|
|       x-- core/modules/toolbar/templates/toolbar.html.twig
|       |
|       x--
|
|       x-- core/modules/system/templates/off-canvas-page_wrapper.html.twig
|       |
|       |   x-- core/modules/system/templates/page.html.twig
|       |   |
|       |   x--
|       |
|       x--
|
|       </body>
|   </html>
|
x--
</code>

===== Réécrire un template =====

<code twig /themes/custom/mytheme/templates/page.html.twig>
<!-- région "header" -->
<div class="header">
    {{page.header}}
</div>
<!-- région "content" -->
<div class="content">
    {{page.content}}
</div>
<!-- région "footer" -->
<div class="footer">
    {{page.footer}}
</div>
</code>
Cramnurbel

Outils pour utilisateurs

Outils du site

Outils de la page
