Uitbreidingen voor Hugo on Hugo Codex

Toekomstige datums

Fri, 24 Jun 2022 00:00:00 +0000

Introductie

Bij een evenementenoverzicht wil je alleen toekomstige datums tonen. Dat is lastig, want Hugo weet alleen welke dag het is op het moment van de build, en dat kan dagen of maanden geleden zijn. Daarom hebben we een javascript-oplossing nodig om dit probleem op te lossen.

Hoe het werkt

Het script haalt de huidige datum in het formaat ‘jjjj-mm-dd’ op met javascript. Je hoeft de datum van het evenement met Hugo-templating alleen als een custom attribuut ‘future-date’ op het omliggende HTML-element te zetten; het script verwijdert vervolgens de elementen waarvan de ‘future-date’ in het verleden ligt. Deze elementen mogen van elk type zijn, ook een lijstitem of een link werkt prima.

Automatisch inklappend menu

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Veel websites gebruiken automatisch inklappende menu’s met geneste pagina’s. Dat is een prima manier om veel content gestructureerd te tonen, maar het vraagt wel om een hiërarchisch overzicht van al je pagina’s. Dit is een genest menu dat je met een simpele include kunt toevoegen. Wil je het in actie zien, bekijk dan de demo.

Hoe het werkt

Dit script leest de mappen in je sectie en maakt daar automatisch een inklappend, genest menu van. Let op: je mag GEEN ‘index.md’ bestand in je mappen gebruiken. Je hebt WEL een _index.md nodig in een map die andere pagina’s bevat. Kijk voor de duidelijkheid naar de mappenstructuur van de demo.

Cookietoestemming

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Om aan de AVG te voldoen heb je toestemming van de gebruiker nodig voor alle niet-functionele cookies en scripts en die van derden. Dat kun je regelen door deze ‘cookie consent banner’ aan de footer van de website toe te voegen. Deze banner geeft je een gedetailleerd overzicht en fijnmazige controle over de scripts die geladen worden.

Hoe het werkt

De code plaatst een toestemmingsbanner onderaan het scherm. Als je op ‘Weigeren’, ‘Toestaan’, ‘Alles toestaan’ of ‘Voorkeuren opslaan’ klikt, wordt er een cookie aangemaakt die 31 dagen geldig is. Bij elke paginalading controleert de code of deze cookie bestaat. Bestaat hij, dan wordt gekeken welke scripts toegestaan zijn. Bestaat hij niet, dan laadt de pagina alleen de functionele scripts. Scripts beheer je in een bestand ‘consent.yaml’ in de map data. Bezoekers kunnen hun toestemming instellen of nakijken door op een link met de class ‘manage-consent’ te klikken, zoals deze: toestemming beheren. Tip: zet minstens één van deze links in de footer van je website. Wil je het gedrag van deze banner resetten? Verwijder de cookie ‘consent-settings’ in je browser of klik op deze resetlink.

Deelknoppen

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Het kan heel handig zijn om mensen de content die ze net gelezen hebben makkelijk te laten delen. Deelknoppen staan vaak onderaan een blogbericht. Dit script voegt ze automatisch toe aan de content die jij wilt.

Hoe het werkt

Het script leest de .Permalink en maakt daar een deellink van. De partial heeft een paar instellingen waarmee je de kleuren en de getoonde iconen aanpast.

Installatie

Stap 1. Download het bestand share-buttons.html
Stap 2. Sla het bestand op in de map ’layouts/_partials’ van je project
Stap 3. Voeg de volgende regel toe aan je layout op de plek waar je de deelknoppen wilt laten zien:

Formulierbouwer

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Formulieren zijn een van de belangrijkste onderdelen van een website. Ze variëren van simpele contactformulieren tot formulieren die complete webshopbestellingen of evenementinschrijvingen afhandelen. WordPress heeft extreem populaire formulieroplossingen, zoals ‘Contact Form 7’ en ‘Gravity Forms’, maar Hugo niet. Om dat gat te vullen heb ik een eenvoudige formulierbouwer voor Hugo gemaakt.

Hoe het werkt

Het formulier gebruikt HTML5. Het formulier kan verstuurd worden door CloudCannon of Netlify. De eerste werkt alleen op hosting bij CloudCannon. Je kunt kiezen tussen placeholders in de invulvelden of labels erboven. Er zijn twee bijzondere velden beschikbaar: een veld met de naam ’name’ (type ’text’) toont invulvelden voor ‘voornaam’ en ‘achternaam’ op één regel. Een veld met de naam ‘address’ (type ’text’) toont invulvelden voor ‘adres’, ‘plaats’ en ‘postcode’.

