lunes, 10 de octubre de 2016

Como crear multisites en Drupal 8

Drupal 8 nos proporciona la capacidad de ejecutar múltiples sitios desde una única instancia del core de Drupal. Esta característica se conoce como multisite o multisitio.

Cada sitio tendrá una base de datos independiente, pero los archivos que se encuentren guardados en la carpeta modules, profiles y themes serán compartidas entre todos los sitios pertenecientes a la red multisitios. Esto es una gran ventaja a la hora de hacer nuevas instalaciones de Drupal y de actualizar los módulos o themes que tengamos en la red.

Por supuesto, también tenemos la posibilidad de incluir algunos módulos y themes que solo se encontrarán disponibles para un sitio en concreto. Con lo cual, si necesitamos una característica especial pero solo para uno de los sitios, no necesitamos "ensuciar" las demás instalaciones que tenemos bajo la red multisite.

¿Qué necesitas para trabajar con multisites?


A la hora de trabajar con multisitios es necesario crear un host virtual para cada dominio. No voy a mostrar todo el proceso para crear un virtual host, ya que la forma de crearlo es diferente si estas usando Apache o Nginx. Aparte pfff hay miles de tutoriales que te lo explican al detalle.

Importante: Todos los hosts virtuales deben apuntar a la carpeta del sitio base. Básicamente donde se encuentra el index.php. Drupal se encarga de mapear los dominios de manera automática.

En este tutorial vamos a usar 2 subdominios: site1.drupal.dev y site2.drupal.dev. Obviamente también es posible usar dominios como por ejemplo: drupal1.dev y drupal2.dev, el proceso es el mismo.

¡Manos a la obra!


Lo primero que debes hace es dirigirte a la carpeta sites. Dentro de dicha carpeta encontramos un archivo llamado example.sites.php y debemos renombrarlo a sites.php

Dentro de sites debemos crear una carpeta con el nombre de dominio que tendrá cada sitio de la red mutisite. En mi caso voy a crear 2 carpetas con los nombres site1.drupal.dev y site2.drupal.dev.

Ahora copiamos el archivo sites/default/default.settings.php dentro de las 2 carpetas que acabamos de crear y lo renombramos como settings.php.

Ya puedes visitar el primer subdominio site1.drupal.dev y realizar todo el proceso de instalación.

Importante: Debes crear una nueva base de datos para cada sitio de la red multisitio. Por ejemplo, yo cree una base de datos con el nombre site1drupaldev y otra site2drupaldev.




Si en estos momentos nos dirigimos al segundo sitio site2.drupal.dev, deberíamos poder realizar la instalación del segundo sitio.



De esta misma forma podemos agregar la cantidad de sitio que deseemos o que soporte el servidor jeje.

Módulos y Themes específicos.


Además de los instalados en los "módulos" estándar y directorios "temas", cada sitio puede tener sus propios módulos y temas específicos.

Para que un sitio tenga módulos o temas específicos, basta con crear una carpeta "modules" y "themes" dentro del directorio de configuración del sitio. Por ejemplo, si site1.drupal.dev requiere un tema personalizado y un módulo que no debe ser accesible a otros sitios, la configuración se vería así:

sites/site1.drupal.dev/settings.php 
sites/site1.drupal.dev/themes/custom_theme 
sites/site1.drupal.dev/modules/custom_module


¿Cómo funciona este sistema de mutisite en Drupal 8?


El archivo sites.php es que realiza todo el trabajo y por lo general no es necesario modificar su contenido. La tarea de sites.php es mapear los diferentes alias de URL a una carpeta especifica. En el mismo archivo podemos encontrar la documentación necesaria para modificar su comportamiento.

¿Es seguro usar multisites?


Hay que tener en cuenta que el código PHP que se ejecuta bajo la instalación de un sitio de la red puede llegar a afectar a otros sitios que compartan el mismo core.

