tema personalizado

Gutenberg | Módulo Drupal

webmaster — Wed, 19 Apr 2023 14:33:36 +0000

Gutenberg | Módulo Drupal

Aunque en mi opinión, una de las cosas que me enamoró de Drupal en cuanto lo conocí, es la posibilidad de manipular, personalizar y saber encontrar, prácticamente dónde y cuando ocurren la mayoría de sus funcionalidades, entiendo que el objetivo principal de cualquier herramienta de desarrollo, debería ser facilitarnos la vida, además de ofrecernos grandes posibilidades a nuestro alcance.

Como cada proyecto requiere de diferentes requisitos para llevarse a cabo, y por lo general, uno de los más importantes, es el tiempo que tendremos que invertir hasta su puesta en producción, muchos desarrolladores web prefieren apostar por otros CMS o construir desde cero proyectos enteros, para sentir que tienen mayor control sobre sus creaciones.

No obstante, creo que con un pequeño conocimiento sobre cómo instalar Drupal 9 usando Composer y un breve vistazo a cómo gestionar usuarios y permisos, complementado con la ayuda del Módulo Gutenberg, conocido mayormente por usuarios de Wordpress, podrías llegar a tener lo que haz estado buscando hace tiempo, una plataforma simple de manipular, pero potente, con posibilidad de adaptación a la mayoría de webs sencillas.

Es por esta razón que a continuación, te voy a mostrar cómo puedes utilizar las opciones que integra este módulo a la interfaz de usuario, facilitándote de forma notable, la creación de nuevos contenidos en Drupal 9.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

Descarga:

1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/gutenberg

2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Gutenberg y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.

Activación:

1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en gutenberg -y

2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

Cómo utilizar Gutenberg

Una vez activado el Módulo Gutenberg, veremos que se ha añadido una nueva opción, en la parte inferior izquierda de todos los contenidos, llamada Gutenberg Experience y que al activarla podremos ver dos listados con todos los nuevos bloques, tanto del propio módulo como de el núcleo de Drupal, que podremos activar o no, para que estén disponibles como parte de las opciones del tipo de contenido en que se han activado, modificando inmediatamente la interfaz de creación de dicho contenido.

La idea principal de Gutenberg, es que convierte todos los elementos que podamos añadir, en bloques individuales, con sus propias opciones, disponibles en el momento en que seleccionamos dicho bloque o elemento, haciéndolo mucho más gráfico el método para añadir, modificar o reutilizar dicho elemento.

Para comenzar a añadir contenidos o "Bloques" en nuestro tipo de contenido, veremos un símbolo de más dentro de un círculo y al hacer clic sobre éste, se desplegarán las diferentes opciones disponibles para agregar y una vez seleccionado el elemento que deseamos añadir y se añade, inmediatamente cambiará el panel de la derecha de la pantalla, adaptándose a las opciones disponibles para él.

De entre sus opciones más llamativas, está la posibilidad de arrastrar directamente los elementos hasta la posición deseada desde el escritorio de tu ordenador, la integración con módulos como Media o Imagen, insertar directamente elementos embebidos como vídeos, sonidos, etc, o la posibilidad de crear "Bloques" de contenido reutilizables en cualquier otro lugar de la web.

El objetivo de utilizar Gutenberg, es que todos tus tipos de contenido, sólo tengan el campo "Body" y dentro de este campo se podrán añadir, editar o eliminar el resto de elementos que se mostrará en tus páginas, incluyendo imágenes o incluso bloques del núcleo de Drupal.

Gutenberg Cloud

Una de las opciones más novedosas de este módulo, es la posibilidad de añadir "bloques" de contenido, directamente desde su repositorio en la web Gutenbergcloud.org, mediante el sistema de CDN, por lo que dichos bloques, con características, estilos y funcionalidades prediseñados, no se guardan como el resto de contenidos en la base de datos de Drupal. Por el contrario, se añaden como etiquetas dentro del campo "BODY", que añade Drupal por defecto cada vez que creamos un nuevo tipo de contenido.

Para añadir esta funcionalidad, sólo habría que activarla como cualquier otro módulo y una vez hecho esto, se añadirá como una de las opciones disponibles para agregar en el listado de bloques cuando hagamos clic en el selector.

Por desgracia, esta funcionalidad no es compatible para todas las versiones de Drupal 9, por lo menos al momento de escribir este artículo. Pero sí podrás utilizarla en cualquier instalación de Drupal 8 o menor que la 9.1.

