Sjablonen

Voor het genereren van de rapportage wordt gebruik gemaakt van sjablonen. Bij het programma wordt een standaard set sjablonen aangeleverd, deze zijn te vinden in de map:

  • C:\AncestorTreeManager\templates (op Windows)
  • /usr/local/AncestorTreeManager/templates (op Linux/Mac)

De volgende sjablonen zijn beschikbaar:

Person.htmlpersoonsblad
Chart.htmloverzicht voorouders
Report.htmlrapport (kwartierstaat, parenteel, genealogie)
Index.htmlindex pagina
Pictures.htmloverzicht van personen met een portret
Stories.htmloverzicht van personen met een verhaal
Content.htmlinhoudsopgave van de geneste menu-items (ter aanvulling van de navigatie voor een klein scherm)
Home.htmlstartpagina
User.htmlgebruikersspecifieke pagina
Viewer.htmlscanpagina

Indien gewenst kan een sjabloon enigszins naar eigen smaak worden aangepast. Denk daarbij bijvoorbeeld aan het toevoegen van Google Analytics of het toevoegen van een inleidende tekst op het afbeeldingsoverzicht.

Kopieer de sjabloon naar: [stamboommap]/Templates, zie Mappen en bestanden.

Wijzig de gekopieerde sjabloon met een Teksteditor en sla het bestand op in UTF-8.

Hieronder een voorbeeld van de sjabloon Pictures.html waarin 2 stukjes zijn toegevoegd, gemarkeerd met 'START USER CODE' en 'END USER CODE'.


<!DOCTYPE html>

<html lang={LANGUAGE}> 
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
   <title></title>

   <link rel="icon" type="image/x-icon" href="../Style/WebsiteIcon.ico">
   <link rel="stylesheet" href="../Style/Atm.css">
   
<!---------- START USER CODE ---------->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-1234567"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'XX-1234567');
</script>
<!---------- END USER CODE ---------->
   
</head>

<body>
   <div class="atm-container">

   <!---------- Small screen ---------->
   <div class="small-screen">
{HEADER_SMALL_SCREEN}
   </div>

   <!---------- Large screen ---------->
   <div class="large-screen">
{HEADER_LARGE_SCREEN}
   </div>

   <!---------- Content ---------->
   <div class="atm-content">

   <h2>{TITLE}</h2>

<!---------- START USER CODE ---------->
<p>
Inleidende tekst, bijvoorbeeld een dankwoord aan de mensen/instellingen 
die afbeeldingen geleverd hebben.
</p>
<!---------- END USER CODE ---------->

{CONTENT}
   </div>

   <!--------- Footer ---------->
   <footer>{FOOTER}</footer>

   </div>
</body>
</html>