Si bien en Drupal 8 se eliminó la posibilidad de ejecutar código PHP desde la interface de administración del sitio con el módulo PHP Filter, existen algunas formas de poder ejecutar codigo php desde la interface. De hecho, el módulo PHP Filter se encuentra como un módulo contribuido y se puede instalar como cualquier otro.

Bueno espero que el post te haya ayudado a usar multisitios con Drupal 8.

¡Nos vemos la próxima!

Leer más

domingo, 9 de octubre de 2016

Cómo configurar el editor de contenido del Drupal 8

Gracias a la colaboración entre las comunidades de Drupal 8 y CKEditor hoy podemos tener uno de los mejores editores que he visto para nuestro CMS. Si bien podemos integrar diferentes editores, yo creo que la mejor opción es trabajar con CKEditor, porque es muy probable que vaya a funcionar bien en todos los casos.

En Drupal 8 podemos crear diferentes formatos de texto, añadiendo o quitando características a CKEditor. En una instalación estándar de Drupal encontramos algunos formatos que ya están configurados con diferentes opciones.

En este artículo vamos a crear un nuevo formato de texto con una configuración personalizada para CKEditor.

Configurar CKEdior en Drupal 8


Antes de comenzar asegúrate de que tienes el módulo CKEditor habilitado.

Para poder agregar un nuevo formato de texto dirígete a Configuración > Autoría del Contenido. En esta sección puedes observar que ya existen cuatro formatos de texto definidos.

Haz clic en el botón Añadir formato de texto para comenzar a crear un nuevo formato.


En esta sección ya comenzamos a configurar nuestro formato de texto. Como te darás cuenta tenemos un montón de opciones.

Primero ingresa un nombre para el formato de texto.

Luego tenemos que seleccionar que roles podrán usar este tipo de formato, esto permite tener control sobre que usuarios pueden usar este formato cuando creen contenido.

Ahora, en la lista desplegable “Editores de Texto” selecciona CKEditor. En este momento aparece todas las características que nos brinda CKEditor.

Sólo tienes que ir arrastrando y soltando los diferentes ítems desde la sección “botones disponibles” hacia la barra de herramientas activas.


Una de las opciones más importante que debemos configurar son los filtros. Aquí debemos tener mucho cuidado sobre que opciones vamos a elegir. Sobre todo, tienes que testear que los filtros funcionen correctamente.

Todos los filtros están muy bien explicados, sólo debes seleccionar los que desees habilitar.

Existen algunos filtros que tienen opciones de configuración, las cuales puedes ver en opciones de filtros una vez que hayas activado el filtro.

Recuerda que debes ir testeando los filtros y sus opciones, ya que si se encuentran mal configurados podrías tener fallos de seguridad muy divertidos.

El módulo Filter


Cuando agregamos datos a un campo que soporta formatos de texto, los datos son guardados como fueron ingresados originalmente. Los filtros habilitados para este formato de texto no serán aplicados hasta que el contenido sea renderizado. Drupal trabaja de una forma donde el contenido es guardado tal cual fue escrito y sólo se aplican los filtros cuando se muestran al usuario.

Con el módulo Filter habilitado tenemos la posibilidad de especificar como el texto es renderizado en base a los diferentes roles de usuarios que crean dicho texto. Éstos muy importante, por ejemplo, si tu seleccionas de la opción Display any HTML as plain text, todo el formato que le demos al texto en el editor WYSIWYG será eliminado cuando el texto se muestre al usuario.

CKEditor plugins


El módulo CKEditor proporciona un plugin llamado CKEditorPlugin. Los plugins son pequeñas piezas que agregan funcionalidad a Drupal 8.

Por ejemplo, la capacidad de agregar imágenes y links están definidas por plugins dentro del módulo CKEditor. 

Hay infinidad de cosas a saber sobre los distintos formatos de texto y las diferentes posibilidades que nos brinda Drupal 8 para trabajar con ellos. 

