Henk Arendse

Het indienen van een sitemap bij Google via de Search Console zorgt er uiteindelijk voor dat de pagina's van een site vaker getoond zullen worden in de resultaten van een zoekopdracht van "googelende" gebruikers.

Een sitemap is een lijst met alle URL's van de website, die helpt Google efficiënt door de site te navigeren en alle pagina's te ontdekken. Door een sitemap in te dienen, zorg je ervoor dat Google de website volledig indexeert en up-to-date houdt in de zoekresultaten. Dit verbetert de zichtbaarheid van de website en helpt gebruikers relevante content (lees: mijn site) te vinden.

Dus ja, wie wil dit niet? Daarom heb ik aan Supernova een functie toegevoegd die de sitemap voor de gegenereerde site maakt. De genereerfunctie maakt niet alleen de HTML sources in de site > folder, maar ook een file sitemap.xml. Die file ziet er als volgt uit:

Omdat ik over de techniek achter websites schrijf, is het nuttig om af een toe een stukje code weergeven. En het liefst met syntaxkleuring a.k.a. syntax highlighting.

Daarvoor kun je JavaScript library's gebruiken. Zonder al te veel onderzoek heb ik gekozen voor de veel gebruikte highlight.js

Bij syntax highlighting zijn er een paar complicaties:

Weergave HTML

Het weergeven van bijvoorbeeld Javascript code of Python code met hightlight.js gaat meestal probleemloos. Maar het weergeven van HTML code is wel altijd een probleem. Dat komt door de browser. Stel, je wilt <p>Dit is een paragraaf.</p> weergeven als HTML syntax. Dat is een probleem want browser pakt dat op, en zal dit weergeven als Dit is een paragraaf. Dat is waar de browser voor gemaakt is, en dat is wat ie doet.

Dit kan men ondervangen door de < en >  karakters eerst te vervangen door &lt; en &gt; (character encoding). Dat werkt, maar het is wel lastig om dat steeds handmatig te moeten doen. Daarom heb ik een JavaScript functie gemaakt die dat automatisch doet voor HTML die als syntax moet worden weergegeven.

    // encode all html in code class="language-html". These will be 
    // displayed via syntax highlighting. 
    function encodeHTMLforShowSyntax(){
        document.querySelectorAll('code.language-html').forEach(function(element) {
            element.innerHTML = encodeHTML(element.innerHTML);
        })
    };

Grootte van de library

De library's voor syntax highlighting zijn vrij groot, en ze worden slechts door een klein deel van de pagina's gebruikt. Daarom is het beter om ze alleen laden als ze ook gebruikt worden. Hiervoor heb ik het template aangepast. Standard wordt highlight.js library niet geladen, maar in het definitieblok kun je nu aangeven dat je voor de betreffende pagina syntax highlighting wilt hebben.

        Show Syntax: Ja
    

Naarmate een site meer pagina's krijgt, word het moeilijker om het overzicht te bewaren. Welke pagina's zijn al compleet, en welke nog niet? Daarom heb ik een pagina gemaakt, die een overzicht van alle pagina's geeft. Met veel filter mogelijkheden. De link naar deze pagina is te vinden onderaan elke pagina op deze website. Ook voor de bezoeker van deze site kan het handig zijn.

Hoe werkt het? Deze pagina is een mooie samenwerking tussen veel verschillende producten en concepten: tags, het template, de Supernova Generator, CSS, en JavaScript.

• Voor alle content pagina's kunnen Tags gedefinieerd worden in het definitieblok van de content pagina's. Bijvoorbeeld:

  ...
  Title: Ik ga op vakantie en neem mee
  Header:  Ik ga op vakantie en neem mee…
  Tags: Vakantie, Kinderen, e-boeken
  ...

  Deze Tags definities worden gebruikt door het pages.html template.
• Template pages.html. Omdat het weergeven van een lijst met alle pagina's met filtermogelijkheden fundamenteel anders is dan de normale detail of lijst weergave van content, heb ik hiervoor een speciaal template gemaakt: pages.html, die de volgende taken heeft:
  1. weergeven van alle in gebruik zijnde tags,
  2. weergeven van de lijst met pagina's (naam, korte omschrijving, tags, etc),
  3. de lijst filteren op tag(s) en/of een tekstfragment.
  Als voorbeeld nemen we een klein stukje uit dit template:

      <!-- display Tags -->
      <div class="tags">
          {% for tag in tags -%}
          <span class='tag' onclick='toggleTag( {{loop.index0}} )'>#{{tag}}</span>
          {% endfor -%}
      </div>

