viernes, 10 de julio de 2020

Localizando archivos de plantilla twig con depuracion en drupal 8

Si deseas saber que template esta generando un marcado para un elemento particular de una pagina puedes utilizar la opcion de depuracion por defecto de twig. Esta opcion mostrara comentarios HTML al mismo tiempo que la salida inclyendo los hooks utilizados en el tema, sugerencias para nombres de templates al igual que el nombre exacto del archivo twig utilizado para mostrar contenido en una seccion particular del marcado.

Para habilitar la depuracion de los templates twig puedes ir a sites/default/services.yml de tu instalacion de drupal 8 estableciendo dentro de este archivo el valor de la variable debug en true. Para instrucciones completas para depuracion en twig lee Depurando templates compilados en twig.

Luego de limpiar el cache al inspeccionar el elemento de la pagina veras el resultado de la depuracion del template twig como el siguiente:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'node' -->
<!-- FILE NAME SUGGESTIONS:
   * node--view--frontpage--page-1.html.twig
   * node--view--frontpage.html.twig
   * node--1--teaser.html.twig
   * node--1.html.twig
   * node--article--teaser.html.twig
   * node--article.html.twig
   * node--teaser.html.twig
   x node.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->

<article data-history-node-id="1" data-quickedit-entity-id="node/1" role="article" class="contextual-region node node--type-article node--promoted node--view-mode-teaser" about="/node/1" typeof="schema:Article" data-quickedit-entity-instance-id="0">
....
</article>

<!-- END OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->


Ahora te explicare tres puntos referentes a esta salida:

Las sugerencias de nombre estan en el orden mas especifico al menos especifico.
La sugerencia actual para el nombre del template esta marcado con una 'x' a su lado
Entre BEGIN OUTPUT y END OUTPUT encontraras la ruta completa del template que esta siendo mostrado.

En este caso vemos el marcado para un nodo que esta encapsulado con informacion de depuracion que puede ser de tu utilidad. Drupal incluye el hook que se esta utilizando, algunas sugerencias para nombres de template y la localizacion exacta del archivo de template que muestra el contenido actual.


Depurando plantillas compiladas en twig drupal 8

El motor de twig proporciona opciones para configurar su depuración, cargar automáticamente (recompilación) plantillas, y almacenamiento en caché compilado templates (plantillas) en el sistema de archivos. Por defecto, el motor de la plantillas twig compila templates en código PHP y almacena el código compilado en memoria. El código compilado no es adecuado para el desarrollo, ya que los cambios en las plantillas Twig no se actualizan inmediatamente en su sitio de Drupal. La Caché de twig se puede borrar mediante la interfaz para limpiar caché de Drupal, pero para el desarrollo en curso es más fácil cambiar la configuración de Drupal para que twig no almacene en caché nada en absoluto.

Ten en cuenta que en la mayoría de los casos es probable que desees desactivar también Render caché API. Si no lo haces tendrás que vaciar la caché antes de ver los cambios en el archivo twig porque cuando el Render API utiliza el template asociado a twig para generar el HTML y luego almacena en caché el código HTML generado y la plantilla Twig no se utiliza en las páginas subsecuentes.

Como habilitar la depuracion con la consola de Drupal 8

drupal site:mode dev

Este comando cambiara la siguiente configuracion dentro del archivo sites/default/services.yml de tu instalacion de drupal 8.

twig.config: { debug: true, auto_reload: true, cache: false }

Al ejecutar el comando deberias poder ver algo similar a esto:


Como habiliar la depuracion manual

  1. Busca el archivo services.yml de tu sitio, probablemente situado en sites/default/services.yml
  2. Si services.yml aún no existe; copia default.services.yml y cambiale el nombre a services.yml.
  3. Edite el archivo services.yml y activar una o más de las opciones de depuración se definen a continuación.
  4. Reconstruye la caché.
Localiza los parámetros twig.config en tu services.yml y hacer los siguientes cambios:

parameters:
  twig.config:
    debug: true

Opciones de depuracion de twig

debug: true
Cuando debug esta en true:
  • El macado de cada plantilla Twig está rodeado de comentarios HTML que contienen información del tema, como sugerencias de nombres de archivos de plantilla.
  • Ten en cuenta que esta depuración de marcado hará pruebas automatizadas que comprueban directamente la renderizacion del HTML. Al ejecutar pruebas automatizadas, 'twig_debug' se debe establecer en FALSE.
  • La función dump () se puede utilizar en plantillas Twig para obtener información acerca de las variables de la plantilla.
  • Los templates Twig se vuelven a compilar automáticamente cada vez que el código fuente cambia.
  • No se recomienda en entornos de producción (por defecto: false).

Twig auto-reload

auto_reload: true
  • Recompila automáticamente las plantillas Twig cada vez que el código fuente cambia. Si no proporcionas un valor para twig_auto_reload, se determina con base al valor de twig_debug.
  • No se recomienda en entornos de producción (por defecto: null).

Twig cache

cache: false
  • Por defecto, las plantillas Twig se compilan y almacenan en el sistema de archivos para aumentar el rendimiento. Deshabilitar la caché en Twig será recompilar las plantillas desde el codigo fuente cada vez que se utilizan. En la mayoría de los casos la configuracion twig_auto_reload debe estar habilitada en lugar de deshabilitar la caché de twig.
  • No se recomienda en entornos de producción (por defecto: true).
 Drupal render cache

De forma predeterminada, Drupal almacena en caché cualquier renderizacion que realiza para bloques y entidades, para acelerar la carga de páginas subsiguientes. Esto significa que los cambios a plantillas twig para estos no tendrán efecto inmediatamente. La configuración render caché utilizar la caché Null back-end desactiva efectivamente esto.

Para desactivar la caché de render, descomentar las siguientes líneas de la parte inferior de settings.php, copie sitios / example.settings.local.php a los sitios / default / settings.local.php, y claro los cachés de Drupal: