2022
Drupal

Drupal

Datum: Januar 2022
Lesedauer: 16 Minuten


Seit Beginn dieses Jahres habe ich mich mit Drupal auseinandergesetzt. In diesem Blogpost erkläre ich die Drupal Grundlagen.

Über Drupal

drupal-logo

Drupal ist ein sogenanntes "web content management system". Es wurde in PHP geschrieben und untersteht der GNU-Lizenz. Drupal ist also eine freie Software.
Die Nutzung ist gratis und der Quellcode öffentlich einsehbar.
Man verwendet ein solches CMS, um mithilfe von einfachen Bausteinen eine Webseite und deren Inhalt zu verwalten.

Links

RessourceURL
Dokumentationhttps://www.drupal.org/documentation (opens in a new tab)
Guideshttps://drupalize.me/guides (opens in a new tab)
Download/Installationhttps://drupal.org/download (opens in a new tab)
Wikipediahttps://en.wikipedia.org/wiki/Drupal (opens in a new tab)

Informationen

Entwickler: Drupal Gemeinschaft Grösse: 140 MB Sprachen: PHP, JS, CSS, HTML, YML, TWIG, SQL, ...

Versionen

Es ist empfehlenswert, immer die neuste Version zu verwenden. Denn ältere Veröffentlichungen sind als kritisch eingestuft und werden meist nicht mehr unterstützt.
Die aktuellen Versionen kann man auf der Drupal Seite (opens in a new tab) in Erfahrung bringen.

CMS

Wie schon erwähnt, ist Drupal ein CMS. Doch was ist ein CMS?
CMS steht für "Content.Management-System". Im Frontend werden dem User Daten dargestellt. Im Backend wiederum kann der Inhalt der Webseite verändert werden. Hier ein Beispiel:
Max Mustermann ist Besitzer eines Nachrichtenunternehmens und will jeden Tag Artikel veröffentlichen. Dazu kann er ein CMS nutzen. Seine Redakteure können, ohne Programmierkenntnisse, diese Medien erstellen.
Der Konsument sieht jedoch nur die Webseite und deren Inhalt.

Bei einem CMS unterscheidet man zwischen drei Arten.

cms-types

Coupled

Bei der traditionellen Variante sind das Backend und Frontend stark aneinander geknüpft. Der Inhalt wird im Backend erstellt, gespeichert und verwaltet. Das Frontend stellt dann diesen dar.

Hybrid

Das decoupled CMS ist eine Kombination der beiden anderen Varianten. Es gibt immer noch ein Frontend, welches die Seite darstellt. Jedoch stellt ein solches CMS auch eine API zur Verfügung, welche dann von einem Framework genutzt werden können.
Beispiel: Die Drupal Seite liefert über die API Daten, welche dann mit React Komponenten angezeigt werden.

Headless

Hier dient das Backend weiterhin als Datenspeicher. Es gibt aber kein Frontend. Die Daten sind über eine API erreichbar.

Nutzer

Hier habe ich drei Firmen zusammengetragen, die bekanntlich Drupal verwenden.

FirmaURLBild
Teslahttps://www.tesla.com/ (opens in a new tab)tesla
NCAAhttps://www.ncaa.com/ (opens in a new tab)ncaa
NASAhttps://www.nasa.gov/ (opens in a new tab)nasa

Alternativen

Um die Vor- und Nachteile von Drupal zu analysieren, schaute ich zuerst, welche Alternativlösungen es gibt.

LogoCMSBeschreibungWebseite
contaoContaoCantao ist kostenlos und für mittlere bis grosse Webseiten gedacht.https://contao.org/en/ (opens in a new tab)
redaxoRedaxoAufgrund der offenen Architektur kann Redaxo vielfältig eingesetzt werden. Das CMS eignet sich sowohl für kleine, als auch für grosse und komplexe Portale.https://redaxo.org/ (opens in a new tab)
wordpressWordpressDies ist wohl die bekannteste und beliebteste Variante. Wordpress stellt eine Plugin-Architektur und ein Template System zur Verfügung. Damit können Inhalte sehr schnell und kostengünstig veröffentlicht werden.https://wordpress.com/ (opens in a new tab)
joomlaJoomlaJoomla wirbt damit, dass keine Kenntnisse in Programmiersprachen vorausgesetzt sind.https://www.joomla.ch (opens in a new tab)
shopifyShopifyDer Name deutet schon darauf hin, dass dies ein Shop-System ist. Für einen Blog wäre dies als nicht die beste Wahl.https://www.shopify.de (opens in a new tab)
magentoMagentoAuch Magento gehört zu den Onlineshop Softwares.https://magento.com/de (opens in a new tab)
typo3TYPO3Hinter diesem Open Source System steht eine grosse Community. Das CMS ist gratis und skalierbar.https://typo3.org/ (opens in a new tab)
webflowWebflowDas amerikanische Unternehmen hebt sich durch die visuelle Online-Editor-Plattform ab.https://webflow.com (opens in a new tab)

