Drupal Template Helper para Drupal 8

Enviado por keopx el Lun, 03/07/2017 - 15:02

Drupal Template Helper sirve para destacar las plantillas twig sugeridas en cada caso y el preprocess a utilizar.

Esta herramienta es muy cómoda y sencilla de utilizar, facilita muchísimo el poder encontrar las plantillas que son necesarias para cada caso y saber ademas que las esta utilizando.

Recordad que es necesario limpiar la cache tras añadir una nueva plantilla para que Drupal sea capaz de reconocer dicho fichero.

Este post es únicamente un traducción de la documentación oficial: https://github.com/arshad/drupal-template-helper

Drupal Template Helper

Es una extensión de Chrome DevTools para las plantillas de Drupal 8, Drupal 7 y Backdrop CMS: https://chrome.google.com/webstore/detail/ppiceaegogijpjodfpiimifhbnaifbnn

drupal-template-helper

Instalación

PASO 1: InstalAR Y configurAR.
  1. Descargue e instale la extensión Drupal Template Helper para Chrome.
  2. Haga clic en el icono de la extensión.
  3. Haga clic en Opciones bajo Drupal Template Helper.
  4. Agregue las URL de los sitios para habilitar la extensión. Ejemplo: http://drupal.dev, http://www.drupal.dev.
  5. Guardar.
PASO 2: HABILITAR LA API EXPERIMENTAL DEL CHROME.
  1. Ve a chrome://flags/#enable-devtools-experiments, busca Experimental Extension APIs y Developer Tools experiments, hacer click en "Enable" enlaces, y reinicia Chrome.
  2. Abrir DevTools y hacer click en Settings.
  3. Busca en la pestaña Experiments y activa Allow custom UI themes. Ver la siguiente captura. No olvides reiniciar nuevamente Chrome.

drupal-template-devtools-theme-ui

Nota: Si desea ocultar los comentarios de Twig, desactive Show HTML comments en Preferences.

drupal-template-devtools-preferences

PASO 3: HABILITAR EL TEMA DEBUG

Uso

Inspeccionar un elemento usando DevTools y haciendo click sobre Templates en la barra de DevTools.

Añadir nuevo comentario

El contenido de este campo se mantiene privado y no se mostrará públicamente.

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.