Hoe maak je aangepaste Drupal-layouts voor Layout Builder via code

Vandaag verkennen we Hoe je aangepaste Drupal-layouts maakt voor Layout Builder via code.

Drupal’s Layout Builder biedt een krachtige en intuïtieve manier om flexibele paginalay-outs te ontwerpen zonder diep in de code te duiken. Het stelt content-editors in staat om content te rangschikken in visueel aantrekkelijke structuren met behulp van een drag-and-drop interface. In dit blogbericht onderzoeken we wat Layout Builder is, hoe je het inschakelt en laten we zien hoe je aangepaste sjablonen maakt voor nog meer controle.

Wat is Layout Builder?

In de kern is Layout Builder een Drupal-module waarmee je de lay-out van pagina's visueel kunt samenstellen. In plaats van beperkt te zijn tot de rigide structuur van een thema, krijg je de vrijheid om:

• Regio's definiëren: Secties binnen je pagina aanwijzen (bijv. header, footer, hoofdinhoud, zijbalk).
• Lay-outs samenstellen met blokken: Verschillende contentblokken (tekst, afbeeldingen, menu's, etc.) in deze regio's plaatsen en rangschikken met drag-and-drop.
• Aangepaste sjablonen maken: Sjabloonbestanden maken voor specifieke lay-outs om precieze controle te hebben over HTML en de plaatsing van regio's.

Layout Builder inschakelen voor een contenttype

Laten we aannemen dat je Layout Builder wilt gebruiken op het contenttype 'Artikel'. Hier lees je hoe je het inschakelt:

1. Modules installeren: Zorg ervoor dat de kernmodule Layout Builder is ingeschakeld (meestal standaard).
2. Weergave beheren: Navigeer naar / admin / structure / types / manage / article / display (vervang 'article' door de machinenaam van je contenttype).
3. Layout Builder inschakelen: Vink onder de sectie 'Layout-opties' het vakje "Gebruik Layout Builder" aan.
4. Wijzigingen opslaan: Klik op 'Opslaan'.

Je kunt er ook voor kiezen om individuele nodes (in dit geval artikelen) hun eigen unieke lay-outoverschrijvingen te laten hebben. Dit betekent dat elk artikel een afwijkende lay-out kan hebben die verschilt van de standaard lay-out die je hebt ingesteld voor het contenttype 'Artikel'.

Hoe maak je aangepaste Drupal-lay-outs

Hoewel je Drupal-thema en sommige modules mogelijk enkele vooraf gebouwde lay-outs bieden, biedt het maken van aangepaste sjablonen nog meer controle en flexibiliteit. Hier zijn de redenen waarom je aangepaste lay-outs nodig zou kunnen hebben:

• Op maat gemaakte paginadesigns: Maak lay-outs die perfect bij je content passen, in plaats van beperkt te zijn tot generieke thema- of modulelay-outs.
• Eenvoudig bewerken: Bied kant-en-klare lay-outs die passen bij de stijl van je website, wat het leven van je content-editors eenvoudiger maakt.
• Consistente uitstraling: Zorg ervoor dat je website er op elke pagina geweldig uitziet, zelfs bij het gebruik van lay-outs die niet in je thema waren opgenomen.

Volg deze stappen om aangepaste lay-outs te maken:

1. THEME.layouts.yml Bestand:
   • Maak een bestand met de naam THEME.layouts.yml in de hoofdmap van je thema (vervang THEME door de daadwerkelijke naam van je thema).
   • Laten we een snel voorbeeld gebruiken voor een lay-out met een rechter zijbalk. Voeg de volgende code toe en vergeet niet 'EXAMPLE' te vervangen door een geschikte prefix voor je project:

example_layout_right_sidebar:
  label: 'EXAMPLE: Inhoud met rechter zijbalk'
  path: templates/layout/example/sidebar
  template: layout--right-sidebar
  category: 'Voorbeeld Kolommen: 2'
  default_region: first
  icon_map: 
    - [top] 
    - [first, first, second]  
    - [bottom, bottom, bottom] 
  regions: 
    top:
      label: Boven 
    first:
      label: Eerste 
    second:
      label: Tweede 
    bottom:
      label: Onder 

Uitleg van de code:

• example_layout_right_sidebar: Unieke naam voor de lay-out.
• label: De gebruiksvriendelijke naam voor deze lay-out in Layout Builder.
• path: Waar de sjabloonbestanden van je lay-out zich bevinden.
• template: Het hoofd-sjabloonbestand dat de HTML-structuur van je lay-out definieert.
  • Je hebt een bijbehorend layout--right-sidebar.html.twig bestand nodig op het opgegeven pad.
• category: Helpt bij het groeperen van lay-outs binnen de Layout Builder-interface.
• default_region: Specificeert waar contentblokken aanvankelijk worden geplaatst (in dit geval de 'first'-regio).
• icon_map:
  • Dit toont een basis visuele preview in Layout Builder:
    • Eén rij bovenaan ([top])
    • Rij met drie kolommen: twee bredere 'first'-kolommen en een smallere 'second'-kolom.
    • Eén rij onderaan ([bottom, bottom, bottom])
• regions:
  • Definieert de benoemde gebieden waar je content kunt plaatsen:
    • top: Een regio die de bovenkant van de lay-out beslaat.
    • first: De hoofdcontentregio (waarschijnlijk de linker kolom).
    • second: De zijbalkregio (waarschijnlijk de rechter kolom).
    • bottom: Een regio die de onderkant van de lay-out beslaat.
  • Je gebruikt {{ content.top }}, {{ content.first }}, en {{ content.second }} om je content in het twig-sjabloon te plaatsen.

2. Sjabloonbestanden:
   • Maak in de map die je hebt opgegeven onder het path in je .layouts.yml bestand (bijv. templates / layout / example / sidebar), de Twig-sjabloonbestanden zoals layout--right-sidebar.html.twig.
   • Hier is het sjabloonvoorbeeld:

{#
/**
 * @file
 * Standaard thema-implementatie voor een media-lay-out.
 *
 * Beschikbare variabelen:
 * - content: De inhoud voor deze lay-out.
 * - attributes: HTML-attributen voor de lay-out <div>.
 *
 * @ingroup themeable
 #}
{% if content %}
 <div{{ attributes.addClass('row example-sidebar-layout example-right-sidebar') }}>

  <div class="example-container">

   {% if content.top %}
    <div {{ region_attributes.top.addClass('region--top example-sidebar-layout-top') }}>
     {{ content.top }}
    </div>
   {% endif %}

   <div class="example-sidebar-layout-middle">

    <div{{ region_attributes.first.addClass('col-sm-9 example-sidebar-column-left') }}>
     {{ content.first }}
    </div>

    <div{{ region_attributes.second.addClass('col-sm-3 example-sidebar-column-right') }}>
     {{ content.second }}
    </div>

    </div>

   {% if content.bottom %}
    <div {{ region_attributes.bottom.addClass('region--bottom example-sidebar-layout-bottom') }}>
     {{ content.bottom }}
    </div>
   {% endif %}

  </div>

 </div>
{% endif %}

2. Cache legen: Wis de caches van Drupal om je nieuwe sjablonen te registreren.

Je aangepaste sjablonen gebruiken

1. Schakel bij het bewerken van een 'Artikel' (of je gekozen contenttype) node over naar het tabblad 'Lay-out'.
2. Je aangepaste lay-outs zouden nu beschikbaar moeten zijn om te selecteren.
3. Zodra je een lay-out kiest, kun je contentblokken toevoegen aan de aangewezen regio's.

Laatste gedachten

Layout Builder en aangepaste sjablonen geven je meer flexibiliteit om je Drupal-site te ontwerpen zoals jij dat wilt. Het kan wat oefening vergen om er vertrouwd mee te raken, maar de mogelijkheid om lay-outs te creëren die perfect aan je behoeften voldoen, is de moeite waard. Speel ermee en kijk wat je kunt maken. Veel debugplezier!