Vorteile Drupal

VorteilBeschreibung
KonfigurierbarMit den Inhaltstypen von Drupal können individuelle Datenstrukturen schnell und einfach erstellt werden.
Verwaltung der KonfigurationDie komplette Konfiguration von Drupal kann über Konfigurationsdateien über alle Umgebungen hinweg synchronisiert werden. So wird sichergestellt, dass alle Systeme (Dev, Test, Staging, Prod) die gleiche Konfiguration haben.
FlexibelDrupal kann als gekoppeltes (serverseitig gerendertes), als headless CMS (entkoppelt, Datendrehscheibe) oder hybrid (progressiv gekoppelt) eingesetzt werden. Drupal verfolgt einen API-First-Ansatz und unterstützt mehrere Technologien wie REST oder GraphQL. Dies ermöglicht die Integration beliebiger Frontend-Lösungen.
DatenimportDrupal verfügt über ein leistungsfähiges Tool zum Importieren von Daten. Damit lassen sich Daten aus beliebigen Quellen einfach und automatisch importieren und aktualisieren.
SucheSuchmaschinen wie Solr oder Elasticsearch können einfach angebunden werden und ermöglichen eine schnelle und effiziente Suche.
Stabil, schnell & kompatibelDrupal ist ein stabiles System, verfügt über ein ausgeklügeltes Cache-System und kann andere externe Dienste, wie z. B. Redis Cache, leicht integrieren.
Verwaltung von BerechtigungenDrupal verfügt über ein starkes Berechtigungssystem, um Inhalte und Dateien vor anonymen Zugriffen zu schützen. Neben dem eigenen Authentifizierungsverfahren kann eine breite Palette von Authentifizierungsdiensten angebunden werden.
ErweiterbarTausende von Modulen von Drittanbietern sind auf drupal.org zur freien Verwendung verfügbar.
Drupal ist sicherEin engagiertes Sicherheitsteam sorgt für die Sicherheit und Stabilität von Drupal und seinen Drittanbieter-Modulen. Das Sicherheitsteam kümmert sich um gemeldete Sicherheitslücken und organisiert schnelle Sicherheitsupdates, damit die Probleme schnell behoben werden können. Mehr erfahren (opens in a new tab)
OpenSourceDrupal ist eine Open-Source-Software. Es fallen daher keine Lizenzgebühren an.
Grosse und aktive GemeinschaftDie Drupal-Community ist eine der grössten Open-Source-Communities der Welt. Mehr als 1 Mio. leidenschaftliche Entwickler, Designer, Trainer, Strategen, Koordinatoren, Redakteure und Sponsoren arbeiten zusammen.
Verlässliche RoadmapDie Weiterentwicklung von stabilen Drupal-Core-Releases wird im Voraus geplant und kommuniziert.
Bewährtes CMSDas CMS Drupal gibt es seit über 20 Jahren und wird weltweit für Millionen von Websites eingesetzt.

Nachteile Drupal

  • Teilweise sind gute Kenntnisse vorausgesetzt, damit man etwas anpassen kann
  • Für Anfänger kann es durch die vielen Funktionen zu komplex werden

Setup

https://www.drupal.org/docs/installing-drupal (opens in a new tab)

1 - Vorbereitung

MAMP

mamp

Um die Drupal Installation durchzuführen, wird ein Webserver und eine Datenbank benötigt.
Dafür kann man MAMP (opens in a new tab) installieren.

Composer

composer

Composer ist der Paketmanager für Php.
Dieser stellt sicher, dass alle Entwickler über die korrekten Pakete und Versionen verfügen.

