Modestia D11 - Nachbau

Übung mit Layout Builder abgebrochen. War irgendwie nicht mein Ding.

Einstiegspunkt. Aktuelle Drupal 11.4.7 Version.

Inhaltsstruktur erstellen

Inhaltstyp

• Inhaltstyp Basic Page erstellen:
  Basic Page (basic_page) [bas]
• Felder erstellen:
  • Sektion einfügen (field_bas_section)
    • Reference: Other (revisions)
      • Type of item to reference: Paragraph
      • Allow number of values: unlimited
      • Required field: On
      • Reference type: gewünschte ankreuzen
        • Erlaubte Paragrafen als Liste anzeigen
• Manage form disyplay:
  • Reihenfolge anpassen
  • unnötige Felder ausblenden
  • Reference field > Settings
    • Edit mode: Preview
    • Add mode: Select list
• Manage display:
  • Reihenfolge anpasse
  • Labels ausblenden

Paragraphs einrichten nachbauen

WICHTIG: Stolpersteine zu Paragraphs!!!
Modul: Paragraphs folgt in eigenem Thread

• Paragraphen verschachteln: Richtiges Widget für das Feld «Entity Reference revisions (Paragraph) setzen. 
  Damit verschachtelte Views sauber angezeigt werden, muss das richtige Widget im «Management Form» ausgewählt werden. Aktuell wird in Drupal 11.4.7 unter «Management form display» in der Spalte «Widget» das Widget «Paragraphs Legacy» ausgewählt. Legacy bedeutet aber veraltet, nicht mehr unterstützt, wird nicht mehr weiter entwickelt. Hier muss unbedingt «Paragraphs (stable)» ausgewählt werden. Dies basiert auf dem früheren Widet «experimentel». Ohne stable fehlen Einstellmöglichkeiten und die verschachtelten Paragraphen werden nicht sauber dargestellt.
• Korrekte Darstellung im Backend (Bearbeitungsformular):
  Damit mehrere Paragraphen (nacheinander oder verschachtelt) übersichtlich dargestellt werden, ist die Darstellung im Backend auf «Close» zu lassen. So sind die Paragraphen sauber untereinander aufgelistet. Was im geschlossenen Paragraphen angezeigt wird, stellt man im entsprechenden Paragraphen unter «Manage display» ein. Wenn der Preview im «View Mode» noch nicht enabled ist, dann enablen wir ihn und passen dort an, was im Backend angezeigt werden soll. Oft genügt es hier den Titel oder z.B. ein Beschreibendes Feld anzuzueigen, damit der User weiss, was hinter diesem zugeklappten Paragraphen zu erwarten ist. Im Preview «View Mode» entfernen wir alle Felder die wir nicht anzeigen wollen. Bei Modestia habe ich für den äusseren Paragraphen sogar alles ausgeblendet, weil ich kein sinnvolles Textfeld hatte. Beim Fullsizebild gebe ich im Preview ein Minithumbnail aus und in den verschachtelten Paragraphen habe ich das Titelfeld, was ich anzeige.
•  
• Als erstes habe ich die Paragraphs und Felder nach meiner neuen Namenskonvention auf Basis der bestehenden D8 Installation erstellt.
• Zu beachten beim Erstellen:
  • Paragraphs lassen sich über den Feldtyp «Entity Reference Revisions» einbinden. (Achtung: Extra Modul nötig. Es erweitert Paragraphs um die Option Revisions sauber auf verknüpfte Paragraphen zu übernehmen)
    Am Ende der Einstellung, werden hier die erlaubten Paragraphs angeklickt, damit immer nur Paragraphs ausgewählt werden können, die erlaubt sind und Sinn machen.
  • Anzeigen der erlaubten Paragraphen als Liste:
    • Manage Form display: Reference field > Settings:
      • Edit mode: Preview
      • Add mode: Select list

Tabellenview erstellen

Hier in separtem Artikel

Dazu benötigen wir erst ein Zusatzmodul: Views Reference Field. Installieren und im entsprechenden Paragraph oder Contenttype ein neues Feld hinzufügen. 

