Installare il tema Mercury per Drupal CMS 2.0

· Principiante · Theming

Mercury non si usa come tema contrib e non si estende con un sub-theme classico. Questa guida mostra come clonarlo con lo starter kit di Drupal core, abilitarlo e avviare il processo di build Tailwind CSS per iniziare lo sviluppo.

Mercury non è un tema da installare e dimenticare. È un punto di partenza: un tema Tailwind CSS con componenti SDC (Single Directory Components) già strutturati, pensato per essere copiato e modificato. La sua architettura è utile indipendentemente da Canvas, perché offre una base componentizzata già integrata con Drupal 11. Questo tutorial parte da zero e arriva a un tema funzionante con il processo di build attivo.

Installazione di Mercury via Composer

composer require drupal/mercury

Mercury deve essere presente in web/themes/contrib/mercury perché il passo successivo, la generazione del tema, lo usa come starterkit. Non va abilitato direttamente: serve solo come sorgente.

Generazione del tema custom

cd web
php core/scripts/drupal generate-theme my_theme \   --name="My Theme" \   --description="Tema custom basato su Mercury." \   --starterkit=mercury

Il comando crea web/themes/my_theme con la struttura completa di Mercury: file .info.yml, package.json, sorgenti Tailwind, componenti SDC e template Twig. Da questo momento il tema è indipendente: gli aggiornamenti futuri di drupal/mercury non lo toccheranno.

Una volta generato, il pacchetto contrib può essere rimosso:

composer remove drupal/mercury

Abilitazione in Drupal

drush theme:enable my_theme -y
drush config:set system.theme default my_theme -y
drush cr

Setup del processo di build

Entrare nella directory del tema e installare le dipendenze Node:

cd my_theme
npm install

Mercury include un package.json con gli script di build già configurati per Tailwind CSS e PostCSS. Per verificare quali script sono disponibili prima di lanciare qualsiasi comando:

npm run

L'output mostra l'elenco degli script definiti nel package.json del tema generato. In genere si trovano uno script per lo sviluppo con watch e uno per la build di produzione. Per avviare il processo di sviluppo:

npm run dev

Tailwind compila i sorgenti CSS e rimane in ascolto delle modifiche ai file Twig e ai componenti SDC. Ogni cambiamento nei template viene ricompilato automaticamente.

Struttura da conoscere

Il tema generato segue la convenzione SDC di Drupal: ogni componente vive in una directory autonoma dentro components/, con il proprio file .component.yml, il template Twig e i file CSS o JS. Modificare un componente significa lavorare solo su quella directory, senza toccare il resto del tema.

I file CSS sorgente si trovano in src/ e vengono compilati nella directory css/ o dist/ a seconda della configurazione del package.json generato. Non modificare i file compilati direttamente: qualsiasi npm run dev successivo li sovrascriverà.