Gabarit

Le but de ce TP est d'améliorer l'apparence de notre site web.

Remarque : En bon français, il faudrait parler de gabarit plutôt que de template (qui est un mot anglais). Toute la littérature parle de template (à tort), donc j'utiliserai aussi (à tort) ce terme ici.

Préliminaires

Dans le fichier pelicanconf.py, ajoutez la ligne suivante.
```
THEME = 'theme'
```
Téléchargez cette archive, et décompressez-là à la racine de votre site web. Il doit donc y avoir, dans le même répertoire que content et pelicanconf.py un nouveau dossier theme qui contient les fichiers suivants :
```
theme
├── static
│   └── css
│       └── style.css
└── templates
    ├── article.html
    ├── base.html
    ├── index.html
    └── page.html
```
Compilez le site web (commande pelican). Vous devriez observer un site web très sobre.

Moteur de template

Le fichier base.html le fichier de base de chacune des pages de notre site web. Il contient le code HTML suivant.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}{{ SITENAME }}{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/style.css" />
  </head>

  <body>

    <ul>
      <li><a href="{{ SITEURL }}/">Accueil</a></li>
      {% for page in pages %}
        <li><a href="{{ SITEURL}}/{{page.url}}">{{ page.title }}</a>
      {% endfor %}
    </ul>

    {% block content %}
    {% endblock %}

  </body>
</html>

Remarquons les « balises » {% block NOM %} … {% endblock %} : elles seront remplacées plus tard. En effet, regardons maintenant le fichier article.html : c'est lui qui est utilisé pour produire chacune des pages du dossier blog de notre site web.

{% extends "base.html" %}

{% block title %}
{{article.title}}
{% endblock %}

{% block content %}

<h1>{{ article.title }}</h1>

{{ article.content }}

{% endblock %}

Ce fichier (tout comme base.html) est ce que l'on appelle un template : il est utilisé pour construire les pages de notre site web.

Lorsque pelican construit une des pages du dossier blog, il lit le template article.html, et :

Première ligne :
```
{% extends "base.html" %}
```
Il utilise le template base.html, dans lequel il effectue les remplacement suivants.
Bloc title :
```
{% block title %}
{{article.title}}
{% endblock %}
```
Le bloc title est remplacé par le titre de l'article.
Bloc content :
```
{% block content %}

<h1>{{ article.title }}</h1>

{{ article.content }}

{% endblock %}
```
Le bloc content est remplacé par le titre de l'article (<h1>{{ article.title }}</h1>), suivi du texte de l'article ({{ article.content }}).

Comme nous avons pu le voir, le code HTML est reproduit tel quel, mais les balises {{ … }} sont interprétées, et remplacées par les valeurs propres à l'article.

Style

Dans cette partie, nous laissons de côté la page d'accueil. Elle sera modifiée dans le TP suivant.

Remplacez le fichier theme/static/css/style.css par le fichier que vous avez créé dans la séquence précédente.
Observez que l'apparence des pages a changé.
Modifiez le fichier article.html pour reproduire (partiellement) la structure des pages de votre précédent site web (sans le menu ; nous y reviendrons plus tard).
Modifiez, de la même manière, le fichier page.html pour que le style de la page des mentions légales soit le même que celui des autres pages.

Dans le fichier base.html, convertissez la liste <ul> en copiant la structure du menu de votre ancien site web. Adaptez cette structure pour obtenir un menu qui apparaisse sur chacune de vos pages.

Favicon

La favicon est la petite icône qui s'affiche parfois dans l'onglet du site web que vous visitez. Nous allons en ajouter une à notre site web.

Choisir une image qui deviendra notre favicon. Elle doit rester lisible même à une taille très petite. Télécharger cette image.
En utilisant Gimp, redimensionner cette image à exactement 64x64 pixels.
Enregistrez cette image sous le nom favicon.png, dans le dossier theme/static/images.
Dans le fichier base.html, dans le <head>, ajouter la ligne suivante :
```
<link rel="icon" href="{{ SITEURL }}/theme/images/favicon.png">
```

Validation

Vérifiez que les pages ne produisent aucune erreur sur http://validator.w3.org, et que le fichier style.css ne produit aucune erreur sur https://jigsaw.w3.org/css-validator/.

Évaluation

Complétez la fiche d'évaluation, copiez votre travail (intégralité du répertoire de travail) dans le dossier partagé, rendez-moi la fiche d'évaluation, et passez au TP suivant.

⚠️ Attention ! ⚠️