Si quieres saber y profundizar más en el tema puedes visitar los siguientes links:





Leer más

viernes, 7 de octubre de 2016

Agregar y Editar contenidos en Drupal 8

La principal funcionalidad de un administrador de contenidos es permitir agregar, editar y organizar el contenido. Drupal proporciona un formulario central que te permite manejar todo el contenido de tu sitio y crear un nuevo contenido.

También, mientras observas una pieza de contenido tienes la posibilidad de editar dicho contenido al mismo tiempo que lo estás viendo.

Agregando, editando y organizando el contenido en Drupal 8


Dirígete a la sección “Contenido” del Drupal y haz clic en Agregar contenido para ver una lista con todos los tipos de contenidos disponibles. Selecciona “Artículo” como el tipo de contenido que vamos a crear.

Como puedes ver, el título es requerido para este tipo de contenido, así que escribe un título para este artículo. Además, escribe algo de texto en el cuerpo del artículo.



Haciendo clic en el desplegable con el nombre “Formato de texto” podemos personalizar el tipo de texto que es permitido.

En este tipo de contenido específicamente, podemos introducir algunas etiquetas separadas por coma para categorizar el contenido. Además, podemos seleccionar una imagen destacada para el artículo e incluso introducir el contenido de la etiqueta Alt.

En el menú de opciones que se encuentra a la derecha del editor, haz clic en opciones de ruta URL e ingresa una URL personalizada para el artículo. Recuerda que el alias de URL debe comenzar con una barra inclinada hacia la derecha “ / ”.

Una vez que hayas completado en el artículo, haz clic en “guardar y publicar” al final del formulario. Entonces serás redirigído al artículo que acabas de publicar para poder ver el resultado final.

Guardar un contenido como borrador


En Drupal 8 tenemos la posibilidad de guardar una pieza de contenido como borrador en vez de publicarla directamente. En lugar de hacer clic en “guardar y publicar”, haz clic en la flechita que se encuentra a la derecha del botón para que se muestre la opción de “guardar sin publicar


Generar las URLs automáticamente.


Tenemos la posibilidad de usar un módulo llamado Pathauto que simplifica el proceso de creación de alias de URLs. Nos permite definir un patrón que automáticamente crea la URL de un contenido. 

Pathauto utilizar tokens para brindar la posibilidad de crear rutas muy complejas.

Aquí puedes encontrar este módulo: https://www.drupal.org/project/pathauto

Haciendo cambios masivos en el contenido


También tenemos la posibilidad de realizar acciones masivas sobre contenido. A la izquierda de cada columna en la lista con todos los contenidos de nuestro sitio se muestra un checkbox. En cada contenido seleccionado podemos realizar cambios masivos que encontraremos bajo la lista desplegable con nombre “Con selección”.

También podemos filtrar el contenido que se mostrará en la lista aplicando diferentes tipos de filtros.


Edición en línea con Drupal 8


Una característica proporcionada en Drupal 8 es la capacidad de editar el contenido en línea. Esta opción está habilitada por defecto con la instalación estándar de Drupal y la podemos utilizar gracias al módulo Quick Edit.

Este módulo permite editar campos iguales mientras vemos una pieza de contenido y está totalmente integrado con el editor WYSIWYG.

Echemos un vistazo a esta nueva funcionalidad:

Visita el artículo que hemos creado anteriormente. Para habilitar la edición en línea, debes hacer clic en el botón Editar que se encuentra en la esquina superior de la barra de administración.

Esto mostrará un lápiz en todos los elementos que podemos editar. Haz clic en el lápiz que se muestra encima del contenido y luego haz clic en Edición rápida.


Ahora tenemos la posibilidad de editar el texto con una versión mínima de CKEditor.

Realiza algún cambio en el texto, en mi caso puse algo de texto en negrita, luego guarda los cambios y estos serán guardados inmediatamente.