webmaster Mié, 19/04/2023 - 16:33

Radix | Descarga, instalación y configuración

webmaster — Mon, 06 Mar 2023 21:30:44 +0000

Radix | Descarga, instalación y configuración webmaster Lun, 06/03/2023 - 22:30

A pesar de que sigue cobrando fuerza la tendencia de utilizar Drupal Desacoplado o Headless, ya que permite implementar soluciones con Javascript, que amplian las posibilidades para el Frontend o apariencia en tus proyectos, además de ofrecer otras ventajas, como la carga de tus contenidos. Existen otras posibilidades, que nos permitirán desarrollar toda clase de proyectos, con las mismas prestaciones y sin salir de Drupal tal y está concebido.

Una de estas soluciones, la encontraremos en el tema Base conocido como Radix, cuya implementación permite integrar dentro de su estructura, la posiblidad de utilizar diferentes versiones de Bootstrap, Sass, ES6 y BrowserSync; lo cual permite a los maquetadores, conseguir el mismo resultado y beneficios, que si aplicaran un enfoque Desacoplado.

CÓMO INSTALAR RADIX EN DRUPAL

PRERREQUISITOS

Al igual que otros temas Base, utilizando en Drupal, que incluyen funcionalidades extra, en el caso de Radix, necesitaremos tener instalado en nuestro servidor, Node.js y Npm, para completar la configuración del Subtheme.

Por esta razón, utilizaremos Lando, para facilitar este proceso, de esta manera, sólo tendremos que concentrarnos en el resto de requisitos, descritos en su página oficial.

Si todavía no conoces Lando, y quieres saber cómo se instala, Haz clic aquí

Una vez instalado lando, puedes crear la carpeta donde instalarás tu proyecto de Drupal, y a continuación, añadir el archivo de configuración .lando.yml, con el siguiente contenido, adapatándolo a los detalles de tu proyecto:

name: drupal9
recipe: drupal9
config:
  webroot: web
  php: '8.0'

proxy:
  appserver:
    - drupal9.lndo.site

services:
  node:
    type: node
  drupal9:
    type: mariadb
    portforward: true
    creds:
      user: drupal9
      password: drupal9
      database: drupal9

tooling:
  npm:
    service: node
  node:
    service: node
  gulp:
    service: node
  yarn:
    service: node

Si lo prefieres, también puedes realizar la instalación con el tipo de servidor que tengas instalado, tomando en cuenta que deberás tener instalado Node.js y NPM.

INCOMPATIBLE CON DRUSH 11:

Es muy importante, que antes de comenzar con el proceso de generación de un Subtema, a partir de Radix, tomes en cuenta, de que no será posible si tu versión de Drush es mayor de 10, ya que a día de hoy, todavía no es compatible con Drush 11.

Así que en nuestro caso, nos aseguraremos de instalar la versión de drush anterior a la 11, para ello, utilizaremos el siguiente comando de composer:

lando composer require drush/drush:10.*

CÓMO GENERAR UN SUBTEMA CON RADIX

Para poder generar un tema personalizado, tomando como base Radix, tendremos que seguir lo siguientes pasos:

DESCARGAR Y ACTIVAR EL MÓDULO COMPONENTES! DE DRUPAL:

lando composer require drupal/components

lando drush en components

DESCARGAR Y ACTIVAR EL THEME RADIX (PARA TENER DISPONIBLE SUS COMANDOS)
```
lando composer require drupal/radix
```
```
lando drush then radix
```
GENERAR EL SUBTEMA:

Para esto, necesitaremos especificar la ubicación de nuestro tema Radix, dentro del comando drush, o nos devolverá un error de "comandos no disponibles".
Si hemos instalado Drupal usando Composer, la ubicación será "web/themes/contrib"; el comando a utilizar es el siguiente:
```
lando drush --include="web/themes/contrib/radix" radix:create SUBTHEME_NAME
```
ACTIVAR Y CONFIGURAR EL SUBTEMA:

Ahora que se ha generado el nuevo Subtema, podremos activarlo como predeterminado y realizar algunos cambios de configuración, a nivel de la interfaz y ejecutar algunos comandos por consola para que terminen de descargarse y activarse otros elementos del Subtema.

CONFIGURACIONES EXTRAS EN EL SUBTEMA