Ob man ein Projekt generiert, Module und Themes installiert oder Pakete updatet. Composer erleichtert einem das Leben.

Installieren

Um Composer zu installieren, muss man folgende Kommandos ausführen.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') ===
'906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo
'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
sudo mv composer.phar /usr/local/bin/composer

Danach kann man den package manager in der Konsole mit vendor/bin/composer ausführen.

.bash_profile

Es kann etwas mühsam sein, wenn man immer den ganzen Pfad eingeben muss, um Composer zu verwenden. Um dies zu umgehen, kann man im folgende Zeile ins .bash_profile File einfügen.

.bash_profile
export PATH="$HOME/.composer/vendor/bin:$PATH"
Verwendung

Pakete können dann wie folgt installiert werden.

composer require --dev drupal/twig_xdebug

Es gibt Pakete, die einem beim Debuggen der App oder beim Durchführen von Tests helfen. Diese können mit --dev installiert werden. So wird definiert, dass diese nur lokal verwendet werden.

composer.json

In dieser Datei steht, welche Pakete installiert sind. So müssen die Pakete nicht alle auf Git geladen werden. Man lädt lediglich das composer.json hoch. Cloned nun jemand das Projekt, so kann er alle benötigten Pakete mit Composer installieren.

Die Version eines Paketes kann man auf verschiedene Arten angeben.

VersionBedeutung
1.2.3=1.2.3.0-stable
>1.2>1.2.0.0-stable
>=1.2>=1.2.0.0-dev
>=1.2-stable>=1.2.0.0-stable
<1.3<1.3.0.0-dev
<=1.3<=1.3.0.0-stable
1 - 2>=1.0.0.0-dev <3.0.0.0-dev
~1.3>=1.3.0.0-dev <2.0.0.0-dev
1.4.*>=1.4.0.0-dev <1.5.0.0-dev
composer.lock

Hier wird die genaue Version eines Paketes gespeichert.
Diese Datei wird automatisch erstellt, wenn man das erste Paket installiert.

Node

Wie man sieht, ist der Aufbau identisch mit Node.

ComposerNPM
composer.jsonpackage.json
composer.lockpackage.lock

2 - Datenbank erstellen

Nun muss man eine Datenbank erstellen.
Nachdem man MAMP gestartet hat, kann man dies in phpMyAdmin tun.

db

3 - Installieren

Ist man so weit vorbereitet, kann man Drupal im htdocs Ordner installieren.
Wie oben bereits beschrieben, kann man nun mit Composer das Projekt erstellen.

composer create-project drupal/recommended-project my_site_name_dir

Alternativ geht dies auch über den Download Link (opens in a new tab).

create

4 - Einrichten

Hat man das Projekt heruntergeladen, so kann man es über den Installer einrichten.
Dieser Installer ist erreichbar unter: http://localhost:/[port][pathFromHtdocsToProject]/web

lang

Bei der Datenbank ist es besonders wichtig, dass man die korrekten Daten angibt.
Diese findet man im phpMyAdmin.

server

db-config

Danach kann man die Installation abschliessen.

Zu diesem Zeitpunkt sollte die Startseite von Drupal sichtbar sein.

start

Ist man, mit dem soeben erstellten Benutzer, eingeloggt, sieht man eine Navigationsleiste. Mit dieser kann man Inhalt bereitstellen.

Wenn man nicht eingeloggt ist, sieht die Seite so aus.

auth

4 - MySql

Ein paar Befehle, welche ich später noch erläutere, setzen das mysql Paket voraus. Dies kann man mit Brew (opens in a new tab) herunterladen.

brew install mysql

Ich habe gemerkt, dass es standardmässig zu Problemen mit der DB kommen kann. Deshalb ist es empfehlenswert, eine kleine Anpassung im settings.php File vorzunehmen. Zeile 6: localhost 127.0.0.1

settings.php
$databases['default']['default'] = array (
	'database' => 'drupal9',
	'username' => 'root',
	'password' => 'root',
	'prefix' => '',
	'host' => '127.0.0.1',
	'port' => '8889',
	'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
	'driver' => 'mysql',
);
$settings['config_sync_directory'] = 'sites/default/files
/config_LZk745V7Vag6RroL6CpjgLBEjqVmJvjCtFiMMpITtLvF00Y-WWgPRXZ5VCO5hqBXK2UuPJ3b2w/sync';
 