Fotogalerij

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Dit script maakt een fotogalerij. Het script leest alle afbeeldingen uit een specifieke (zelf te kiezen) map in de assets-map van Hugo, snijdt ze automagisch bij tot vierkanten van 300px en toont ze in rijen van vijf.

Hoe het werkt

Het script zoekt naar alle bestanden in de map ‘album’ in de assets-map van Hugo. Voor deze afbeeldingen maakt het een image-tag met een thumbnail. De thumbnail is een 300 pixel brede, vierkant bijgesneden versie van de afbeelding. Het script zet om de thumbnail een link naar een grotere versie, die een lightbox opent als die aanwezig is. Het bijschrift is de bestandsnaam zonder extensie.

Kruimelpad

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Een kruimelpad (breadcrumbs) is een enkele regel met links (vaak boven de titel) die laat zien waar een pagina zich in de sitestructuur bevindt. Elke website zou een kruimelpad moeten hebben, want het is goed voor SEO én het helpt bezoekers de structuur van de site te begrijpen.

Hoe het werkt

Deze code kijkt naar de variabele Ancestors om het kruimelpad op te bouwen. Deze aanpak heeft een kleine footprint. Bovendien hoef je het kruimelpad hiermee niet expliciet in de front matter / YAML vast te leggen.

Leestijd

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

De leestijdindicator is een simpel script waarmee je de geschatte leestijd van de content toont. Het script maakt gebruik van de paginavariabele reading time, die al in Hugo zit.

Hoe het werkt

Om de leestijd van een artikel te tonen, wordt de onderstaande code gebruikt.

Reading time: {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}

Installatie

Stap 1. Download het bestand reading-time.html
Stap 2. Sla het bestand op in de map ’layouts/_partials’ van je project
Stap 3. Voeg de volgende regel toe aan je layout op de plek waar je de leestijdindicator wilt laten zien:

Lightbox

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Lightbox is een oplossing die je afbeeldings links, je Youtube-links en je Vimeo-links automatisch in een minimalistisch en responsive pseudo-venster/overlay laadt. Je hoeft je links niet aan te passen, volg gewoon de installatie-instructies hieronder.

Hoe het werkt

Links die naar afbeeldingen, Youtube- en Vimeo-video’s wijzen worden automagisch herkend en met javascript van een extra class voorzien. Video’s krijgen daarnaast een data-id. Een listener voegt de lightbox aan de body toe zodra er op de link geklikt wordt. De lightbox wordt verwijderd als je op de achtergrond/overlay klikt. Je kunt voorkomen dat links een lightbox openen door de class ’no-lightbox’ toe te voegen.

Live chat

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Live chat is een van de belangrijkste functies die een website kan bieden. Deze livechat-oplossing moet gratis of freemium zijn en het moet voor bezoekers heel simpel zijn om direct contact te leggen. Ook moet hij makkelijk te bedienen, te beheren en aan te passen zijn en er moet een mobiele app voor de operator zijn. Ik heb dit allemaal gevonden bij Crisp, dankzij uitgebreid onderzoek van Appernetic.

Hoe het werkt

Je maakt een account aan bij Crisp en voegt een script toe in de head of de footer van je website. Het script plaatst de chatmodule in de website. Meer is het niet. Hieronder zie je een voorbeeldscript. Je eigen code haal je uit je Crisp-account.

Nieuw-venster-fix

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Volgens veel site-eigenaren moeten externe links en pdf’s in een nieuw venster openen. In Markdown is dat relatief lastig aan te geven. Dit script automatiseert dat voor je, zodat jij je er geen zorgen over hoeft te maken.

Hoe het werkt

Dit script herkent externe links en pdf’s. Het voegt automagisch ’target="_blank"’ aan deze links toe. Dat gebeurt met de volgende code.

[expand]

{{ $link := .Destination }}
{{ $isRemote := (or (strings.HasPrefix $link "http") (in (lower $link) ".pdf")) }}
{{- if not $isRemote -}}
  {{ $url := urls.Parse .Destination }}
  {{- if $url.Path -}}
    {{ $fragment := "" }}
    {{- with $url.Fragment }}
      {{ $fragment = printf "#%s" . }}
    {{ end -}}
    {{- with .Page.GetPage $url.Path }}
      {{ $link = printf "%s%s" .RelPermalink $fragment }}
    {{ end }}
  {{ end -}}
{{- end -}}
<a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isRemote }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

[/expand]

Slider/Carrousel

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Deze carrousel is gebaseerd op een carrousel met CSS scroll snap. Deze carrousel weegt maar 3kb (ongecomprimeerd). Op desktop bedien je hem met de pijlen en de bolletjes, op mobiel kun je swipen. Hij werkt min of meer zonder Javascript. Deze carrousel ondersteunt native lazy loading (omdat hij gewone image-tags gebruikt in plaats van achtergrondafbeeldingen). Je kunt meerdere carrousels op één pagina zetten en de carrousel ‘pauzeert’ als je er met de muis overheen gaat.

