Page d'accueil

La page d'accueil du site web est trop sobre. Nous allons l'améliorer, pour la faire ressembler à celle de votre ancien site web, qui ressemblait à ceci :

une présentation générale ;
la liste des articles.

La quasi-totalité du travail de ce TP se fera en modifiant le template index.html, situé dans le fichier theme/templates/index.html.

Présentation générale

Ajoutez, dans le template theme/templates/index.html, la présentation générale de votre site web (avec une photo), en HTML.

Il aurait été plus propre de faire cela en markdown dans un des fichiers du dossier content, mais cela aurait été un peu plus technique.

Lien vers les articles

Remarquez, dans le template, les lignes suivantes.

<ul>
  {% for article in articles %}
    <li><a href="{{ SITEURL }}/{{article.url}}">{{ article.title }}</a> : {{ article.summary }}</li>
  {% endfor %}
</ul>

La ligne {% for article in articles %} va itérer sur l'ensemble des articles, et générer la ligne suivante <li>…</li> pour chacun des articles. Les valeurs {{article.url}}, {{article.title}} et {{article.summary}} sont remplacées respectivement par l'adresse, le titre et le sommaire de l'article.

Modifier ces trois lignes pour qu'elles génèrent la même structure que votre ancien site web (c'est-à-dire que chaque article soit dans un <div class="perso"> au lieu d'un <li>).

Ajout d'images

Choisissez un des articles, et ajoutez un fichier image dans le dossier content/blog, qui apparaîtra sur la page d'accueil.

Dans le fichier .md correspondant, ajoutez une métadonnée image avec le nom de ce fichier, comme sur l'exemple suivant.

 title: Théano
 summary: Une des rares mathématiciennes de l'antiquité.
 image: theano.jpg

 Théano était une philosophe et mathématicienne grecque du 6e siècle avant JC. Bla bla bla bla bla.

Modifiez le template theme/templates/index.html pour incorporer cette image à la page d'accueil. On pourra utiliser {{ SITEURL }}/blog/{{ article.image }} comme URL de cette image.
Mettez à jour le site web (commande pelican).
Faites de même avec chacun des personnages du site web.

Comparaison de l'ajout d'une page avec l'ancienne version

Créez une nouvelle page pour un nouveau personnage, c'est-à-dire :

Créez un fichier mon-nouveau-personnage.md dans le dossier content/blog.
Ajoutez l'image correspondante dans le même dossier.
Re-générez le site web.

Remarquez que l'ajout d'un nouvel article est beaucoup plus simple que ce que vous avez fait précédemment, où il aurait fallu :

copier la structure d'un article existant (intégralement, y compris les portions qui sont communes à l'ensemble des pages du site web) ;
écrire l'article en utilisant le format HTML, beaucoup moins facile à manipuler que le markdown ;
modifier la page d'accueil pour ajouter ce nouvel article.

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 ! ⚠️