Structure globale du site¶

Le site est composé de plusieurs grandes parties.

Tous ces éléments sont dans le fichier templates/base.html. Pour les utiliser dans les gabarits, il suffit d’étendre base.html, avec cette ligne :

{% extends "base.html" %}

Quand il s’agit d’un contenu comme un tutoriel ou un article, il faut étendre templates/base_content_page.html :

{% extends "base_content_page.html" %}

Il se peut aussi que les modules aient leur propre gabarit de base, auquel cas c’est ce dernier qu’il faut utiliser :

{% extends "module/base.html" %}

Voir aussi

Pour en savoir plus, n’hésitez pas à la partie de la documentation de Django sur l’héritage des gabarits !

L’en-tête¶

On peut découper l’en-tête du site en quatre.

Le logo¶

Le logo est simplement un lien qui a pour contenu une image. L’image change en fonction de la taille de l’écran.

La logbox¶

Pour un utilisateur connecté¶

Pour un utilisateur connecté, la logbox contient trois menus déroulants :

le premier affiche les messages privés ;
le deuxième affiche les notifications ;
et le dernier contient des liens vers les zones réservées à l’utilisateur.

Pour le Staff (les membres avec les droits de modération), il existe un autre menu pour les alertes de modération.

Pour un anonyme¶

Pour un anonyme, il y a simplement deux boutons :

un pour se connecter ;
un pour s’inscrire.

Le sous en-tête¶

Le sous-entête est en deux partie :

à gauche, une aide à la navigation ;
à droite, un petit formulaire de recherche.

Le contenu principal¶

Le contenu principal change radicalement suivant les pages : tutoriels, articles, messages du forum, messages privés... Il y a donc différentes façons de l’afficher suivant le contenu ! Dans les gabarits, le résultat est donc l’existence de plusieurs blocs différents.

Du contenu accompagné de titre et sous-titre¶

Il faut mettre le contenu entre {% block content %} et {% endblock %}, comme ceci :

{% extends "base.html" %}

{% block content %}
    <div>
        Super contenu !
    </div>
{% endblock %}

Vous avez deux autres blocs, le premier pour le titre et le deuxième pour le sous-titre :

{% extends "base.html" %}

{% block headline %}
    Mon super titre !
{% endblock %}

{% block headline_sub %}
    Avec mon tout aussi superbe sous-titre...
{% endblock %}

{% block content %}
    <div>
        Toujours avec mon super contenu !
    </div>
{% endblock %}

Du contenu sans titre ni sous-titre¶

Dans ce cas là, il faut simplement utiliser {% block content_out %} :

{% extends "base.html" %}

{% block content_out %}
    <div>
        Super contenu sans titre ni sous-titre !
    </div>
{% endblock %}

Du contenu comme un tutoriel ou un article¶

Dans ce cas là, il faut utiliser {% block content %} mais avec {% extends "base_content_page.html" %} :

{% extends "base_content_page.html" %}

{% block headline %}
    C'est un article !
{% endblock %}

{% block headline_sub %}
    A moins que ce soit un tutoriel...
{% endblock %}

{% block content %}
    <p>
        Bref, il y a encore et encore du contenu !
    </p>
{% endblock %}

Il peut arriver de devoir afficher d’autres types de contenus, comme des commentaires, en bas de la page. Dans ce cas là, on peut utiliser {% block content_after %} en plus :

{% extends "base_content_page.html" %}

{% block content %}
    <p>
        Bref, il y a encore, encore et encore du contenu !
    </p>
{% endblock %}

{% block content_after %}
    <p>
        Et là, paf, un autre type de contenu.
    </p>
{% endblock %}

Il existe une alternative à {% block content_after %} qui s’utilise de la même manière : {% block content_ext %}. La différence est minime, pour plus d’informations, regardez le fichier templates/base_content_page.html.

La barre latérale¶

La barre latérale contient des listes de liens, boutons ou formulaires permettant à l’utilisateur d’effectuer des actions.

Barre latérale de la page d’un profil

Pour la barre latérale, il faut étendre templates/base.html et utiliser {% block sidebar %} :

{% extends "base.html" %}

{% block sidebar %}
    Ma superbe barre latérale !
{% endblock %}

Pour les pages comme un tutoriel ou un article¶

Il faut étendre templates/base_content_page.html et utiliser {% block sidebar_actions %} :

{% extends "base_content_page.html" %}

{% block sidebar_actions %}
    La superbe barre latérale des articles ou tutoriels !
{% endblock %}

Tout comme les modules peuvent avoir leur propre gabarit de base, il peuvent avoir leur propre bloc pour la barre latérale :

{% extends "module/base.html" %}

{% block nom_du_bloc %}
    La superbe barre latérale de mon module !
{% endblock %}

Pour trouver le nom de ce bloc, regardez templates/module/base.html !

Le bas de page¶

Le bas de page est sûrement la partie la plus simple du site. Il contient trois flexboxs [1] :

celui de gauche affiche le nom du site ;
celui du milieu contient les liens vers les comptes des réseaux sociaux du site ;
celui de droite contient des liens vers les pages annexes du site, tel que les CGUs par exemple.

[1]	modèle de boîte flexible en HTML/CSS (voir le tutoriel sur Alsacréations)