• Typ >>> Beschreibung noch nicht 

BrowserSync einrichten

Das Einrichten gehört in Zukunft schon früher in den Ablauf. Ansonste separaten Thread durcharbeiten. Zum Testen eine beliebige twig Datei ändern und prüfen ob der Reload funktioniert. Bei css kann es sein, dass der Browser nicht reagiert, wenn die Datei nicht aktiv in dem Theme ist, wo wir testen.

Sass einrichten

vscode kompiliert automatisch mit dem «Live Sass Compiler» scss zu css. Sobald ein scss Verzeichnis erkannt wird, zeigt vs code unten «Watch Sass» an. Ein klick darauf startet den Compiler in den watch Modus und schreibt die kompilierte Datei in den Ordner css, der im gleichen Verzeichnis wie scss liegen muss. Thats all ;-)

Startertheme erstellen

Als nächses richten wir unser Starterkit ein, welches die Basis für die Modestia Site stellt.

• Im Composer-Root public/ starten wir mit dem folgenden Befehl das Drupal-CLI und lassen damit aus dem Core-Starterkit ein neues, eigenständiges Custom Theme erzeugen.
• Im Verzeichnis public/ führen wir mit PHP das Drupal-Skript vendor/bin/dr aus. Mit dem Befehl generate-theme erzeugt es aus Drupals mitgelieferter Theme-Vorlage (Starterkit) unser neues Theme modestia.

• php vendor/bin/dr generate-theme modestia --name "Modestia" --path themes/custom

• Wenn schon vorhanden gleich screenshot.png ins modestia theme root legen, dann sieht man beim einrichten gleich besser, was gewählt ist.
• Theme auswählen
  Im Backend Appearance wählen und das neue Starter-Theme mit «Install and set as default» aktivieren
• CSS einbinden
  • In modestia.libraries.yml oberhalb component: auf gleicher Stufe theme: einfügen. {} bedeutet, dass es keine weiteren Einstellungen gibt. In der vorhanden Zeile component wird hier noch das weight: -10 angegeben, was die Ladereihenfolge steuert. Weiter könnten da auch noch z.B:  media: print, preprocess: false, minified: true stehen.

    •  base:
        version: VERSION
        css:
          theme:
            css/styles.css: {}
          component:
            css/components/action-links.css:
              weight: -10

  • In modestia.info.yml kurz prüfen, ob libraries base geladen wird.

    • name: Modestia
      type: theme
      'base theme': false
      version: 1.0.0
      libraries:
        - modestia/base            <--- Diese Zeile mus da sein
        - modestia/messages
        - core/normalize
      libraries-extend:

  • styles.scss im Verzeichnis scss erstellen und prüfen ob vscode die Datei nach css/styles.css kompiliert.
  • Damit steht schon mal die Einbindung unser CSS-Datei, die ich aus der statischen Site übernommen habe. 
  • Struktur der CSS-Datei wird später noch verfeinert. Aktuell arbeite ich nur noch mit Custom properties und 
• Browsersync testen
  Falls Browsersync noch nicht eingereichtet ist, jetzt einrichten.
  • Browsersync starten
    Am besten ein zweites Terminalfenster öffnen, damit browsersync im Hintergrund werkeln kann, während man im ersten Terminal weiterhin git, drush etc. nutzen kann.

    • npm run dev

    • Wenn man nur CSS bearbeitet kann es sein, dass man erst einen manuellen Reload machen muss.
      CSS geändert – BrowserSync injiziert neues CSS, kein Seiten-Reload. Browserfenster bleibt auf Scrollposition.
      Twig geändert – BrowserSync lädt die komplette Seite neu.
      Neue CSS-Datei erstmals eingebunden – einmal Reload anstossen, danach funktioniert die CSS-Injection.
  • Browsersync beenden:

    • ctrl q

Theming

Zum Theming gehört die Anpassungen der Template Dateien, zuweisung der Klassen und Einbindung von Assets.

Basis für die Implementierung in Drupal 11 ist die statische Site. Zuständig für den HTML-Aufbau und CSS. Drupal 8 spielt hier keine grosse Rolle mehr.