Esta forma editar el contenido es una maravilla, puede llegar a ahorrar mucho tiempo cuando estás revisando contenidos antiguos en un sitio.


Es todo por este post, espero que te haya sido útil y hasta la próxima!
Leer más

miércoles, 7 de septiembre de 2016

El módulo Kint para Drupal 8 es Genial


Antes de seguir desarrollando nuestro tema, quiero hablarte sobre el módulo Kint que se encuentra integrado dentro del módulo Devel.

  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

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.



Una vez que tenemos el módulo instalado, debemos colocar la etiqueta {{ kint() }} dentro de html.html.twig justo debajo de la etiqueta {{ page_top }}.

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.

Aquí podemos ver que, como estamos en la home del sitio, drupal nos indica que podríamos crear un archivo con el nombre page--front.html.twig para personalizar únicamente la home del sitio.

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!!!
Leer más

lunes, 5 de septiembre de 2016

Corregimos dos errores del Tema

Hola mi querido amigo, como has estado tanto tiempo! =D

Este será un post medio raro y corto (por suerte) en el que vamos a retocar rápidamente ciertas partes del theme y a corregir algunos "errores" que tiene actualmente.

Te cuento, resulta que estaba por continuar la serie hablando de algunas herramientas que nos van a facilitar la tarea a la hora de trabajar en el theme, pero... tal como se encuentra en estos momentos estaba complicado continuar.

  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


Abracadabra que aparezca la barra


No se si te habrás dado cuenta que la barra de administración desapareció, siendo demasiado complicado alternar entre la parte de administración y el theme en cuestión.

Cuando ya comenzaba a frustrarme porque no podía lograr que la querida barra de administración apareciera, en un momento de iluminación divina me dije a mí mismo: si estás heredando del tema classy, porque no buscas en la carpeta de dicho tema a ver si encuentras alguna pista.

PAM! Ahí estaba... un sospechoso archivo llamado toolbar.html.twig, copio y pego el archivo en mi tema y la barra seguía sin aparecer -.-

Recuerdas en el capitulo anterior que borramos la etiqueta {{ page_top }} que se encontraba dentro de html.html.twig porque yo te dije que no lo íbamos a necesitar? jeje

Bueno ese es el primer error que corregiremos en este articulo. Solo ve a html.html.twig y sitúa la etiqueta {{ page_top }} justo encima de {{ page }} y la barra aparece.

No es necesario copiar el archivo toolbar.html.twig ya que como estamos heredando del theme classy ya lo tenemos disponible por defecto.

Si llegaste aquí por el simple y llano problema que no te aparecia la barra y además no estas heredando del theme classy, el archivo se encuentra precisamente en: core -> themes -> classy -> templates -> navigation.



Estas son las cosas donde hay que seguir todo el hilo conductor para poder resolver el problema. A medida que ganes experiencia con Drupal esto va a ser cuestión de segundos.

Corrección del color en los items de la barra


Con la aparición de la preciada barra de administración me doy cuenta que todos los links se muestran de color blanco y no se pueden leer los diferentes items del menú. Esto se debe a que en la hoja de estilos tenemos configurados que todos los elementos de un menú se muestre de color blanco.

Solo vamos a eliminar el color blanco de los enlaces de menú, luego veremos como podremos cambiar el color del menú agregando clases CSS personalizadas en el HTML.

Dentro de syle.css busca este fragmento y borra la linea color.

li.menu-item a {
 color: #fff;
 font-size: 16px;
 text-decoration: none;
}

Y por aquí lo dejamos al post, en el próximo capitulo veremos como podemos utilizar algunas herramientas que nos serán de mucha ayuda en el desarrollo del tema.

Hasta la Próxima! Suerte!
Leer más

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!!
Leer más

lunes, 18 de abril de 2016

Trabajar con librerías, regiones y bloques en Drupal 8

