Ancestor Tree Manager - Handleiding - Rapportage

Ancestor
Tree
Manager

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.html	persoonsblad
Chart.html	overzicht voorouders
Report.html	rapport (kwartierstaat, parenteel, genealogie)
Index.html	index pagina
Pictures.html	overzicht van personen met een portret
Stories.html	overzicht van personen met een verhaal
Content.html	inhoudsopgave van de geneste menu-items (ter aanvulling van de navigatie voor een klein scherm)
Home.html	startpagina
User.html	gebruikersspecifieke pagina
Viewer.html	scanpagina

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>