Slider/Carrousel (handmatig)

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Veel websites hebben een slider (of carrousel). De meeste in de header. De grote vraag is: zou ik een carrousel aan mijn Hugo-website moeten toevoegen? Besluit je van wel… dan laat deze pagina je zien hoe je een fatsoenlijke gebruikt.

De carrousel is gebaseerd op een carrousel met CSS scroll snap. Deze carrousel weegt maar 3kb (ongecomprimeerd). Op desktop bedien je hem met de pijlen en de bolletjes, op mobiel kun je swipen. Hij werkt min of meer zonder Javascript. Deze carrousel ondersteunt native lazy loading (omdat hij gewone image-tags gebruikt in plaats van achtergrondafbeeldingen). Je kunt meerdere carrousels op één pagina zetten en de carrousel ‘pauzeert’ als je er met de muis overheen gaat. De content staat in een databestand en de ontwerpkeuzes staan in de include-variabelen.

Tekst uitklappen

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Soms is het overdreven om voor een ’lees meer’-link een hele nieuwe pagina te maken. In dat geval is uitklapbare tekst met javascript heel handig. Op deze website wordt het gebruikt voor overzicht en beknoptheid.

Hoe het werkt

Het script zoekt naar een [expand]-tag op een eigen regel en zoekt daarna naar de [/expand]-tag (opnieuw op een eigen regel, dus als enige inhoud van die alinea). Vindt het die, dan voegt het een paar classes toe en verbergt het alles wat ertussen staat. Er verschijnt een ’lees meer →’-link, die aangeeft dat de tekst uitgeklapt kan worden.

Vimeo shortcode

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Paul Irish deed iets moois. Hij maakte een lichtere Youtube-embed. Zijn oplossing vertraagt je website niet meer, zoals normale Youtube-embeds dat wel doen. Er is maar één nadeel: hij laadt content van Youtube zonder toestemming, terwijl Youtube een dienst is van een bedrijf dat bekendstaat om tracking en profilering. Dat is niet erg privacyvriendelijk. De oplossing is om de poster zelf te hosten en die naar Youtube te linken. Dat kan met een shortcode. En dat kan ook voor Vimeo.

Webshop

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Dit is een webshop met verschillende betaalmethodes waarvoor je geen maandbedrag hoeft te betalen. De webshop kan op dit moment geen variabele btw-berekeningen aan. Hij biedt ook geen afwijkend afleveradres, al is dat makkelijk toe te voegen. Met een e-mailparser zou je het bestelproces nog verder kunnen automatiseren. Zoek je iets minder ingewikkelds, probeer dan de simpelere variant met Stripe. De Nederlandse versie van deze shop rekent af via de betaalpagina van Usecue, waar je bezoeker met een QR-code, iDEAL of creditcard betaalt. Wil je het zien, probeer de demo.

Webshop (simpel)

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Dit is een simpele webshop met Stripe waarvoor je geen maandbedrag hoeft te betalen. Ideaal voor een eenvoudige webshop. Bekijk de demo! Let op: deze webshop gebruikt geen winkelwagen en ook geen extra’s zoals verzendkosten. Heb je die functionaliteit wel nodig, gebruik dan de andere variant.

Hoe het werkt

We laten payment links van Stripe het meeste werk voor ons doen. We maken in Stripe een betaallink voor elke productvariant. Daarna maken we in Hugo de productpagina’s en zetten we die betaallinks bij de bijbehorende producten.

Youtube shortcode

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Zoeken met Google

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Moderne websites hebben een zoekbalk waarmee je binnen de site naar specifieke content zoekt. Die zoekvelden doorzoeken vaak realtime de database. Dat kan niet binnen een statische website. Daarom moet er een andere oplossing komen.

Hoe het werkt

Deze zoekfunctie leunt op de index van Google. Hij bevraagt de zoekmachine van Google rechtstreeks. De resultaten worden binnen de interface van Google getoond (op een nieuwe pagina), maar zijn beperkt tot de site die jij opgeeft.

Zoeken met Lunr.js

Mon, 01 Jan 0001 00:00:00 +0000

Introductie

Hoe het werkt

Deze zoekfunctie leunt op een lokale index. Hij gebruikt het script Lunr.js om te zoeken. Dat script heeft geen jQuery nodig. Eerst wordt er een lokale index opgebouwd met de variabele documents. Daarna wordt de code van Lunr.js aangeroepen. Ten slotte zet een zelfgemaakte functie (genaamd ’lunr_search’) de resultaten in een Google-achtige stijl op het scherm.