5 - Konfigurieren

Um das volle Potenzial von Drupal zu nutzen, sollte man noch ein paar Dinge installieren und konfigurieren.

Admin Toolbar

Meiner Meinung nach sollt man dieses Modul verwenden. Es bietet zwei riesengrosse Vorteile bei der Entwicklung:

  • Die verschachtelten Links sind besser erreichbar
  • Der Cache kann schnell gelöscht werden

Die Toolbar (opens in a new tab) kann direkt mit Composer installiert werden.

composer require drupal/admin_toolbar

Es ist wichtig, dass man es danach auch noch aktiviert.

Drupal Console

Die Drupal Konsole (opens in a new tab) bietet nützliche Befehle.

composer require drupal/console:~1.0 \
--prefer-dist \
--optimize-autoloader \
--sort-packages \
--no-update
 
composer update

Eine Liste der Commands findet man hier: https://drupalconsole.com/docs/en/commands/ (opens in a new tab)

Drush

Drush (opens in a new tab)ist ebenfalls hilfreich, um Dinge schnell in der Konsole zu erledigen. Die Applikation kann Drupal Seiten kontrollieren, manipulieren und administrieren.

composer require drush/drush

Auch hier gibt es eine Dokumentation über die nützlichen Befehle: https://www.drush.org/latest/commands/all/ (opens in a new tab)

Beispiel

Will man 10 neue Benutzer erstellen, so kostet dies Zeit. Mit Drush ist dies innerhalb von wenigen Sekunden erledigt.

vendor/bin/drush devel-generate-users 10
.bashrc

Damit man Drush und Drupal auch ohne den vendor/bin Pfad ausführen kann, muss man im Root eine .bashrc Datei erstellen.
Darin definiert man dann 2 Aliase.

.bashrc
alias drush='vendor/bin/drush'
alias drupal='vendor/bin/drupal'

Um auch von dieser Konfiguration zu profitieren, muss man diese noch aktivieren.

source .bashrc

Verwendung

In diesem Abschnitt zeige ich, was man mit Drupal alles machen kann.

verwendung

Content

Hier kann man Inhalt hinzufügen. Dieser ist abhängig von den definierten Content types.

Man kann beispielsweise einen Artikel erstellen. Im Hintergrund ist definiert, was für Daten dieser enthält und wie er den Erstellern und Betrachtern angezeigt wird.

content

post

In Drupal kann man schon standardmässig unter Inhalt kommentieren. Diese Kommentare kann man in diesem Bereich verwalten. Hier sieht man Informationen über alle existierenden Dateien auf der Seite.

files

Structure

Unter Structure werden alle Daten verwaltet.
Dabei kann man meistens zwischen 4 Tabs wechseln.

structure

Edit

Hier editiert man den Namen, die Beschreibung und bestimmt die gewünschten Optionen.

Manage fields

Unter diesem Register kann man die Felder/Daten eines Inhaltstyps definieren.

In diesem Fall habe ich einen Schuh hinzugefügt. Dieser hat verschiedene Felder, die beim Erstellen einer Schuh-Seite verwendet werden dürfen/müssen.
Diese Felder sieht man unter Manage fields.

fields

Manage form display

Hier bestimmt man, wie das Eingabeformular für einen Autor aussieht.

Man kann auch Module installieren, die einem das Gruppieren von Daten ermöglichen.

form-display

Manage display

Wenn etwas auf der Seite dargestellt wird, dann wird dies nach diesen Regeln gemacht.
In diesem Bereich sieht man die Regions und deren Inhalt.
Ein Block ist ein Teil eines Layouts und hat einen Inhalt. Blöcke können z. B.

  • Anzeigen auf welcher Seite man sich befindet
  • Eine Navigation darstellen
  • Zeigen, welche Benutzer gerade online sind
  • ...

Dieser Block kann dann in den Regions platziert werden. Im Theme ist beschreiben, wo die Regions sich befinden.

Unter dem Abschnitt Custom Theme ist genauer beschreiben, wie man solche Regionen definiert.

block

