Een automatische inhoudsopgave maken met sjabloontags
In een zelfgemaakt HTML-sjabloon kun je aangeven welke koppen in de inhoudsopgave moeten komen. Laposta stelt de lijst met verwijzingen naar de artikelen dan automatisch samen zodra je de nieuwsbrief vult.
Deze tags gelden alleen voor een geïmporteerd HTML-sjabloon. Werk je in de drag & drop-editor, gebruik dan het blok ‘Inhoud’: zie Interne links plaatsen voor een inhoudsopgave in je nieuwsbrief.
De inhoudsopgave plaatsen met <lp-toc>
Zet de tag <lp-toc> op de plek waar de inhoudsopgave moet komen. Daar verschijnt een lijst met interne links naar de inhoud die lager in de nieuwsbrief staat.
De lijst wordt opgebouwd als een <table>, omdat verschillende mailprogramma’s dat beter weergeven. De <td> met de link krijgt de class lp-toc-link mee, de <td> met de bullet de class lp-toc-bullet.
Koppen aanwijzen met het attribuut lp-toc
In de inhoudsopgave kun je alleen de tekst van singleline-elementen gebruiken. Voeg lp-toc toe aan een singleline om die kop op te nemen:
Staat de singleline binnen een repeater, dan komen alle singlelines die je daarin aanmaakt in de inhoudsopgave terecht.
Wil je meerdere groepen singlelines opnemen, bijvoorbeeld de koppen uit het hoofdvak en uit een zijkolom? Geef het attribuut dan een getal mee. De koppen verschijnen op volgorde van die getallen.
Bij het vullen van de nieuwsbrief kun je per kop nog aangeven of die wel of niet in de inhoudsopgave komt.
De bullet aanpassen
Standaard staat voor elk item de HTML-code •. Met deze attributen voor <lp-toc> kun je de bullet en de witruimte aanpassen:
Een eigen bullet. Dit kan tekst zijn (bijvoorbeeld * of ‣), maar ook de url van een afbeelding. Laposta importeert en host die afbeelding.
Getal voor de padding in pixels aan de linkerkant.
Getal voor de padding in pixels aan de rechterkant.
Gebruik je een afbeelding als bullet, geef dan hiermee de breedte op (als width-attribuut). Zo kun je een afbeelding met een hogere resolutie gebruiken.
Een inhoudsopgave met een eigen bullet en ruimte aan beide kanten ziet er zo uit: