Merge Tags

Merge Tag

Ce texte est la valeur de la propriété Merge Tag. Il est affiché ici grâce à la balise Ce texte est la valeur de la propriété Merge Tag. Il est affiché ici grâce à la balise {{merge_tag}}

Fonctionnement des merge tags

Qu’est ce qu’un merge tag ?

Les Merge Tags permettent de fusionner les propriétés d’une page de contenu avec ses propriétés.

Concrètement, lorsqu’il affiche la page ou l’article, Feather va remplacer les Merge Tags par la valeur de la propriétés correspondante. Ce sont donc des sortes de balises qui sont identifiées par Feather et qui permettent de créer des modèles ou squelettes de pages ou de contenu réutilisables entre plusieurs pages.

Comment créer un merge tag

Il faut d’abord créer une nouvelle propriété dans la base de données d’Articles de votre blog feather.

Ensuite, vous pouvez afficher la valeur de cette propriété dans votre article à l’aide d’une balise spéciale. La balise se compose du nom de la propriété entre des doubles accolades et mis au format code dans Notion. Attention : si le nom de la propriété contient des majuscules, elles doivent être mise en miniscules dans la balise. Et les espaces sont à remplacer par des _.

Par exemple, si la propriété est nommée Texte de Demo, sa balise sera {{texte_de_demo}}

Propriétés reconnues

Les types de propriétés suivants peuvent être utilisés comme merge tag :

Texte : Texte long ou court, avec ou sans effet de style.

Nombre : la valeur numérique du nombre sera affichée (non-formatée).

Sélection : La valeur sélectionnée sera affichée.

Etat : La valeur sélectionnée sera affichée.

Date : La date choisie sera affichée au format AAAA-MM-JJ - Mais pas l’heure.

Case à cocher : Si la case est cochée, ‘true’ est affiché. Si pas, c’est ‘false’

URL : L’adresse sera affichée (sans lien).

Adresse email : L’adresse sera affichée (sans lien).

Téléphone : Le numéro sera affiché (sans lien).

Formule : Le résultat sera affiché si c’est un texte.

Merge tags spéciaux

En plus des propriétés que vous ajoutez à votre page, il existe quelques merge tags spéciaux qui peuvent aussi être utilisées :

{{page_title}} sera remplacé par le titre de votre page. → Merge Tags

{{page_cover}} retourner l’adresse de l’image de couverture → https://images.unsplash.com/photo-1624979641604-f01368fab830?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy

{{page_icon}} retourne l’adresse de l’image de l’icône → https://fav.farm/🪄

Exemples de merge tags

J’ai ajouté à la base d’article de ce blog une propriété de type Texte que j’ai nommé ‘Merge Tag’. Je vais maintenant en afficher le contenu :

Ce texte est la valeur de la propriété Merge Tag. Il est affiché ici grâce à la balise {{merge_tag}}

Si vous ouvrez cette page dans Notion, vous verrez qu’elle ne contient pas ce texte mais une balise {{merge_tag}}. Le texte lui-même est repris en propriété de la page.

Une même propriété peut être affichée plusieurs fois à l’aide des merge tags. Son texte peut aussi être placé dans un bloc, au milieu d’un autre texte et avec des styles d’affichages différents.

Ici, nous allons le placer entre guillement, au milieu d’un bloc de citation : “Ce texte est la valeur de la propriété Merge Tag. Il est affiché ici grâce à la balise {{merge_tag}}" - Eddy Theur

Et ici en gras comme élèment d’une liste numérotée

Ce texte est la valeur de la propriété Merge Tag. Il est affiché ici grâce à la balise {{merge_tag}}

Astuces

Formater dates (et heures)

Vous pouvez également utiliser une formule pour afficher une date dans un autre format que le AAA-MM-JJ par défaut :

format(prop("maDate"), h:mm) # N'affiche que l'heure

Afficher du code HTML

Le code HTML est accepté dans les merges tags. Cela veut dire que vous pouvez créer des liens (<a href=…></a>), des images (<img src=… />) ou d’autres élèments HTML avec.

En couplant cette possibilité avec l’utilisation de formules, vous pouvez donc afficher dynamiquement des images ou des liens cliquables dans votre articles.

Via une formule

Image

Utilisez une formule pour placer un propriété de type URL qui re^rend le lien vers l’image un lien HTML :

"<img src=" + prop("imageURL") + " width=100% height=auto />"

Lien cliquable

Utilisez une formule pour placer un propriété de type URL dans un lien HTML :

"<a href=" + prop("monURL") + " > Cliquez-ici</a>"

Dans un bloc feather:HTML

Les bloc feather:HTML sont en fait des bloc de code Notion auquel il sufit d’ajouter la légende feather:HTML pour que leur contenu soit affichée comme du code HTML sur votre blog. Leur utilisation est expliquée en détail dans cet article : Ajouter de l’HTML

Vous pouvez aussi utilisez les merge tags à l’interieurs de ces blocs pour afficher du contenu dynamique.

Par exemple, un bloc de code comme celui-ci :

<div class="text-center" style="font-size: 120%; padding: 1em; background: #FEFEFE">
{{merge_tag}}
</div>

Sera afficher comme ceci :

Ce texte est la valeur de la propriété Merge Tag. Il est affiché ici grâce à la balise {{merge_tag}}

Vous pouvez donc utiliser des blocs de code comme ceux-ci pour afficher vos contenu dynamiquement :

Image

<img src="{{image_url}}" />

Lien sous forme de bouton

<a href={{lien_url}}" class="inline-flex px-2 h-11 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-900">
	Bouton blanc
</a>

⚙️

Cet article est en fait une page de base de données Notion.

Rendez-vous sur https://tbuyle.notion.site/Blog-d-exemple-6e541e432de4405ba31cdef05afeb8a8 pour voir comment tous le contenu de ce blog est géré depuis Notion.