Passende Twig Templates finden

• Folgende Regeln gelten für die Namensvorschläge gemäss Drupal-Richtlinien. Sie geht von der spezifischsten Vorlage bis zur geringsten. Drupal verwendet immer die spezifischste Vorlage.
• Die Unterstriche (_) im Maschinennamen eines Feldes werden durch Bindestriche (-) ersetzt.
• Vorschläge für mögliche korrekte Twig-Namen liefert die Twig Config in den Development Services. Nach dem Einschalten Cache leeren. >> NEU gibt es im Backend eine Seite das einzuschalten.

  • twig.config: 
      debug: true

• Nodes:

  •    node--[nodeid]--[viewmode].html.twig
       node--[nodeid].html.twig
       node--[content-type]--[viewmode].html.twig
       node--[content-type].html.twig
       node--[viewmode].html.twig
       node.html.twig
       
       Beispiel aus Modestia						Gültig für 
       ------------------------------------------------------------------------------------
       node--22--full.html.twig						Für einen speziellen Node UND View Mode
       node--22.html.twig							Für einen speziellen Node
    ✅ node--basic-page--full.html.twig				Für Content-Type UND View Mode
       node--basic-page.html.twig               	Für einen speziellen Content Type
       node--full.html.twig							Für einen speziellen Viewmode
       node.html.twig								Alle Nodes

• Fields:

  •    field--node--[field-name]--[content-type].html.twig
       field--node--[field-name].html.twig
       field--node--[content-type].html.twig
       field--[field-name].html.twig
       field--[field-type].html.twig
       field.html.twig
    
       Beispiel aus Modestia:
       ------------------------------------------------------------------------------------
    ✅ field--paragraph--field-p-shared-ref-par--p-01-section-text.html.twig
       field--paragraph--field-p-shared-ref-par.html.twig
       field--paragraph--p-01-section-text.html.twig
       field--field-p-shared-ref-par.html.twig
       field--entity-reference-revisions.html.twig
       field.html.twig

Twig-Templates anpassen

• Nachdem sämtliche Inhaltsgefässe wie Content Types und Paragraphs erstellt wurden, geht es nun daran den Output korrekt zu formatieren, die richtige HTML Struktur nachzubilden und CSS Klassen den HTML Tags mitzugeben.

   

• Als letztes werden die nötigen Template-Dateien erstellt, wo die korrekten Klassen aus dem statischen Layout implementiert werden und das HTML-Gerüst korrekt nachgebaut. In Modestia habe ich im Theme einen Ordner templates-lernhilfe einrichten lassen, wo die entsprechenden twig-Dateien kommentiert sind, was ich dort geändert habe. Im Moment noch Bahnhof ;-) aber vielleicht kann ich da und dort mal nachschauen. Unnötiges Markup musste z.B. beim Feld field_p_shared_ref_par (field--paragraph--field-p-shared-ref-par--p-01-section-text.html.twig) komplett entfernt werden, weil dadurch ein unnötiges div ausgegeben wurde, was die grid-Darstellung kaputt machte. Übrig blieb nur noch die pure Inhaltsausgabe, sprich der darin verknüpfte Paragraph, ohne weitren div oder sonstigen Container.

  • {% for item in items %}
      {{ item.content }}
    {% endfor %}

Regions und Blocks

Je nach Sitestruktur brauchen wir unterschiedliche Regionen, wo Drupal die verschiedenen Inhalte als Blöcke ausgibt. Sei es die Navigation, der Hauptcontent, Views, usw. usf. Hier im separaten Thread Regionen und Blöcke ist es genauer beschrieben.

Header

Hier fasse ich den Output der Hauptnavigation und Brandingblocks zusammen.

