Php:symfony:twig

De Les Tutoriaux du WebMestre
Aller à : navigation, rechercher

Prérequis au développement d'un thème

  • Pour voir dans la console FireFox quelles sont les fichiers Javascript et CSS réellement utilisés

Activation du Debuggging Twig

Cas de Drupal

  • sous sites/defaul copier default.services.yml our créer services.yml
  • modifier ce services.yml juste créé pour activer le Debugging Twig ce qui donne comme modification:
jpmena@jpmena-HP-ProDesk-600-G2-MT ~/RIF/d8rif/sites/default $ diff -u default.services.yml services.yml
--- default.services.yml	2016-11-16 19:45:36.000000000 +0100
+++ services.yml	2017-03-07 15:15:29.934700318 +0100
@@ -55,7 +55,7 @@
     #
     # Not recommended in production environments
     # @default false
-    debug: false
+    debug: true
     # Twig auto-reload:
     #
     # Automatically recompile Twig templates whenever the source code changes.
  • Cette modification a pour effet de permettre à Drupal d'expliquer dans le HTML résultant
    • quels sont les fichiers template à l'origine de la production du HTML résultant. Cela donne dans le cas du Header du Thème Bootstrap:
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'page' -->
<!-- FILE NAME SUGGESTIONS:
   * page--user--1.html.twig
   * page--user--%.html.twig
   * page--user.html.twig
   x page.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/page.html.twig' -->
          <header class="navbar navbar-default container" id="navbar" role="banner">
            <div class="navbar-header">
        

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
   * region--navigation.html.twig
   x region.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/region.html.twig' -->
  <div class="region region-navigation">
    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--bootstrap-branding.html.twig
   x block--system-branding-block.html.twig
   * block--system.html.twig
   * block.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/block/block--system-branding-block.html.twig' -->
      <a class="logo navbar-btn pull-left" href="/" title="Accueil" rel="home">
      <img src="/themes/bootstrap/logo.svg" alt="Accueil" />
    </a>
        <a class="name navbar-brand" href="/" title="Accueil" rel="home">Drupal</a>
    
<!-- END OUTPUT from 'themes/bootstrap/templates/block/block--system-branding-block.html.twig' -->


  </div>

<!-- END OUTPUT from 'themes/bootstrap/templates/system/region.html.twig' -->


                                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
              </div>

                    <div id="navbar-collapse" class="navbar-collapse collapse">
          

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
.................................................................................

Utilisation de Kint

Cas général

  • TODO

Cas de Drupal