Ressources Magic Makers

Blocks et widgets

Templates, blocks et widgets

Lorsqu’on crée un site internet, il y a beaucoup de points communs entre les différentes pages. On ne recrée pas à chaque fois toute la page en entière, et l’on ne fait pas non plus des copier-coller, ce serait bien trop compliqué si l’on veut faire des modifications. On utilise des templates.

Un template est un modèle de page que l’on peut réutiliser en changeant le contenu.

On peut également modifier et adapter certaines parties d’un template pour en créer un autre. Par exemple ici on a deux pages différentes qui utilisent le même template pour l’en tête et le menu.

Pour arriver à cela on a utilisé des blocks.

Un block est un espace dans un template qui sera modifié par d’autres templates. Ainsi à partir de notre template de base on a créé deux nouveaux templates, un pour chacune de nos pages !

Dans nos templates on peut aussi avoir des plus petites parties qui peuvent apparaître sur plusieurs pages, ou être répétés plusieurs fois. Cette fois encore on ne veut pas faire de copier coller, pour pouvoir tout modifier en une seule fois. Pour cela on utilise des widgets.

Un widget est un modèle d’un élément simple d’une page web que l’on peut modifier, utiliser plusieurs fois et retrouver sur différentes pages.

Voici par exemple des widgets de messages avec un titre ou encore de commentaire.

Les widgets peuvent être utilisés de manière plus générale pour créer notre page web pour des éléments comme le menu par exemple.

Créer un block

Pour utiliser un block on a besoin de deux pages HTML différentes:

    • la première qui est notre template de base qui contient tout ce que l’on veut afficher autour de notre block. (ci dessous nommée base-exemple.html )
    • la seconde, notre nouveau template, qui contient uniquement ce qu’il y a à afficher dans le block (ci dessous nommée block-exemple.html )

Voici un exemple de la syntaxe à utiliser pour créer un block sur chacune de ces deux pages

Attention à mettre le nom du bon template de base.

Lorsque tu veux afficher un template, c’est la page block-exemple.html que tu devras afficher.

Créer un widget

Pour utiliser un widget on a besoin de deux pages HTML différentes:

    • la première qui est notre page ou l’on veut insérer le widget (ci dessous nommée page-avec-widget.html )
    • la seconde, notre widget, qui contient uniquement le code du widget (ci dessous nommée block-exemple.html )

Voici un exemple de la syntaxe à utiliser pour créer un widget sur chacune de ces deux pages

Lorsque tu veux afficher un template, c’est la page-avec-widget.html que tu devras afficher.

Remarque:

Dans notre page-avec-widget, on peut aussi retrouver uniquement la ligne de code:

{% include "widget-exemple.html" %}

Selon ce que l’on veut faire on peut utiliser l’un où l’autre. L’ajout de with context permet au widget d’accéder aux variables de la page-avec-widget. Si tu n’as pas besoin de variables pour ton widget tu n’as pas besoin du context