• Op basis hiervan en op basis van het definitieblok genereert Supernova onderstaande HTML code:

           
              <!-- display Tags -->
              <div class="tags">
                  <span class='tag' onclick='toggleTag( 0 )'>#cms</span>
                  <span class='tag' onclick='toggleTag( 1 )'>#e-boeken</span>
                  <span class='tag' onclick='toggleTag( 2 )'>#energie</span>
                  <span class='tag' onclick='toggleTag( 3 )'>#geschiedenis</span>
                  <span class='tag' onclick='toggleTag( 4 )'>#ict</span>
                  etc. 

• Als er op een Tag geklikt wordt, dan wordt de JavaScript toggleTag() functie aangeroepen, die het selected veld van een element in de Tags array op true zet. Geselecteerde Tag's worden in een andere kleur getoond (zie SelectedTag Class in de CSS).

  
  function initTags() {
      var TagElements = document.getElementsByClassName("tag");
      var locTags = [];
  
      for (i = 0; i < TagElements.length; i++) {
          locTag = {  element: TagElements[i], 
                      selected: false, 
                      tag: TagElements[i].innerHTML};
          locTags.push(locTag);
      }
      return(locTags)
  }
  
  function toggleTag(id){
      if (Tags[id].selected)
          Tags[id].selected = false;
      else
          Tags[id].selected = true;
      
      displayTags()
      filterPageList() 
  }
  
  function displayTags() {
      for (i = 0; i < Tags.length; i++) {
         if (Tags[i].selected == false) {
              Tags[i].element.classList.remove('SelectedTag');
         } else {
              Tags[i].element.classList.add('SelectedTag');
         }
      }
  }
  

• De CSS zorgt ervoor dat de tags netjes weergegeven worden. Zowel de vorm als de kleur wordt hiermee bepaald.

      .tags {
          opacity: 0.9;
          width: 100%;
          margin-top: -1em;
          margin-left: 0.2em;
          margin-bottom: 1em;
          clear: both;
          border-left: 1px solid #E1E1E1;
      }
  
      .SelectedTag {
          color: #1EAEDB;
          font-weight: bolder;
      }
  
      .tags .tag {
          text-transform: lowercase;
          font-variant: inherit;
          cursor: pointer;
          margin-left: 0.4em;
          margin-bottom: 1.0em;
          opacity: 0.8;
          background-color: whitesmoke;
          border-radius: 25px;
          padding-left: 1.0em;
          padding-right: 1.0em;
          line-height: 1.5em;
      }

• En tenslotte zorgt de JavaScript functie filterPageList() er voor dat de lijst met pagina's gefilterd wordt. Onderstaande JavaScript functies zorgen ervoor dat alleen de rijen (= pagina's) getoond worden, die één of meer van de geselecteerde tag(s) hebben. De overige rijen krijgen de display style "none", oftewel deze rijen worden onzichtbaar.

    
  
              function filterPageList() {
  
                  var Pages = document.getElementsByClassName("page");
              
                  var tr; // table row
                  var i;
                  var nofPages = 0;
                  var nofDisplayedPages = 0;
              
                  for (i = 0; i < Pages.length; i++) {
                      // fill tr (= table row) with displayed info of page
                      tr = Pages[i].innerHTML.toLowerCase();
                      pos = tr.indexOf(filter);
              
                      nofPages++;
                      if TagsInTr(tr) {
                          // table row contains string that equals one
                          // of the selected tags
                          Pages[i].style.display = "";
                          nofDisplayedPages++;
                      } else {
                           // Selected tags not in table row. Make row invisible
                          Pages[i].style.display = "none";
                      }
                  };
              }
              
              function TagsInTr(tr)
              {
                  // Check Tags in Table Row (tr). 
                  // Also check for tag without #
                  var nofSelectedTags = 0;
              
                  for (i = 0; i < Tags.length; i++) {
                      if (! Tags[i].selected)
                          continue;
              
                      nofSelectedTags++;
              
                      // use tag withoud #
                      tag = Tags[i].tag.substr(1)
              
                      if (tr.indexOf(tag) != -1)
                          return(true);
                  }
              
                  if (nofSelectedTags > 0) 
                      return(false);
                  else
                      return(true);
              }
          

Er kan veel misgaan bij het maken en onderhouden van de pagina's van een website. Daarom heb ik een aantal automatische testen gemaakt, die checks uitvoeren op de website. Het gaat om de volgende testen, die voor elke pagina uitgevoerd worden.

• Kan de Pagina geopend worden?
• Is het template goed verwerkt? Dit wordt gecheckt door te zoeken naar "{{" of "}}". Als die in de gegeneerde html voorkomen, dan is dat een aanwijzing dat het template niet goed was of niet goed verwerkt is.
• Bestaan de afbeeldingen?
• Werken de links goed?

Met deze testen heb ik al een aantal fouten kunnen onderscheppen. Een probleem is wel dat met name het testen van de links veel tijd kost (een paar minuten).

Verder zou ik graag nog een test er bij hebben om spel- en grammaticafouten er uit te halen.