Antes de seguir desarrollando nuestro tema, quiero hablarte sobre el módulo Kint que se encuentra integrado dentro del módulo Devel.
- Crear un tema para Drupal 8 desde cero
- Trabajar con librerías, regiones y bloques en Drupal 8
- Introducción a los templates en Drupal 8
- Corregimos dos errores del Tema
- El módulo Kint para Drupal 8 es Genial
Este módulo te va a permitir que puedas seguir investigando cosas por tu cuenta y no dependas solamente de lo que hagamos en esta serie de tutoriales. En el mundo real, cuando estés desarrollando sobre Drupal, los sitios seguramente tendrán diferentes requerimientos y vas a tener que resolverlos tú solo como un verdadero pro.
Kint nos da la posibilidad de identificar qué variables tenemos disponibles dentro de una plantilla concreta. Porque resulta que las variables que están disponibles dentro del template html.html.twig no son las mismas que tendrás disponible dentro de page.html.twig ni serán las mismas que tendrás en otro tipo de templates.
Otro problema con el que nos encontraremos, es identificar cuál es el nombre que debemos darle a un archivo para personalizar una página o un elemento especifico.
Nos ponemos prácticos y vemos cómo funciona todo esto...
Instalar el módulo Devel y Kint
Para comenzar sólo debes instalar el módulo Devel como lo harías con cualquier otro. Al momento de activarlo recuerda que también debes activar el sub módulo Kint.
Con lo que aparecerá una barra en la parte superior del tema. Estas son todas las variables que recibimos desde el backend para poder trabajar con ellas.
Si haces click en el icono + se desplegarán todas las variables y arrays, mostrando un listado gigantesco que te dejará mareado jaja. Lo que debes hacer es ir desplegando de a poco para poder ir viendo las variables de nivel superior y luego sus "hijos" hasta encontrar lo que necesitas.
Esto lo logramos haciendo click en alguna parte de la "barrita" no en el +.
Bien, de esta manera podemos ver todas las variables que tenemos disponibles en html.html.twig. Pero lo que más nos interesa ahora es saber que tenemos disponible dentro del archivo page.html.twig.
Entonces simplemente movemos el tag {{ kint() }} dentro de page.html.twig, lo que mostrara todas las variables de este template concreto. De la misma manera puedes poner {{ kint() }} dentro del template que se te ocurra y te mostrará todas las variables que puedes usar dentro de dicho template. ¿Te das cuenta la potencia de este módulo?
La cosa no termina acá, también podemos pasar parámetros para ir navegando de manera más precisa sobre los arrays.
Imagina que solo quieres ver las variables que se encuentran dentro del contenido de la página que estas actual. Solo basta con especificar la "ruta" hacia la variable que quieres inspeccionar de la siguiente manera.
{{ kint(page.content) }}
Con los solo se mostrarían todas las variables que se encuentran dentro del contenido de la página en cuestión.
De la misma manera podemos ir filtrando las variables que queremos tener a la mano en cada templeate. Por ejemplo, en un tipo de contenido personalizado vamos a necesitar conocer campos que no vamos a tener en otro tipo de contenido diferente.
Muy Importante! A la hora de ir navegando por todos los valores hay que tener en cuenta que estamos hablando de Arrays.
Con lo cual debes conocer la sintaxis para poder acceder a cada valor en el gigantesco array. Esto no es más que PHP de toda la vida y puedes aprender más en la documentación de PHP.
Todo esto seguramente va a tener más sentido a medida que lo utilicemos mientras avancemos en el desarrollo del theme. Pero creo que es importante hacer esta introducción para que vallas familiarizándote con el módulo.
Buscar rápidamente un valor con Search Kint
Ahora quiero presentarte el módulo Search Kint que nos permite buscar valores dentro de todo el array que nos muestra Kint de una manera mucho más rápida y cómoda.
Una vez que lo instales y actives veras como encima del "menú" que nos muestra Kint aparece un campo para buscar valores que se encuentren dentro de él.
Esto hace que sea todavía más fácil buscar valores de variables dentro de Drupal.
¡Qué grande Drupal 8! Dioooos =D
Encontrando los nombres de archivos recomendados por Drupal 8
Por último, para encontrar cuales son los nombres de los archivos que podemos usar para ir personalizando diferentes partes de un theme, vamos a utilizar el apartado theme_hook_suggestions que se encuentra dentro de todas las variables que nos muestra Kint.
Por ejemplo, si dentro de page.html.twig utilizamos el tag {{ kint(theme_hook_suggestions) }} vemos como drupal nos da recomendaciones en cuanto al nombre de los archivos que podríamos usar para ir personalizando el theme.
Solo aclarar que los guiones bajos que se muestran en Kint (page__front) deben ser reemplazados por guiones medios en el nombre del archivo para que Drupal los pueda reconocer.
Ahora veamos que sucede si nos dirigimos a la sección de usuario en el sitio.
A diferencia de lo que se mostraba antes, ahora Drupal nos sugiere que utilicemos page--user.html.twig para personalizar la sección de usuarios. Pero además nos indica que incluso podríamos personalizar dicha sección solo para el usuario que tiene el id 1 (el id que indiquemos), que en este caso es el administrador del sitio.
La verdad que el módulo Kint está buenísimo y nos da muchas pistas imprescindibles a la hora de desarrollar themes en Drupal 8.
Eso va a ser todo por este artículo, ya seguiremos utilizando lo aprendido para poder avanzar con el tema que estamos desarrollando.
Espero que te haya gustado el post... Hasta la próxima Amigo!!!