En este capítulo vamos a comenzar a trabajar con Regiones y Bloques para definir la estructura del sitio. Luego incluiremos en el theme los archivos css y javascript para poder dar estilos e interactividad al tema.

Í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

Bloques y Regiones en Drupal 8


Los temas en Drupal 8 se dividen en Regiones y a su vez estas regiones contendrán diferentes bloques. Esto posibilita que los temas estén bien ordenados y sea muy fácil trabajar en ellos.


Para ver las regiones y bloques que tenemos dentro de un tema, podemos dirigirnos a Estructura >> Diseño de bloques. Aquí encontraremos todas las regiones con sus respectivos bloques.

Para ver las regiones directamente dentro del tema podemos hacer click en Mostrar regiones de Bloque. Como nuestro tema hereda de classy entonces también se heredan las regiones y los bloques de dicho tema. También nos daremos cuenta que las regiones aparecen una debajo de la otra ya que todavía no agregamos estilos. 

Definir las regiones del tema


Para definir las regiones del tema, abre el archivo poxi.info.yml que hemos creado en el capítulo anterior. Recuerdo que poxi es el nombre del tema que estoy creando y tu deberías cambiarlo con el nombre del tuyo. 

En este archivo añadimos las siguientes líneas:

regions:
  header: "Header"
  social: "Social Buttons"
  primary_menu: "Nav Menu"
  breadcrumb: "Breadcrumb"
  content: "Content"
  sidebar_first: "Sidebar"
  footer: "Footer"

Aquí definimos algunas regiones en nuestro tema, tu puedes añadir todas las regiones que necesites. 

Importante: Si declaras una región en el tema, aunque sólo sea una, todas las regiones predeterminadas ya no se aplicarán y tienes que declarar todas las regiones explícitamente.

Bien, vamos a borrar la cache para poder ver los cambios y luego nos dirigimos nuevamente a Estructura >> Diseño de Bloques para comprobar que las regiones fueron creadas con éxito.

De esta manera tan simple podemos agregar regiones y bloques al tema.

Agregar archivos CSS y JavaScript al tema


Dentro del directorio de nuestro tema creamos dos carpetas, un con el nombre css y otra llamada js, donde ubicaremos nuestros archivos .css y .js respectivamente.

Dentro de la carpeta css creamos un archivo con el nombre style.css y dentro de la carpeta js creamos un archivo llamado main.js.

Contenido del archivo style.css:
body{
  background: silver;
}

Contenido del archivo main.js:
alert("Cargando javascript en Drupal 8");

También dentro de la raíz del tema creamos un archivo llamado poxi.libraries.yml donde definiremos las librerías que serán utilizadas por nuestro tema.

Pega las siguientes líneas en él:
base:
  version: 1.x
  css:
    theme:
      css/style.css: { weight: -9 }
  js:
    js/main.js: { weight: -900, minified: true }
    dependencies:
      - core/jquery

Como puedes observar indicamos que se carguen los archivos css y js que creamos anteriormente. También indicamos un peso para modificar el orden en que serán cargados. En el caso del archivo javascript, indicamos que lo comprima y que va a tener como dependencia a jquery que se encuentra disponible dentro del core de Drupal 8.

Ahora que ya tenemos las librerías definidas, necesitamos vincularlas a nuestro tema que como ya sabes está definido por el archivo poxi.info.yml

Al final de dicho archivo y agregamos las siguientes líneas:
libraries:
  - poxi/base

Ahora si vaciamos la cache y recargamos el home del sitio, podremos ver que tenemos un color de fondo gris y muestra una alerta con el mensaje “Cargando javascript en Drupal 8”.



Bueno es suficiente por este capítulo, en el siguiente vamos a comenzar con los templates twig donde definiremos la parte visual del tema, que por cierto bastante feo está por ahora =D.

Y sabes cualquier duda puedes hacérmela saber en los comentarios y con gusto te doy una mano. ¡Saludos!
Leer más