• Branding ist ein Default-Blockelement, was Logo, Site name und Site slogan ausgibt. Konfiguriert wird es über Block layout > Site branding > configure: Dort kann man anwählen, ob Logo, Site name, Site slogen ausgegeben werden oder nicht. Die Texte für Site name und slogen, werden aus der Settings > Basic site settings übernommen. Das Logo muss als logo.svg benannt ins Themeverzeichnis gelegt werden. Wenn kein svg vorhanden ist, muss ein Link für jpg oder png in der info.yml ergänzt werden:

  • logo: logo.jpg

  • Muster für angepasste branding.twig 
    Ich gebe Site name und slogan aus, aber zeige ihn nicht an. So ist zumindest für Screenreader site und slogan da.

  • {% block content %}
      <a href="{{ path('<front>') }}" rel="home" class="logo">
        {% if site_logo %}
          <img src="{{ site_logo }}" alt="" fetchpriority="high">
        {% endif %}
    
        <span class="visually-hidden">
          {{ site_name }} – {{ 'Home'|t }}
        </span>
      </a>
    
      {% if site_slogan %}
        <div class="site-slogan visually-hidden">
          {{ site_slogan }}
        </div>
      {% endif %}
    {% endblock %}

• Navigation
  In Modestia hatte ich ursprünglich eine statische Navigation gebaut, die responsive schön mit dem Hamburgermenu funktionierte. KI hat das ganze etwas optimiert, damit es auch auf mobilen Geräten besser funktioniert. Die Menufunktion von Drupal war inaktiv, weil alles hardcoded war. Das bauen wir jetzt um, dass wir die normale Menustruktur aus Drupal verwenden können, die selbst gebaute Navi aber weiterhin funktioniert.

Deutsche Sprache hinzufügen

Sollte eigentlich ganz zu Beginn nach der Grundinstallation hinzugefügt werden. Hier die Beschreibung im späteren Workflow.

• Dies war mit sehr sehr vielen Stolpersteinen versehen und habe ich darum nicht im Detail dokumentiert. Im Wesentlichen habe ich Language Modul (Core) und Interface Translation enabled. Dann die Basissprache umgestellt. Bei den nodetypen überall das Sprachenfeld aktiviert, was in den Settings zum content type aktiviert werden muss. Dann sämtliche Inhalte die durch die englische Installation auf Sprache «english» standen, auf Deutsch gestellt. Bei Feeds gibt es in der Konfiguration auch einen Sprachumschalter und auch die Menus haben als komplettes Menu einen Spracheintrag. Einzelne von Hand eingetragene Menupunkte bleiben durch das Umschalten des kompletten Menus aber immer noch englisch. Hier war löschen und neu erfassen der einfachste Weg. Danach in den Language Settings die URL ausgeschaltet und fürs Backend «Account administration pages» aktiviert. Damit lassen sich dann für den einzelnen Benutzer explizit die Backendsprache einstellen. Also Web normal afu deutsch, aber backend englisch. --> ist keine komplette Zusammenfassung dieses Workarounds.

Verwendete Module

• backup and migrate
  Backupstrategie von Martin übernommen
• feeds
  Basismodul
  • feeds http_auth_fetcher
    Erweitert den Zugriff über htaccess geschützte Verzeichnisse auf eine externe .json Datei
  • feeds tamper
    Nötig um fixen Value ins Feld published = 1 zu setzen, wenn ein verschwundener Eintrag wieder auftaucht, weil diee Einstellung nicht übergeben wird.
• paragraphs
  Für die Inhaltsstruktur und das Verschachteln der Inhalte
  • Entity Reference Revisions
    Wird von Composer als Abhängigkeit von Paragraphs mitinstalliert. Beim Aktivieren von Paragraphs aktiviert Drupal ERR als benötigte Abhängigkeit mit. ERR sorgt dafür, dass Paragraph-Referenzen auf konkrete Revisionen verweisen und damit zusammen mit der übergeordneten Seite korrekt versioniert werden können.
• pathauto
  Automatisch Links aus Titelfeld erstellen lassen
• redirect
  Alte Links weiterleiten. Z.b. alt: /loge neu: /die-loge
• Simple XML Sitemap
  Einfache Sitemap automatisch erstellen
• shield
  htschutz. pernet, pernet
• viewsreference
  Zusatzmodul um die Arbeitstabelle (Block View) auszugeben. Da reicht wohl das normale reference other Feld nicht
  
  Abhängigkeiten die automatisch beigefügt wurden.
• token (used by pathauto)