Javascript, Jekyll et Github Page
Notre site web est un site web static sous Jekyll et heberger par Github Page. Nous allons voir comment intégrer du javascript à nos pages.
1) Pour cela, nous allons tout d’abord choisir une bibliotheque javascript pour notre projet. Dans notre cas nous utiliserons jQuery.Il existe deux manières integrer cette librairie à notre site, Soit nous téléchargeons le code source pour le placer à la racine du site, soit nous utilisons la version en ligne (mise à disposition par google), qui sera chargée à chaque chargement de notre page. Dans notre cas, nous allons choisir la deuxième solution qui a le mérite d’etre “généralement” mis à jour, cela nous evite aussi de surcharger notre dépot git.. Ainsi, pour que javascript soit compris par le navigateur il faudra ajouter au template html “default.html” (mais aussi n’importe lequel autre) et pour plus de clarté entre les balises et
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>2) Ensuite nous allons créer un sous-répertoire “_scripts” dans le dossier “_includes” situé à la racine de notre site.
mkdir -p _includes/_scripts3) Nous pouvons maintenant enregistrer notre script “mon_script.js” dans ce nouveau répertoire. Pour la démonstration, nous allons prendre un exemple de script ( provenant de w3schools.com :
<h1>Mon premier JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Cliquez pour afficher la date et l'heure.</button>
<p id="demo"></p>Pour insérer un script dans un template html :
4) Enfin, nous ajoutons l’adresse de ce script au temple html choisi pour cette page. Dans notre cas, nous voulons que ce script s’affiche dans le footer de toutes les pages associés aux template sélectionné. Ainsi, dans le répertoire “_layout”, nous ouvrons “default.htlm” et ajoutons entre les balises <footer>…</footer> la ligne suivante :
<h1>Mon premier JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Cliquez pour afficher la date et l'heure.</button>
<p id="demo"></p>
Jekyll utilise les templates Liquid pour organiser les pages. Dans ce formalisme, l’appel d’un script est particulier, on ne va pas utiliser les balises
Pour insérer un script javasript dans un post.
Les articles Jekyll utilisent le langage markdown. écrire :
<h1>Mon premier JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Cliquez pour afficher la date et l'heure.</button>
<p id="demo"></p>
ce qui va nous donner :