Una vez hayamos activado nuestro tema, notaremos que todavía faltan algunos ajustes, para que todo se vea aproximadamente parecido a lo que esperamos. A continuación te detallo estos últimos pasos necesarios para poner correctamente en marcha tu nuevo subtema:

Redistribución de Bloques
Siempre que instalamos un nuevo Tema o Subtema, Drupal cambia las posiciones de sus bloques, adaptándolos a la configuración del tema, por lo tanto, si queremos que todo funcione correctamente, tendremos que dirigirnos a la página de administración de los bloques, en la url "estructura/bloques" y recolocar todos los elementos, dentro de las zonas correspondientes:
Deshabilitar la combinación de archivos CSS y JS
Durante el proceso de desarrollo, siempre se recomienda que desativemos la opción que nos viene por defecto en Drupal, que combina los archivos CSS y JS, cuyo propósito es reducir el tiempo de carga de nuestra web y así incrementar su velocidad.
Para encontrar esta opción, nos iremos a la url "/admin/config/development/performance", y desmarcaremos ambos check, al menos mientras estemos en nuestro entorno de desarrollo.
Configuración del BrowserSync
Esta opción nos permitirá comprobar en tiempo real, todos los cambios que vayamos añadiendo a nuestro tema, en lo que se respecta a los estilos css.
Para habilitar esta opción, tendremos que editar el archivo proxy.js, dentro de "subtema/config".

Una vez actualizada la variable, dentro del archivo proxy.js, ejecutaremos el siguiente comando para que empiece a funcionar el proceso de sincronización:
```
npm run watch
```

Categoria

Activar tema por defecto utilizando Consola y Drush en Drupal

webmaster — Wed, 01 Mar 2023 09:13:58 +0000

Activar tema por defecto utilizando Consola y Drush en Drupal

Descripción

Aunque puedes utilizar la interfaz de usuario de Drupal para activar y configurar tus temas, también podrás hacerlo mediante la consola, gracias a la herramienta Drush.

webmaster Mié, 01/03/2023 - 10:13

Instrucciones

Para activar un tema usando la consola y Drush, sigue estos pasos:

Utilizando la consola, colócate en la carpeta principal de tu proyecto Drupal.
Descarga el tema que quieres utilizar por defecto
Ejectua el comando de activación y configuración para que sea el tema por defecto.

drush config-set system.theme default Subtheme_name -y

Paginador

Categoría

Portada

Crear tema personalizado Drupal 8/9 con Bootstrap Barrio

webmaster — Wed, 01 Mar 2023 07:50:09 +0000

Crear tema personalizado Drupal 8/9 con Bootstrap Barrio

Descripción

Con esta instalación podrás crear un theme personalizado, usando como base Bootstrap Barrio, con todas las opciones responsive necesarias para hacer rápidamente un diseño rápido y efectivo.

webmaster Mié, 01/03/2023 - 08:50

Instrucciones

Para crear un tema personalizado en Drupal 8/9 usando Bootstrap Barrio:

Descarga Bootrap Barrio usando Composer

$ composer require drupal/bootstrap_barrio
Crea una carpeta en Themes/custom para poner allí tu theme personalizado
Dentro de Themes/Custom crear un archivo llamado "create_subtheme.sh", luego copia y pega dentro los datos de la ventana código que tienes más abajo cambiando la línea señalada *bootstrap_barrio_subtheme.* con el nombre del subtheme que vas a crear
Abre la consola y colócate dentro de la carpeta Theme/custom y ejecuta el siguiente comando
./create_subtheme.sh
Actualiza el nombre del Subtheme recién creado en el archivo ".info.yml"

Ver video de explicación

Visita la página oficial del módulo

