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 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
Ressource | URL |
---|---|
Dokumentation | https://www.drupal.org/documentation (opens in a new tab) |
Guides | https://drupalize.me/guides (opens in a new tab) |
Download/Installation | https://drupal.org/download (opens in a new tab) |
Wikipedia | https://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.
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.
Firma | URL | Bild |
---|---|---|
Tesla | https://www.tesla.com/ (opens in a new tab) | ![]() |
NCAA | https://www.ncaa.com/ (opens in a new tab) | ![]() |
NASA | https://www.nasa.gov/ (opens in a new tab) | ![]() |
Alternativen
Um die Vor- und Nachteile von Drupal zu analysieren, schaute ich zuerst, welche Alternativlösungen es gibt.
Logo | CMS | Beschreibung | Webseite |
---|---|---|---|
![]() | Contao | Cantao ist kostenlos und für mittlere bis grosse Webseiten gedacht. | https://contao.org/en/ (opens in a new tab) |
![]() | Redaxo | Aufgrund 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) |
![]() | Wordpress | Dies 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) |
![]() | Joomla | Joomla wirbt damit, dass keine Kenntnisse in Programmiersprachen vorausgesetzt sind. | https://www.joomla.ch (opens in a new tab) |
![]() | Shopify | Der 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) |
Magento | Auch Magento gehört zu den Onlineshop Softwares. | https://magento.com/de (opens in a new tab) | |
![]() | TYPO3 | Hinter diesem Open Source System steht eine grosse Community. Das CMS ist gratis und skalierbar. | https://typo3.org/ (opens in a new tab) |
![]() | Webflow | Das amerikanische Unternehmen hebt sich durch die visuelle Online-Editor-Plattform ab. | https://webflow.com (opens in a new tab) |
Vorteile Drupal
Vorteil | Beschreibung |
---|---|
Konfigurierbar | Mit den Inhaltstypen von Drupal können individuelle Datenstrukturen schnell und einfach erstellt werden. |
Verwaltung der Konfiguration | Die 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. |
Flexibel | Drupal 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. |
Datenimport | Drupal verfügt über ein leistungsfähiges Tool zum Importieren von Daten. Damit lassen sich Daten aus beliebigen Quellen einfach und automatisch importieren und aktualisieren. |
Suche | Suchmaschinen wie Solr oder Elasticsearch können einfach angebunden werden und ermöglichen eine schnelle und effiziente Suche. |
Stabil, schnell & kompatibel | Drupal 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 Berechtigungen | Drupal 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. |
Erweiterbar | Tausende von Modulen von Drittanbietern sind auf drupal.org zur freien Verwendung verfügbar. |
Drupal ist sicher | Ein 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) |
OpenSource | Drupal ist eine Open-Source-Software. Es fallen daher keine Lizenzgebühren an. |
Grosse und aktive Gemeinschaft | Die 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 Roadmap | Die Weiterentwicklung von stabilen Drupal-Core-Releases wird im Voraus geplant und kommuniziert. |
Bewährtes CMS | Das 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
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 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.
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.
Version | Bedeutung |
---|---|
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.
Composer | NPM |
---|---|
composer.json | package.json |
composer.lock | package.lock |
2 - Datenbank erstellen
Nun muss man eine Datenbank erstellen.
Nachdem man MAMP gestartet hat, kann man dies in phpMyAdmin tun.
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).
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
Bei der Datenbank ist es besonders wichtig, dass man die korrekten Daten angibt.
Diese findet man im phpMyAdmin.
Danach kann man die Installation abschliessen.
Zu diesem Zeitpunkt sollte die Startseite von Drupal sichtbar sein.
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.
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
$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.
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.
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.
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.
Structure
Unter Structure werden alle Daten verwaltet.
Dabei kann man meistens zwischen 4 Tabs wechseln.
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.
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.
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.
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.
Es kann beispielsweise angegeben werden, wer das Feedback erhält und welche Nachricht dem User angezeigt wird, wenn er es abschickt.
Ein Content type ist eine Art von Inhalt. Standardmässig gibt es eine Basic Page und einen Article.
Mann kann aber auch neue Inhaltstypen hinzufügen.
Wenn man ändern will, wie der Inhalt im Frontend angezeigt wird, kann man das hier tun.
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.
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.
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:
- Einen passenden Namen unter
add vocabulary
angeben. - In dem Content type ein Field hinzufügen. Dabei
taxonomy term
alsfield type
auswählen. - Danach ein passendes Label angeben.
- Da es sich um eine Referenz handelt, sollte man dem machine name
ref_
davor stellen. - Nun muss man noch die erlaubte Anzahl der Werte festlegen.
- 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.
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.
Code | Beschreibung |
---|---|
{{ 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:
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:
$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:
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.
Dies sind die Nutzen der verschiedenen Dateien.
Datei | Pfad | Beschreibung |
---|---|---|
Info | themename.info.yml | Einziges required File, liefert generelle Informationen über ein Theme |
Theme Logic | themename.theme | Enthält Logik, führt Preprocessing durch |
Template | templates/*.html.twig | Besteht aus HTML und Twig, enthält Markup und Präsentations-Logik |
Libraries | themename.libraries.yml | Definiert die CSS- und JS-Libraries |
Breakpoints | themename.breakpoints.yml | Zeigt die Breakpoints auf |
Andere | css/ , js/ , images/ | Enthält die entsprechenden Dateien, z.B. könnte man unter images/ das Logo ablegen |
Regions
Regionen können folgendermassen implementiert werden.
- Regions im info.yml File definieren
- Die Region im page template file verwenden
- Blocks den Regionen hinzufügen
Sind keine Themes definiert, so nimmt Drupal die Standard regions.
Weiter Anleitungen zu Regions:
- https://drupalize.me/tutorial/exercise-create-new-theme?p=3291 (opens in a new tab)
- https://drupalize.me/tutorial/adding-regions-theme?p=3291 (opens in a new tab)
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.
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.
So sieht ein Template File von Bartik aus.
<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.
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.
People
In diesem Register kann man Nutzer hinzufügen und Rechte und Rollen verwalten.
Reports
Fehler und Reports findet man hier.
Fazit
Ich bin überrascht, wie schnell man mit Drupal eine mächtige Seite erstellen kann.