Une idée mûrie à point

 

 

Fruition est génial.

C’est un outil open-source qui permet de créer des sites web grâce à Notion. C’est ce qui rend ce site possible.

La plupart des gens l’utilisent pour ajouter des noms de domaines personnalisés à leurs pages Notion publiques (par exemple notion.sodomaineperso.com), mais il y a tellement de choses qu’on peut faire avec Fruition.

En voici quelques-unes.

Script personnalisé

 

En résumé, la façon dont Fruition fonctionne vient du fait de copier/coller un script pré-généré dans Cloudflare.

Le script a certaines variables que vous pouvez ajuster selon vos besoins.

Et oui, vous pouvez ajouter vos propres scripts dans la partie de la variable CUSTOM_SCRIPT.

A mon sens, y ajouter Google Analytics est indispensable.

Vous pouvez ajouter votre propre Javascript dans cette section mais en ce qui me concerne, c’est aussi là où j’ajoute du CSS personnalisé en utilisant les balises <style></style>, bien que je sois actuellement en train d’envisager de lier une feuille de style séparée à la place.

CSS personnalisé

 

Oui, vous avez bien lu.

Vous pouvez outrepasser le style de Notion par défaut grâce à votre propre CSS.

C’est un peu délicat car vous allez voir que la plupart des éléments HTML n’ont pas de classes et que ceux qui en ont sont les éléments communs récurrents comme les conteneurs et les fonds.

Heureusement, chaque contenu que vous ajoutez sur Notion a son propre identifiant unique (id) qui prend la forme de l’attribut ‘data-block-id’.

Vous pouvez donc faire référence à cet attribut unique dans le CSS afin de styliser certains élements de votre page Notion.

Si vous vous demandez comment est-ce qu’on trouve ces identifiants uniques (id) pour chaque bloc, vous pouvez lire la section Link to content de la documentation officielle ici.

Personnellement, je trouve qu’il est plus pratique d’utiliser la console des outils de développement du navigateur afin d’inspecter les éléments directement et de voir le 'data-block-id' pendant que je modifie la syntaxe CSS pour voir en temps réel ce que ça donne.

Ajoutez un Favicon et des Balises Meta

 

 

Vous pouvez aller encore plus loin et modifier le script Fruition afin d’ajouter votre propre Favicon et vos propres balises méta.

Ainsi, votre Favicon prend le dessus sur celui de Notion et le fait d’ajouter des balises méta pertinentes améliore la façon dont votre site est prévisualisé sur les réseaux sociaux.

Je n’irai pas trop en détail sur la façon dont j’y suis parvenu, mais j’ai ajouté mon propre script Fruition modifié en bas de la page afin que vous puissiez l’utiliser comme base et ainsi ajouter votre propre favicon et vos balises méta.

Fonction logique personnalisée

 

 

Mais bien sur vous pouvez passer un niveau supérieur en ajoutant des fonctions de logique au script Fruition.

Un exemple simple serait d’ajouter une fonction détectant l’heure à laquelle un visiteur se trouve sur votre site afin afficher un thème différent basé là dessus, comme un « mode nuit » automatique. J’ai testé de mon côté ce concept et ça a marché.

Vous avez compris l’essentiel ?

 

Voici mes propres modifications faites au script Fruition si jamais vous êtes intéressé(e)s.

Envoyez moi un message sur Twitter si jamais vous avez besoin d’aide ou bien laissez un message dans mon livre d’or.