cd themes/custom
export CUSTOM_BARRIO=custom_barrio # change this to your custom theme_name
cp -r ../contrib/bootstrap_barrio/subtheme $CUSTOM_BARRIO
cd $CUSTOM_BARRIO
for file in *bootstrap_barrio_subtheme.*; do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done
for file in config/*/*bootstrap_barrio_subtheme.*; do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done
mv {_,}$CUSTOM_BARRIO.theme
mv {_,}$CUSTOM_BARRIO.layouts.yml
grep -Rl bootstrap_barrio_subtheme .|xargs sed -i '' -e "s/bootstrap_barrio_subtheme/$CUSTOM_BARRIO/"

Paginador

Categoría

Portada

Imagen Background usando Views Template

webmaster — Tue, 28 Feb 2023 19:58:09 +0000

Imagen Background usando Views Template

Descripción

Este código permite imprimir una imagen de fondo utilizando vistas y plantillas mediante la declaración de una variable.

webmaster Mar, 28/02/2023 - 20:58

Instrucciones

Añadimos el campo imagen a nuestro contenido antes de crear la vista.
Creamos una vista del tipo "Fields o Campos" y añadimos los campos que deseamos mostrar.
Copiamos la plantilla "views-view-fields.html.twig" desde el módulo views y lo copiamos en las plantillas de nuestro tema personalizado
Creamos la estructura con los divs donde queremos poner nuestra imagen de fondo
Configuramos la vista para que muestre la URL de la imagen
En el template o plantilla declaramos una variable con nuestro campo imagen y luego podremos imprimir nuestro background.

{# Declaramos una variable y le asignamos el valor del campo sin etiquietas adicioales #}

{% set background_image = fields.yourimage_field.content|striptags|trim %}

<div style="background-image:url({{ background_image }});">
     <p>Nuestro contenido</>
</div>

Paginador

Categoría

Portada

Mostrar bloque vista usando Preprocess Function Drupal 8/9

webmaster — Tue, 28 Feb 2023 19:41:28 +0000

Mostrar bloque vista usando Preprocess Function Drupal 8/9

Descripción

Este código te permitirá mostrar una vista tipo bloque en un nodo o paragraphs

Para Nodos:
/** * Implements hook_preprocess_node() for node.html.twig. */
function TUSUBTHEME_preprocess_node(array &$variables) {
$variables['nombre_variable_para_mostrar'] = views_embed_view('nombre_maquina', 'nombre_vista_dentro');

}

Para Paragraphs

/* Implement hook_preprocess_paragraph() */
function wct_oct2020_preprocess_paragraph(&$variables) {
$variables['nombre_variable_para_mostrar'] = views_embed_view('nombre_maquina', 'nombre_vista_dentro');

}

webmaster Mar, 28/02/2023 - 20:41

Instrucciones

Para mostrar una vista tipo bloque en usando Preprocess Function:

Abre el archivo TUSUBTHEME.theme para añadir las Preprocess function según necesites, copia el código que está debajo dependiendo de si la usarás para presentarla en un nodo o en un elemento Paragraphs.
Crea una plantilla para el tipo de contenido donde quieres mostrar la vista, conoce el nombre para la plantilla activando el modo depurador.
Añade la el nombre de la variable en la plantilla, en el lugar donde quieres imprimir la vista:

{{ nombre_variable_para_mostrar }}
Refrescar cache


/** * Implements hook_preprocess_node() for node.html.twig. */
function TUSUBTHEME_preprocess_node(array &$variables) {
  $variables['nombre_variable_para_mostrar'] = views_embed_view('nombre_maquina', 'nombre_vista_dentro');

}

/* Implement hook_preprocess_paragraph() */
function wct_oct2020_preprocess_paragraph(&$variables) {
  $variables['nombre_variable_para_mostrar'] = views_embed_view('nombre_maquina', 'nombre_vista_dentro');

}

Paginador

Categoría

Portada

Habilitar node ID dentro de la etiqueta Drupal

webmaster — Tue, 28 Feb 2023 19:21:39 +0000

Habilitar node ID dentro de la etiqueta <body> Drupal webmaster Mar, 28/02/2023 - 20:21

Instrucciones

PARA HABILITAR LAS CLASES DEL NODE DENTRO DE LA ETIQUETA <BODY>, SIGUE LOS SIGUIENTES PASOS:

Abrir el archivo .THEME dentro de tu tema personalizado y agregar las siguientes líneas, actualizando el nombre correspondiente al de tu SUBTHEME
Borra el caché de Drupal.Puedes hacerlo por medio de la interfaz o ejecutando el comando:
```
drush cr
```
Confirmar que ahora puedes ver el id dentro de la etiqueta <body> de tus contenidos:

/**
 * Implements hook_preprocess_HOOK().
 *
 */
function SUBTHEME_preprocess_html(&$variables) {
  $path = \Drupal::service('path.current')->getPath();
  $path_args = explode('/', $path);
  if (isset($path_args[1]) && isset($path_args[2]) && ($path_args[1] == 'node') && (is_numeric($path_args[2]))) {
    $variables['attributes']['class'][] = 'page-node-' . $path_args[2];
  }
}

