Table des matières
Merge Tag
Les elements et blocs notion ne vous suffisent pas ?
Vous voudriez pouvoir ajouter librement le code ou les élèments HTML qui vous intéressent ?
C’est possible ! Voici comment faire.
Ajouter de l’HTML avec feather:HTML
- Créer un bloc de code dans notion (
/code)
- Choisir le type “HTML” (en haut à gauche) et mettre le code HTML dans le bloc. Ca donne quelquechose comme ceci 👇
- En haut droite du bloc, cliquer sur ‘Légende’ et mettre en légende
feather:HTML
- Charger la page d’article sur votre blog Feather : Et voilà !!! 👇
Exemples d’utilisation
Vous pouvez utilisez cette technique pour ajouter toute sorte d’élèment à votre page : Boutons, textes centrés,…
Alignement de texte
<p style="text-align: center;">
texte centré
</p>texte centré
<p style="text-align: left;">
texte à gauche
</p>texte à gauche
<p style="text-align: right;">
texte à droite
</p>texte à droite
Boutons
<a href="https://twitter.com/ThomasBuyle" 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" style="display: inline-flex">
Bouton Blanc
</a><a href="https://twitter.com/ThomasBuyle" class="inline-flex px-2 h-11 items-center justify-center rounded-lg border border-gray-400 bg-gray-500 text-gray-100 hover:text-white" style="display: inline-flex">
Bouton Sombre
</a>Feather utilise Tailwindcss et certains des ses classes sont donc utilisables dans votre code HTML (exemple:
bg-gray-500). Mais toutes les classes ne sont pas disponibles, uniquement celles utilisées par des élèment natifs de Feather.Animations avec Lottie
Vous pouvez aussi intégrer une animation avec le Web Player Lottie :
<script
src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js">
</script>
<lottie-player
src="https://assets9.lottiefiles.com/packages/lf20_PBgNop.json"
background="transparent"
speed="1"
style="width: 250px; height: 250px;"
loop controls autoplay>
</lottie-player>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.
.png)
Written by
Auteur fictif qui signent les articles à propos de Feather en français à la place de Thomas.
