Deel 5: Ontleding van een thema en subtheming. 20. YML-bestanden en subtheming

Transcriptie

1 Deel 5: Ontleding van een thema en subtheming 20. YML-bestanden en subtheming Een thema moet voldoen aan bepaalde standaarden. Wat moet een thema zoal bevatten en kunnen we beroep doen op andere basisthema s? In dit hoofdstuk ontleden we de basisbestanden en bekijken wat subtheming is en waarom het zo handig is. In Drupal 8 wordt beroep gedaan op yml-bestanden (yml wordt als YAML uitgesproken). Een eerste bestand dat we nodig hebben is.info.yml en een tweede is een.libraries.ymlbestand Het.info.yml bestand Het.info.bestand gebruiken we om alle informatie over het thema te beschrijven. Het bevat de naam, de beschrijving, waar de css bestanden terug te vinden zijn,... Het info.yml bestand is het enige dat Drupal nodig heeft om een thema te zien. In essentie is dit dus het enige bestand dat verplicht is om een thema aan te maken. Cursus Drupal Pagina 52 Leerkracht: Henk Nuyttens

2 20.2. Verplichte sleutelwoorden Het [thema naam].info.yml bestand bestaat uit key - value pairs. Dat zijn sleutelwoorden waar steeds een waarde aan verbonden is. Het [thema naam].info.yml bestand heeft enkele verplichte sleutelwoorden om een thema te definiëren: name: De naam van het thema zoals die zal verschijnen op de pagina Appearance. type: Het type van uitbreiding theme, module of profile. die we toevoegen. description: De beschrijving van het thema die ook zichtbaar is op de Appearance pagina. core: Dit sleutelwoord beschrijft voor welke versie van Drupal dit thema bedoeld is Bijkomende sleutelwoorden package: base theme: version: screenshot: libraries: stylesheet-remove: regions: Door bij verschillende thema s dezelfde package in te vullen worden die thema s gegroepeerd op de Appearance pagina. Een thema kan configuratie en css overerven van een ander thema door dat thema te definiëren bij base theme of basisthema. Het versienummer wordt gebruikt op de projectpagina s van modules en thema s op drupal.org. Dit nummer wordt automatisch ingevuld bij het toevoegen van een project aan drupal.org en mag dus niet handmatig ingevuld worden. Dit is de bestandsnaam van een afbeelding die als screenshot voor het thema zal dienen. De afbeelding moet opgenomen zijn in de map van het thema in het bestandssysteem. wordt gebruikt om css (stylesheets) en javascript bestanden aan het thema toe te voegen. Bij het gebruik van een basisthema kunnen we hier definiëren welke stylesheets we niet willen overerven. Dit bevat de regio s die beschikbaar zijn in dit thema. Het gaat om de regio s die we gebruiken om blokken aan toe te voegen.. Cursus Drupal Pagina 53 Leerkracht: Henk Nuyttens

3 Onderstaande figuur toont de code van bartik.info.yml (core theme Bartik) Cursus Drupal Pagina 54 Leerkracht: Henk Nuyttens

4 20.4. Het.libraries.yml bestand Gebruik maken van assets In Drupal 8 worden stylesheets (css) en JavaScript (js) op dezelfde manier ingeladen voor modules en thema s. Dit gebeurt door het gebruik van asset libraries. Asset libraries of assets zijn collecties van css en/of js bestanden. Een belangrijke factor binnen Drupal is dat assets niet automatisch op alle pagina s worden ingeladen, dit zou slecht zijn voor de laadsnelheid van de site. We moeten Drupal specifiek zeggen welke assets waar worden ingeladen. De algemene stappen om assets in de vorm css en js in te laden in Drupal zijn: 1. Css of js opslaan in een bestand. 2. De library definiëren die css en/of js bevat. 3. De library toevoegen aan een module of thema. Modules laden libraries enkel in wanneer nodig. Thema s kunnen css en js inladen op elke pagina. Dat is zo omdat modules css en js voorzien specifiek voor de functionaliteit van die module. Thema s voorzien assets voor de hele website. Cursus Drupal Pagina 55 Leerkracht: Henk Nuyttens