Paginador

Categoría

Portada

Cómo Agregar classes a tu plantilla Twig en Drupal 9

webmaster — Sun, 26 Feb 2023 15:40:38 +0000

Cómo Agregar classes a tu plantilla Twig en Drupal 9 webmaster Dom, 26/02/2023 - 16:40

Con la incorporación de las plantillas Twig a partir de Drupal 8, se facilita notablemente el trabajo de maquetación con CSS, teniendo la oportunidad de añadir o eliminar clases de forma dinámica o algunas específicas para ciertos contenidos o campos, dependiendo de nuestras necesidades. Por defecto, la plantilla node.html.twig, incluye clases específicas para cada tipo de contenido, facilitando bastante el trabajo del maquetador.

Ahora voy contarte algunas formas disponibles para que puedas trabajar con las clases, en tus plantillas de Drupal 8 o 9 y que puedas explorar las nuevas opciones con las que podrías reducir posibles dolores de cabeza, al momento de implementar algunas soluciones, que antes eran mucho más complejas de aplicar.

AÑADIR UNA CLASE SIMPLE

Imagina el caso de tener un campo tipo Select en que quieras cambiar el color, dependiendo de si el usuario ha elegido un valor u otro o que necesitas una clase específica para diferenciar entre dos campos que se mostrará en varios contenidos, pero no tienes una plantilla específica para el tipo de contenido en cuestión. Estos son sólo dos ejemplos en los que podrías necesitar de añadir una clase simple.

Para esto, sólo tendrás que pasar como argumento el nombre de la clase en la función attributes.addClass().

<div {{ attributes.addClass('classname') }}> </div>

AÑADIENDO VARIAS CLASES AL MISMO TIEMPO

Otro caso con el que nos podemos encontrar, es el de añadir múltiples clases a un campo en concreto y remover alguna de ellas dependiendo del resultado que queremos obtener, por ejemplo si queremos aplicar algún efecto con javascript.

En este caso, crearemos un array con los nombres de todas las clases que vamos a utilizar, para crear un Array en Twig escribiremos la etiqueta "set" y luego el nombre del array, si abres cualquiera de las plantillas de Drupal, veras esta clase de estructura justo al final de los comentarios.

{% set classes = [ 'content', 'node', 'custom', ] %}

Para añadir estas clases al campo, lo que tendremos que agregar es el nombre del array como argumento en la función attributes.addClass()

<div {{ attributes.addClass(classes) }}> </div>

Siempre que se añadan clases a un elemento de cualquiera de las formas anteriores, estas se fusionarán con las demás clases existentes.

ELIMINAR CLASES DINÁMICAMENTE

Como mencionamos al principio, puede que además de añadir clases, nos haga falta eliminar una o varias existentes para obtener un resultado específico. La forma en que podemos hacerlo en Twig es añadiendo el nombre de la clase a la función attributes.removeClass().

<div {{ attributes.addClass(classes).removeClass('node') }}> </div>

DOS EJEMPLOS REALES QUE PODRÁS EXPLORAR EN TU INSTALACIÓN DE DRUPAL 9

Si abres, en tu editor de texto favorito, la carpeta donde se guardan las plantillas del tema Classy "core/themes/classy/templates", verás dos claros ejemplos sobre lo que explicábamos al principio de este artículo.

EJEMPLO DE CLASE SIMPLE

Si abres la plantilla ubicada en "field/time.html.twig", verás que se ha añadido la clase datetime en el elemento time

<time{{ attributes.addClass('datetime') }}></time>

EJEMPLO DE MÚLTIPLES CLASES

Si abres la plantilla ubicada en "layout/region.html.twig", podrás ver un ejemplo real de cómo añadir varias clases utilizando un array en Twig.

{% set classes = [ 'region', 'region-' ~ region|clean_class, ] %}

Como habrás notado, en este último ejemplo exites dos clases, una simple llamada "region", per en la segunda vemos varios elementos adicionales:>

'region-': es una variables simple tipo sting
~ este es un operador de Twig, que sirve para concatenar strings
region: la variable region. Ésta será reemplazada por la región actual(ej.: block)
|: Un pipe que separará las variables (region) de un filtro (clean_class)
clean_class: un filtro que, en este caso removerá los caracteres no validos de las clases HTML