Drupal bietet an, dass auf der Webseite kommentiert werden kann.
Unter Comment types kann man Typen von Kommentaren hinzufügen.
Beispiel: Ein Sneaker sollte mit einer Bewertung versehen werden.

In einer View kann man dann später die Kommentare nach einem Typen filtern.
Will man Feedback empfangen, so kann man dies hier definieren.

feedback

Es kann beispielsweise angegeben werden, wer das Feedback erhält und welche Nachricht dem User angezeigt wird, wenn er es abschickt.

contact

Ein Content type ist eine Art von Inhalt. Standardmässig gibt es eine Basic Page und einen Article.

types

Mann kann aber auch neue Inhaltstypen hinzufügen.

Wenn man ändern will, wie der Inhalt im Frontend angezeigt wird, kann man das hier tun.

manage-display

Hier kann festlegen, wie der Inhalt in den verschiedenen Situationen angezeigt wird.

Beispiel:
Bei unserem Sneaker Beispiel könnte ein Schuh-Artikel an verschiedenen Orten sichtbar sein. Er sieht aber nicht überall gleich aus.

  • Auf der Startseite ist ein kleiner Bereich für Schuhe reserviert. Dort sieht man jeweils den Schuh des Tages mit einem grossen Bild und dem Titel des Artikels.
  • Unter der Registerkarte Sneakers findet man dann eine Übersicht. Dort zeigt es jeweils den Titel, einen kleinen Text und ein kleines Bild an.
  • Sucht man im Suchfeld nach einem bestimmten Schuh, werden Suchvorschläge angezeigt. In diesen sieht man den Namen des Schuhs, den Autor und die Marke.

Unter View mode kann man definieren, welche Anzeigemöglichkeiten es im Frontend gibt. Unter Content type sieht man dann diese verschiedenen Modi und kann das Aussehen dementsprechend anpassen.

manage

Meist wird dieses Feature für die Darstellung von Bilder genutzt.

Unter Form mode kann man das Ganze auch fürs Backend einrichten. Dies wird aber eher selten gemacht.
In diesem Bereich kann man, vom Footer bis hin zur Hauptnavigation der Seite, alles bearbeiten.
Man kann beispielsweise einen neuen Menüpunkt hinzufügen.

link

Hier ist noch anzumerken, dass Drupal sich von anderen CMS unterscheidet. Erstellt man einen Inhalt, so ist dieser vorerst nur über den Link erreichbar. Danach muss er nicht, kann aber verlinkt werden. Ein Gericht hat Zutaten, ein Film eine Altersfreigabe und ein Sneaker ein Model. Mit Taxonomy kann man Inhalt Kategorisieren/Klassifizieren. Wenn ich auf meiner Webseite tätlich einen Smoothie poste, könnte ich aus den Zutaten, wie "Apfel" und "Kiwi", terms machen. Sucht dann ein User nach einem Gericht mit einer spezifischen Zutat, fällt es ihm durch das Filtern leichter. Um eine Vokabular anzulegen, sind folgende Schritte notwendig:

  1. Einen passenden Namen unter add vocabulary angeben.
  2. In dem Content type ein Field hinzufügen. Dabei taxonomy term als field type auswählen.
  3. Danach ein passendes Label angeben.
  4. Da es sich um eine Referenz handelt, sollte man dem machine name ref_ davor stellen.
  5. Nun muss man noch die erlaubte Anzahl der Werte festlegen.
  6. Abschliessend setzt man unter Reference type einen Haken bei dem korrekten vocabulary.

In Views kann man Inhalte/Informationen auflisten. Dies können unter anderem Taxonomy terms, Kommentare, User oder auch Artikel sein. Beim Aufruf einer solchen View wird die Webseite, mit SQL, nach den Kriterien abgefragt. Dabei werden dann die Resultate dargestellt.

view

Mit Views können sehr komplexe Abfragen im Backend zusammengeklickt werden.

Appearance

Ein Theme gibt an, wie die Daten dargestellt werden. Mit einem Theme kann man das Aussehen einer Webseite verändern.
Man kann sich vorstellen, dass das die Schicht zwischen dem Inhalt und dem ist, was der User sieht.
Mit einem Theme wird also das Layout und Design bestimmt.

Es gibt zwei Sprachen, welche man fürs Theming kennen sollte.

