Drupal 8 Theme erstellen

Eine Einführung wie man ein Drupal 8 Theme mit Twig erstellt.

Im neuen Drupal 8 hat sich nun für den Themer einiges geändert. Vieles ist meiner Meinung nach leichter und logischer geworden. Es ist nun möglich viel mehr auf Template-Ebene zu machen. So gibt es zum Beispiel viele Template Dateien die vom Core bereitgestellt werden, damit ist es recht einfach Mark-up zu ändern. 

Die größte Neuerung dürfe der Umstieg auf Twig sein. Twig ist eine text-basierende Template Sprache und sowohl für Designer als auch Developer gedacht. Die drei Wesentlichen Features sind: Schnell (Twig kompiliert die Templates in optimierten PHP-Code), Sicher (Twig hat einen Sandbox-Modus), Flexibel (Entwickler haben die Möglichkeit eigene Tags und Filter hinzuzufügen)

Mehr über Twig für Themen ist hier zu finden: http://twig.sensiolabs.org/doc/templates.html

Und für Developer: http://twig.sensiolabs.org/doc/api.html

Drupal 8 Theme mit Twig

In Drupal 8 liegt nun alles in der ersten Dateiebene das Bedeutet dein Theme liegt nicht mehr in sites/all/themes/meintheme sondern direkt in  themes/meintheme

Ein Drupal 8 Theme braucht folgende Dateien um zu funktionieren: meintheme.info.yml meintheme.libraries.yml

 

name: meintheme
description: 'Mein neues Drupal 8 Theme' 
base theme: stable
type: theme
core: 8.x

regions:
  header: Kopf der Website
  content: Inhalt 
  footer: Fuss der Webseite

libraries:
  - meintheme/global-css
  - meintheme/global-js

 

Wichtig ist das man hier ein Base Theme angeben sollte. Es stehen im Moment zwei zur Verfügung „stable“ und „classy“. „stable“ ist wie der Name schon sagt ein Theme das nur wesentliche Funktionen enthält „classy“ hingegen ist etwas umfangreicher. 

regions: Die regions sind ähnlich wie bei Drupal 7 zuerst steht der  „machinename“ dann der „lesbare Name“. Die Region „content“ muss zwingend vorhanden sein da sonst nichts angezeigt wird.

libraries: hier werden die CSS und Javascript Dateien global eingebunden, d.h. diese werden immer und auf jeder Seite geladen. Wie man Bibliotheken nur auf bestimmten Seiten lädt wird später erklärt.

Die Datei meintheme.libraries.yml wird folgendermaßen aufgebaut:

 

global-css:
  css:
    theme:
      css/styles.css: {}

global-js:
  js:
	js/basic.js: {}


specific-js:
	js:
	js/mein-specific.js
dependencies:
- core/jquery

 

Hier sind insgesamt drei Bibliotheken definiert: global-css, global-js und specific-js. Die Erste beiden werden global in der meintheme.info.yml eingebunden siehe oben:

libraries:
  - meintheme/global-css
  - meintheme/global-js

Die dritte specific-js ist vorhanden wird aber noch nicht eingebunden. Diese Datei enthält auch eine Abhängigkeit zu jQuery. Mit dem oben beschrieben Setup wird also Jquery nicht global geladen sondern nur wenn die specific-js aufgerufen wird.

Da mir es sehr gefällt das man in Drupal 8 viel leichter direkt mit den Templates arbeiten kann möchte ich die specific-js direkt dort aufrufen. Dies ist Möglich in allen Dateien die mit .html.twig enden. Und der Aufruf erfolgt so:

{{ attach_library('meintheme/specific-js') }}

 

Das war eine kleine Einführung wie man ein Drupal 8 Theme erstellt.

Neuen Kommentar schreiben

Kommentare

Fr, 2017-10-20 14:19 – to who belongs this free number // Aw, this was an extremely

Aw, this was an extremely good post. Taking the time
and actual effort to create a top notch article… but what
can I say… I put things off a whole lot and never seem to get nearly anything done.

Di, 2017-11-28 13:07 – Emmapage // Mit TemplateToaster eigene

Mit TemplateToaster eigene WordPress Themes erstellen

Di, 2018-10-30 15:11 – james // this reminds me of that hello

this reminds me of that hello world which every programmer gets to do once in life anyways good blog and knowledgeable.

Di, 2018-10-30 15:12 – james // this reminds me of that hello

this reminds me of that hello world which every programmer gets to do once in life anyways good blog and knowledgeable. check my peice of work https://logoventures.com.au/