Si tienes un block en la región Header, entonces, según el código anterior, se añadirrá la clase llamada region-header.

<div class="region region-header">

CLASE NODE

El último de los ejemplos es la clase que se añade al elemento artículo en la plantilla node.html.twig, varás otro ejemplo de cómo añadir clases múltiples en la plantilla ubicada en "content/node.html.twig"

{% set classes = [ 'node', 'node--type-' ~ node.bundle|clean_class, node.isPromoted() ? 'node--promoted', node.isSticky() ? 'node--sticky', not node.isPublished() ? 'node--unpublished', view_mode ? 'node--view-mode-' ~ view_mode|clean_class, ] %}

Como mencioné al comenzar este artículo, la plantilla node.html.twig añade dinámicamente clases específicas para cada tipo de contenido, facilitando la aplicación de estilos notablemente, este comportamiento está definido en la línea:

'node--type-' ~ node.bundle|clean_class,

Un tipo de contenido es un tipo de paquete en Drupal. Entonces node.bundle devolverá el nombre de la máquina del tipo de contenido. Al igual que en el ejemplo de campo, esto se pasa a través del filtro clean_class.

Una muestra clara de este comportamiento, podemos comprobarlo si estamos viendo un nodo del tipo artículo, si ejecutamos el explorador del navegador con la tecla F12, e inspeccionamos el código html, veremos que la clase añadida al artículo es:

node--type-article

En el Array de clases anterior, también podemos ver una serie de condiciones que verifican si algo existe antes de añadir las clases:

node.isPromoted() ? 'node--promoted',

Esta línea comprueba si hemos dejado seleccionada la opción que nos viene por defecto, para promocionar el contenido en la página principal, y si es el caso, entonces añade la clase node--promoted

not node.isPublished() ? 'node--unpublished',

Esta línea comprueba si nuestro contenido está o no publicado, si no es así entonces le añade la clase node--unpublished

Echa un vistazo al video para que veas ejemplos de cómo trabajar con twig

Categoría

Cómo convertir cualquier plantilla en una web Drupal 9

webmaster — Sun, 26 Feb 2023 15:11:57 +0000

Cómo convertir cualquier plantilla en una web Drupal 9 webmaster Dom, 26/02/2023 - 16:11

Aunque casi siempre, crear una web desde cero podría convertirse en algo mucho más complicado de lo que nos imaginábamos, en realidad, uno de los mayores inconvenientes con el que solemos encontrarnos, es la falta de documentación relacionada sobre nuestras opciones, que nos sirva de introducción o nos facilite el planteamiento del proyecto, para tomar la mejor decisión antes de empezarlo o para tener una idea aproximada del tiempo, herramientas, pros y contras con el que posiblemente nos encontremos al hacerlo.

En mi opinión, Drupal debería ser la primera opción a considerar para realizar cualquier tipo de desarrollo, tanto si se trata de una web sencilla o compleja, como de una aplicación móvil; ya que, entre otras cosas, realizar una instalación de Drupal 8 o Drupal 9, es bastante sencillo, y una vez lo pongamos en marcha, tendremos una interfaz fácil e intuitiva gestión de usuarios y permisos, o la posibilidad de crear un diseño totalmente personalizado con Bootstrap Haz clic aquí.

Hoy te quiero enseñar cómo crear una web completamente funcional con Drupal 9, partiendo de una Plantilla gratuita desarrollada con Boostrap Haz clic aquí y algunos módulos adicionales que facilitarán todavía más el proceso de creación de tu proyecto, como son
Paragraphs

Pathauto

Backup and Migrate

Admin Toolbar

Requisitos

Paso 1 Instalación del Servidor Local:

Lo primero que necesitarás es un servidor con Apache, Php, Mysql donde puedas instalar Drupal 9, en nuestro caso hemos decidido utilizar un Servidor Docker local con Wsl2 en Windows Haz clic aquí, pero si lo prefieres, puedes usar un Servidor local Xampp, con las modificaciones específicas para que tu Drupal funcione correctamente mHaz clic aquí.

Paso 2 Instalación de Drupal 9:

Ahora que ya hemos instalado el servidor local y lo tenemos funcionando a toda velocidad, pasamos a la instalación de Drupal, tienes dos opciones a elegir:

Opción A: Instalar Drupal utilizando Composer (La forma recomendada a partir de Drupal 8)

Opción B: Instalar Drupal Descargándolo el archivo desde la página oficial

Paso 3 Selección de la plantilla:

Desde la aparición de Bootstrap, existen varias webs que ofrecen plantillas gratuitas para instalar en nuestros proyectos, en este artículo te dejo dos que conozco ( bootstrapmade.com) y ( startbootstrap.com), pero puedes buscar en Google la que prefieras, lo importante es que cumpla con los requisitos que deseas para tu proyecto, así que una vez hayas seleccionado la que más te guste, la descargarás en tu ordenador y una vez descomprimido los archivos, comenzaremos a trabajar con su adaptación a nuestro desarrollo.

Paso 4 Instalar un subtema basado en Bootstrap:

Como hemos dicho antes, vamos a utilizar plantillas diseñadas utilizando Bootstrap, por lo que lo lógico en esta parte será Instalar el Tema Bootstrap para Drupal y a continuación crear un Subtheme partiendo de Bootstrap como modelo Haz clic aquí.

Paso 5 Análisis:

Este es uno de los momentos más importantes, porque ahora ya tenemos el Drupal 9 funcionando, con un tema personalizado basado en Bootstrap, pero sin ningún tipo de contenido específico.

A partir de este momento es cuándo tendremos que elegir los elementos que vamos a implementar de nuestra plantilla y en función de esto, decidiremos qué tipos de contenido vamos a necesitar y cómo tendremos que crearlos para que funcionen de acuerdo a la plantilla original.

En Drupal tendremos disponibles varias "Plantillas" con las cuáles podremos modificar la estructura y presentación de todos los elementos de nuestra web, por ejemplo, si queremos modificar solamente nuestra página principal (Inicio o Home), tendremos que copiar la plantilla "page.html.twig" y renombrarla a "page--front.html.twig", de esta forma, todos los cambios que apliquemos a la plantilla de la página principal, no afectarán al resto de páginas de la web.

Yo suelo crear un tipo de contenido "Página Inicio" o "Página principal" y luego sólo añado un campo tipo Paragrahs al que llamo "Contenidos" y así podré añadir posteriormente todos los bloques tipo paragraphs y modificar el orden según las necesidades del proyecto.

Pero ¿cómo sabremos el nombre de las plantillas que queremos para modificar, por ejemplo, un bloque o un elemento tipo Paragraphs?, en este caso, tendremos que activar el modo depurador o debug, para que podamos conocer los nombre de las plantillas. El procedimiento es bastante sencillo, una vez hayamos creado un tipo de contenido, con el modo depurador podremos copiar la plantilla original y renombrarla para que afecte sólo al contenido correspondiente.

Ejemplo práctico: Si en nuestra plantilla tenemos un área en la que se muestran nuestros servicios o productos destacados.

Entonces tendríamos que crear, primero, un tipo de contenido "Servicio" con los campos correspondientes (Nombre del servicio, Descripción, Icono)

- Nombre del servicio (Campo Título)

- Descripción del servicio: (Tipo Texto sin formato)

- Icono del servicio (Tipo Texto sin formato)

y después utilizando el módulo Paragraphs, crearíamos un bloque llamado, por ejemplo " Area o Bloque Servicios", con dos campos, "Título del bloque" y "Servicios", de esta forma podremos usar una plantilla para el el bloque y otra para reescribir todos los servicios con una misma plantilla.

En nuestra plantilla tipo Paragrarphs, donde colocaremos el listado de servicios, según este diseño, tendríamos tres campos diferentes:

- Super título del bloque (Tipo Texto sin formato)

- Título del bloque (Tipo Texto sin formato)

- Servicios (Tipo referencia a contenidos: Servicio)

Un último apunte:

Generalmente cuando encuentres alguna plantilla de este tipo, los archivos estarán agrupados en carpetas, a veces divididos los de javascripts y los de css, pero otras veces no. Para que tu proyecto sea más fácil de mantener, te recomiendo que dividas siempre en carpetas separadas para que sea más fácil corregir fallos o añadir más funcionalidades.

Como hemos partido de utilizar un Subtheme basado en Bootstrap, verás lo sencillo que resultará añadir nuevas librerías, desde las carpetas de la plantilla que haz descargado hasta las equivalentes dentro del Subtheme en tu Drupal.

Categoría