YAML ist eine lesbare Sprache, die oft für Konfigurationsdateien verwendet wird.
Twig ist eine template engine für PHP. Sie hält Logik und Präsentation auseinander.

Dokumentation: https://twig.symfony.com/doc/3.x/ (opens in a new tab)

Syntax

Es gibt drei verschiedene Arten, Twig zu verwenden.

CodeBeschreibung
{{ say something }}Stellt Daten dar
{% do something %}Macht beispielsweise eine if Abfrage
{# comment #}Kommentar

Vererbung

Teile des Codes können mithilfe von Twig auch vererbt werden.

Klassen hinzufügen

<h1{{ title_attributes.addClass("page-title") }}>{{ title }}</h1>

Diese Zeile führt zu folgendem HTML Code.

<h1 class="page-title">Page</h1>

Array und Objekte

Normalerweise gelangt man mit einem . an Elemente von Arrays oder Objekten.

{{ variable.1 }}
{{ page.sidebar_right }}

Wenn aber spezielle Zeichen verwendet werden, muss man etwas anders an die Daten kommen.

{{ variable['#key'] }}
{{ variable['hyphenated-key'] }}

Ein Theme kann mit Drush, manuell über den Download-Link oder mit dem Composer installiert werden.

composer require drupal/themename

Danach muss man das Theme noch unter Appearance aktivieren.

Alle Themes findet man auf dieser Seite: https://www.drupal.org/project/project_theme (opens in a new tab)

Setup

Bevor man mit dem Theming beginnt, empfiehlt es sich, die Umgebung dafür zu konfigurieren.
Wenn man diesen Codeblock auskommentiert, wird das settings.local.php File beachtet:

sites/default/settings.php
if (file_exists(__DIR__ . '/settings.local.php')) {
	include __DIR__ . '/settings.local.php';
}

Danach muss man das File sites/example.settings.local.php zu sites/default/settings.local.php kopieren.

Damit Dupal die geänderten Template Files beachtet und nicht einfach die Daten vom Cache holt, muss dieser Codeblock auskommentiert werden:

sites/default/settings.local.php
$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Später muss man noch die Twig debugging Optionen aktivieren:

sites/development.services.yml
parameters:
	http.response.debug_cacheability_headers: true
	twig.config:
		debug: true
		auto_reload: true
		cache: false
services:
	cache.backend.null:
		class: Drupal\Core\Cache\NullBackendFactory

Wenn alles funktioniert hat, sollte man im Quelltext, der im Browser zu sehen ist, folgende Kommentare anschauen.

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'html' -->
<!-- FILE NAME SUGGESTIONS:
	* html--node--2.html.twig
	* html--node--%.html.twig
	* html--node.html.twig
	x html.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/layout/html.html.twig' -->

Diese Schritte sind in folgender Anleitung noch genauer beschrieben: https://drupalize.me/tutorial/configure-your-environment-theme-development?p=2512 (opens in a new tab)

Ort

Hier ein kleiner Überblick, wo man Dateien bezüglich der Themes findet.

Aufbau

Ein Theme Ordner kann so aussehen.

aufbau

Dies sind die Nutzen der verschiedenen Dateien.

DateiPfadBeschreibung
Infothemename.info.ymlEinziges required File, liefert generelle Informationen über ein Theme
Theme Logicthemename.themeEnthält Logik, führt Preprocessing durch
Templatetemplates/*.html.twigBesteht aus HTML und Twig, enthält Markup und Präsentations-Logik
Librariesthemename.libraries.ymlDefiniert die CSS- und JS-Libraries
Breakpointsthemename.breakpoints.ymlZeigt die Breakpoints auf
Anderecss/, js/, images/Enthält die entsprechenden Dateien, z.B. könnte man unter images/ das Logo ablegen

Regions

Regionen können folgendermassen implementiert werden.

  1. Regions im info.yml File definieren
  2. Die Region im page template file verwenden
  3. Blocks den Regionen hinzufügen

Sind keine Themes definiert, so nimmt Drupal die Standard regions.

Weiter Anleitungen zu Regions:

Eine Asset Library ist ein CSS oder JavaScript Bündel, um einen Stil und eine Funktionalität für eine bestimmte Komponente bereitzustellen.

So kann eine Library definiert werden.
Man gibt einfach an, welche Files man zu einem Bündel schnüren will.

themename.libraries.yml
global:
	css:
		theme:
		css/global.css: {}
	js:
		theme:
		js/logic.js: {}

Will man dann dieses Bündel verwenden, kann man es einbinden. So erhält man automatisch die Logik und Styles, welche definiert wurden.

libraries:
	- mytheme/global

Template Files sind dazu da, um das Markup zu generieren. In einem solchen File schreibt man HTML Markup und verwendet die Twig Syntax. Deshalb endet ein solches File mit .html.twig.

Drupal nimmt dann jeweils das spezifischste File.

theme

So sieht ein Template File von Bartik aus.

page.html.twig
<div id="page-wrapper">
	<div id="page">
		<header id="header" class="header" role="banner">
			<div class="section layout-container clearfix">
				{{ page.secondary_menu }}
				{{ page.header }}
				{{ page.primary_menu }}
			</div>
		</header>
 
		{% if page.highlighted %}
			<div class="highlighted">
				<aside class="layout-container section clearfix" role="complementary">
					{{ page.highlighted }}
				</aside>
			</div>
		{% endif %}
 
		{% if page.featured_top %}
			<div class="featured-top">
				<aside class="featured-top__inner section layout-container clearfix" role="complementary">
					{{ page.featured_top }}
				</aside>
			</div>
		{% endif %}
 
		<div id="main-wrapper" class="layout-main-wrapper layout-container clearfix">
			<div id="main" class="layout-main clearfix">
				{{ page.breadcrumb }}
				<main id="content" class="column main-content" role="main">
					<section class="section">
						<a id="main-content" tabindex="-1"></a>
						{{ page.content }}
					</section>
				</main>
 
				{% if page.sidebar_first %}
					<div id="sidebar-first" class="column sidebar">
						<aside class="section" role="complementary">
							{{ page.sidebar_first }}
						</aside>
					</div>
				{% endif %}
 
				{% if page.sidebar_second %}
					<div id="sidebar-second" class="column sidebar">
						<aside class="section" role="complementary">
							{{ page.sidebar_second }}
						</aside>
					</div>
				{% endif %}
			</div>
		</div>
 
		{% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
			<div class="featured-bottom">
				<aside class="layout-container clearfix" role="complementary">
					{{ page.featured_bottom_first }}
					{{ page.featured_bottom_second }}
					{{ page.featured_bottom_third }}
				</aside>
			</div>
		{% endif %}
 
		<footer class="site-footer">
			<div class="layout-container">
				{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
					<div class="site-footer__top clearfix">
						{{ page.footer_first }}
						{{ page.footer_second }}
						{{ page.footer_third }}
						{{ page.footer_fourth }}
					</div>
				{% endif %}
				{% if page.footer_fifth %}
					<div class="site-footer__bottom">
						{{ page.footer_fifth }}
					</div>
				{% endif %}
			</div>
		</footer>
	</div>
</div>

Hat man das Theming Setup richtig durchgeführt, sieht man im Browser, wie man die Elemente über die Themes darstellen kann.

Extend

Im Extend Tab kann man Module hinzufügen. Diese können wie Themes installiert werden.
Ein Modul ist vergleichbar mit einem Node Paket. Es bietet Funktionen, welche nach der Aktivierung genutzt werden können.

Beispiel:
Man will auf der Seite einen Color Picker verwenden.
Dazu besucht man zuerst die Drupal Seite (opens in a new tab) und sucht nach einem Modul.

color

Preprocess Funktionen ermöglichen die Veränderung von Variablen, bevor diese dann in den Template-Dateien verwendet werden. Eine detailliertere Beschreibung würde hier den Rahmen sprengen. Ich empfehle aber, diese Beschreibung zu lesen: https://drupalize.me/tutorial/what-are-preprocess-functions?p=2512 (opens in a new tab)

Configuration

Ob man Inhalt generieren, Personen verwalten oder die Zeitzone ändern will ...hier kann man alle allgemeinen Konfigurationen durchführen.

config

generate

People

In diesem Register kann man Nutzer hinzufügen und Rechte und Rollen verwalten.

Reports

Fehler und Reports findet man hier.

report

Fazit

Ich bin überrascht, wie schnell man mit Drupal eine mächtige Seite erstellen kann.