5 Een library definiëren Om één of meerdere asset libraries te definiëren moeten we kunnen beschikken over een [themanaam].libraries.yml bestand toe aan de map van het thema. Elke library in dat bestand zegt waar bepaalde css of js bestanden terug te vinden zijn. Opgelet: Het is van groot belang dat deze code correct wordt geschreven. GEEN TABULATIES, wel spaties gaan vooraf aan de elementen die in een lager niveau geplaatst moeten worden. De naam van de library is het voorbeeld van de nano.libraries.yml global-styling. De css bestanden worden voorafgegaan door het sleutelwoord css: waarin nog een sleutelwoord theme: staat. Na de sleutelwoorden worden één of meerdere stylesheets toegevoegd door telkens het pad naar het bestand in te vullen, gevolgd door een dubbelpunt en accolades. Dit pad vertrekt steeds van map van het thema. Wanneer we meerdere stylesheets toevoegen gebruiken we telkens een nieuwe lijn per css bestand. Nogmaals, in YAML bestanden is de spatiëring zeer belangrijk. In onderstaand figuur zijn de spaties weergegeven als puntjes. Zonder correcte spatiëring zal het YAML bestand niet werken als verwacht. Js bestanden worden toegevoegd door eerst het sleutelwoord js: te gebruiken. Hierna volgen geen andere sleutelwoorden meer. De js bestanden worden op dezelfde manier toegevoegd als css bestanden. Ziehier bootstrap.libraries.yml Cursus Drupal Pagina 56 Leerkracht: Henk Nuyttens

6 20.5. De stijlpagina css/style.css CVO Crescendo In de pagina nano.libraries.yml wordt er verwezen naar een stijlpagina css/style.css. Deze werd toegevoegd bij het aanmaken van het thema op basis van het bootstrap thema. Het spreekt voor zich dat er meerdere css-pagina s kunnen worden aangemaakt en gekoppeld. Schrijf onder de regel css/style.css dan de verwijzing naar een andere css-pagina en maakt deze aan onder de map css. In deze stijlpagina css/style.css vinden we voorlopig geen informatie, maar daar zal de csscode komen voor de layout aanpassingen die dienen te worden gemaakt. Als test geven we een achtergrondkleur aan de navigatiebalk en aan de footer. Cursus Drupal Pagina 57 Leerkracht: Henk Nuyttens

7 Resultaat aan bezoekerszijde CVO Crescendo Cursus Drupal Pagina 58 Leerkracht: Henk Nuyttens

8 Deel 6: Subtheming met bootstrap CVO Crescendo 21. Subtheming Bootstrap is een CSS framework dat dient om responsive websites te maken. In een eerder hoofdstuk werd aangeleerd hoe dit geïnstalleerd en ingeschakeld werd. De onderdelen van de pagina s bevinden zich onder de map templates. Indien deze niet aanwezig zijn in het subtheme, wordt de code opgehaald in deze mappen. We spreken dan van overerving. Cursus Drupal Pagina 59 Leerkracht: Henk Nuyttens

9 Om te beslissen welke template gebruikt moet worden kijkt Drupal eerst naar welk element wordt aangepast door de template. Dat kan een volledige pagina zijn, een regio, een blok, een veld, Op basis van het element kiest Drupal dan een prefix, in het geval van een pagina is de prefix page. Daarna kijkt Drupal naar de url van een pagina. Als voorbeeld nemen we de url Drupal zal deze url (of pad) opsplitsen in verschillende componenten. In dit geval zijn de componenten node en 1. Met deze informatie gaat Drupal een lijst van mogelijke mogelijke template namen opbouwen en kijken of er templates zijn in het huidig actieve thema die overeenkomen met die namen. Cursus Drupal Pagina 60 Leerkracht: Henk Nuyttens

10 Dat gaat als volgt: Als het component een nummer is, voeg de prefix plus --% toe aan de lijst van mogelijkheden. Ongeacht of de componenten nummers zijn of niet wordt de prefix plus de componenten toegevoegd aan de lijst van mogelijkheden telkens gescheiden door --. Als het component geen nummer is, voeg de prefix plus -- plus het component toe aan de mogelijkheden Als de pagina de homepage is, voeg page--front toe aan de mogelijkheden. Voeg.html.twig toe aan de mogelijkheden. Op basis van bovenstaande regels zal de lijst van mogelijke bestandsnamen van templates voor de url er als volgt uitzien: 1. page.html.twig (dit is altijd een mogelijkheid voor pagina s) 2. page--node.html.twig 3. page--node--%.html.twig 4. page--node--1.html.twig 5. page--front.html.twig (enkel als deze pagina de homepage is) Bij het inladen van een pagina begint Drupal bij de laatste mogelijkheid in deze lijst. Wanneer er een template met die bestandsnaam bestaat zal die gebruikt worden, zoniet wordt de voorlaatste mogelijkheid getest. Dit gaat door tot er een template gevonden wordt. Page.html.twig wordt als laatste optie gebruikt omdat dit bestand standaard aanwezig is in Drupal. Cursus Drupal Pagina 61 Leerkracht: Henk Nuyttens