Ajouter du CSS personnalisé via Fruition

Ajouter du CSS personnalisé via Fruition

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.

Utiliser Notion pour créer un site web

Utiliser Notion pour créer un site web

Il est possible d’utiliser Notion comme un « mini-CMS »,  afin de créer un site web très facile à maintenir.

Bien entendu, les fonctionnalités que l’on pourra retrouver sont limitées, donc cela peut convenir pour des landing pages, portfolios ou sites basiques.

Cependant, niveau SEO , force est de constater que les résultats ne seront pas probants. Rien ne vous empêche de tester et de voir si cela vous convient, au vu du bas coût que représente cette option.

Pour cela, vous avez le choix entre mettre les mains à la pâte vous-même (Fruition) ou bien choisir une solution payante (comme Super.so ou Potion).

L’idée est simple : le contenu est créé sur Notion, puis on le relie à notre nom de domaine et on peut y rajouter quelques fonctionnalités (polices personnalisées, certificat SSL, scripts, balises Google Analytics…).

Si vous décidez de suivre le tutoriel de Fruition, nous vous recommande tout de même d’avoir un minimum de compétences web ou bien d’avoir de la patience et de suivre méticuleusement les étapes indiquées.

Les voici en vidéo :  https://www.youtube.com/watch?v=aw0x54PzCaI

Si vous décidez d’utiliser une solution toute prête comme Super ou Potion, sachez qu’il existe désormais des templates qui vous permettent de changer totalement le design de la page Notion initiale.

 

Si vous avez des connaissances en CSS, il est tout à fait possible de reproduire ces changements via Fruition. D’ailleurs, vous pouvez remarquer sur la page « Showcase » de Fruition que quelques personnes l’ont déjà fait.

 

Vous utilisez déjà Notion comme CMS ?