Astuce – créer un tag personnalisé avec Hexo.io


Hexo.io est un framework nodejs permettant de créer un blog au même titre que wordpress…

Les billets et articles doivent être écrits avec le langage markdown. Une transformation est ensuite opérée pour convertir ce markdown en format .html, pour être interprétée ensuite dans un navigateur internet (Google Chrome, Firefox…).

Il existe plusieurs façons d’étendre hexo tels que : filtres, generator, helper et les tags.

Nous allons nous intéresser aux tags dans cet article.

Tag

Un tag est un bloc de code entouré des caractères suivants : { % et % } . Il est utilisé dans les billets ou les articles. Il permet d’ajouter des bouts de codes de façon simple.

Par exemple un tagfontawesome permet d’ajouter une icône .

Le code suivant :

{% fa refresh spin %}

Permet d’afficher l’icône :

{% fa refresh spin %}

Nous allons créer un tag googleads pour afficher un code Adsense. Comme ce blog utilise Google Adsense pour afficher des petites publicités 😉 cela tombe bien.

Il nous sera très facile ensuite d’ajouter une publicité à l’endroit où l’on veut dans un billet.

Manipulations

Créons un fichier google-adsense.js dans un dossier « scripts » de notre thème. Notre thème s’appelle miary . Il nous faut donc créer le fichier /themes/miary/scripts/google-adsense.js

Voici le contenu par défaut de ce fichier

hexo.extend.tag.register('googleads', function(args) {
    // Code here...
});
  • args : est un tableau array de tous les arguments passés au tag.

Les différentes options d’un tag peuvent être consultées ici: https://hexo.io/api/tag.html

Nous allons ajouter le code suivant dans la fonction

Le tag peut être ensuite utilisé comme ceci dans un billet

Et voila, on a notre publicité affichée de façon flexible.