jueves, 26 de mayo de 2016

Introducción a los templates en Drupal

Es hora de comenzar a trabajar en las plantillas del sitio. Definiremos como se mostrarán las diferentes partes del sitio utilizando diferentes plantillas.


Índice:
  1. Crear un tema para Drupal 8 desde cero
  2. Trabajar con librerías, regiones y bloques en Drupal 8
  3. Introducción a los templates en Drupal 8
  4. Corregimos dos errores del Tema
  5. El módulo Kint para Drupal 8 es Genial

Drupal 8 debe saber cómo encontrar una plantilla para que pueda mostrar correctamente un tipo de contenido, una región, un bloque, etc. Para ello, Drupal usa los nombres de los archivos que actúan como plantilla, echemos un vistazo al convenio de nombres que utiliza Drupal para mostrar los diferentes elementos que existen en un sitio web.

Para los templates vamos a utilizar Twig, un motor de plantillas muy potente y ha tomado mucha fuerza en los últimos años. Recuerda que dentro de una plantilla nunca deberíamos escribir código PHP, porque es muuy feo =D



Themes Hooks en Drupal 8


Los themes hooks le indican a drupal que template utilizar para mostrar un determinado elemento en el sitio. Esto lo hace mediante el nombre del archivo. Veamos ...

  1. html.html.twig
  2. html--node--id.html.twig
  3. html--internalviewpath.html.twig

Como puedes imaginar en el archivo html.html.twig se encuentra todo el html base del sitio, como por ejemplo los tags de apertura y cierre de html, el head y el body.

Luego tenemos el archivo html--node--id.html.twig donde podríamos poner un código HTML diferente para un nodo especifico.

Por último encontramos html--internalviewpath.html.twig donde trabajaríamos el HTML para una vista.

El convenio que se sigue es: primero indicamos el tipo base del template (en este caso html) y luego separado por dos guiones medios -- podemos ser más específicos en el tipo de elemento donde se mostrará el HTML.

En este caso solo se suele utilizar el html.html.twig, pero veamos que sucede con los templates de las páginas, donde se comienza a ver la potencia del sistema de templates que tiene Drupal 8.

Layouts para las paginas:

  1. page.html.twig
  2. page--front.html.twig
  3. page--node.html.twig
  4. page--node--1.html.twig
  5. page--node--edit.html.twig
Como ves, primero podemos definir un template para todas las páginas, segundo podríamos definir un template para la página home, tercero podemos definir el template de un nodo, cuarto definimos un nodo en concreto y por ultimo definimos el template que se muestra a la hora de editar un nodo.

¿Ves la potencia que tiene esta forma de organizar un tema?

Bueno lo mismo se puede hacer con las regiones, bloques, taxonomías y todo lo que forma parte del núcleo de Drupal 8. Como son muchas las cosas que se pueden personalizar y me tomaría mucho tiempo en describir cada una, pero puedes pasar por la documentación oficial sobre la convención de nombres para templates.

Comenzamos la creación de los templates para Drupal 8


Primero crea una carpeta dentro del directorio del tema con el nombre templates. Es aquí donde colocaremos todos los archivos que van a ser utilizados como plantillas.

Podríamos crear todas las plantillas desde cero, pero ya que en capítulos anteriores hemos heredado del tema classy, vamos a copiar algunas de sus plantillas y modificar las partes que creamos necesarias. De esta manera ahorramos bastante tiempo en escribir todas las plantillas desde cero y seremos más productivos.

Dirígete al directorio core/themes/classy/templates/layout y copia los archivos html.html.twig y page.html.twig, ahora pega estos archivos dentro de la carpeta templates de nuestro theme.

Para simplificar las cosas borramos las secciones twig {{ page_top }}{{ page_bottom }} de la plantilla html.html.twig, dejando solo la etiqueta {{ page }} que contendrá toda la estructura que se muestra en el body de nuestro sitio. Esta estructura estará definida precisamente en la plantilla page.html.twig.

Comenzando a trabajar dentro de page.html.twig, podemos ver que se cargan diferentes regiones que son utilizadas por el tema classy. Como nosotros ya tenemos definidas otras regiones, vamos a eliminar las que no necesitamos y agregar las que si necesitamos.

Elimina las siguientes regiones:

  • {{ page.secondary_menu }}
  • {{ page.highlighted }}
  • {{ page.help }}

Y como tenemos un solo sidebar también elimina el siguiente condicional:

{% if page.sidebar_second %}
      <aside class="layout-sidebar-second" role="complementary">
        {{ page.sidebar_second }}
      </aside>
{% endif %}

Por último agregamos la región {{ page.social }} debajo de {{ page.header }}.

Estas son todas las regiones que tendrá nuestro tema, pero ahora vamos a maquetarlas un poquito para que se vean más ordenadas.

Movemos la región {{ page.breadcrumb }} justo encima de {{ page.content }}.

La región {{ page.primary_menu }} la situamos encima del div <div class="layout-content">.

Aquí te dejo el template page.html.twig completo ;-)

<div class="layout-container">

<header role="banner">
    {{ page.header }}
    {{ page.social }}
  </header>
  <main role="main">
    <a href="https://www.blogger.com/null" id="main-content" tabindex="-1"></a>
    {# link is in html.html.twig #}
 
    {{ page.primary_menu }}
 
    <div class="layout-content">
{{ page.breadcrumb }}
      {{ page.content }}
    </div>
{# /.layout-content #}

    {% if page.sidebar_first %}
      <aside class="layout-sidebar-first" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}

  </main>

  {% if page.footer %}
    <footer role="contentinfo">
      {{ page.footer }}
    </footer>
  {% endif %}

</div>{# /.layout-container #}



También en la hoja de estilos copia el siguiente CSS:

body{
  background: #68C3EF;
}
.layout-container {
 background: #fff;
 margin: 40px auto;
 max-width: 1100px;
 box-shadow: 0px 0px 20px #0F303F;
}
.region-header {
 padding: 20px;
}
.site-name a{
 color: #039BE5;
 font-size: 32px;
 font-weight: bold;
 text-decoration: none;
}
ul.menu {
 background: #039BE5;
 padding: 20px;
 margin-left: 0 !important;
}
li.menu-item a {
 color: #fff;
 font-size: 16px;
 text-decoration: none;
}
.is-active {
 color: #fff !important;
}
.layout-content {
 width: 66.6%;
 display: inline-block;
 min-height: 450px;
}
aside.layout-sidebar-first {
 width: 32.3%;
 display: inline-block;
}
.region-content {
 margin: 20px;
}
#block-poxi-powered {
 padding: 20px;
}
#edit-keys, #edit-submit {
 padding: 10px;
}
Bueno, por aquí lo voy a dejar, yo sé que hay mejores maneras de trabajar los temas. Podríamos trabajar con sass y gulp para no tener que recargar continuamente la página y existen muchas herramientas más. Pero quiero que los tutoriales sean muy básicos ya que drupal de por si es algo complejo.

Hasta la próxima DrupaLover!!