E-JAMBON bio photo

E-JAMBON

Ce qui se conçoit bien s'exprime clairement.

Email Twitter Github

Je l’avais fait pour prendre des notes lors d’un cours sur jquery. Et bien sûr, je n’avais pas documenté. Et j’ai perdu un bon quart d’heure à le retrouver. Alors je le pose ici.

Donc dans Jekyll (dans la v3 et la v2 en tout cas), chaque article dispose de son propre en-tête. Je veux ajouter une référence vers un css et un javascript à charger spécifiquement, c’est donc là que je vais l’indiquer.

Voilà à quoi ça va ressembler :

---
layout: post
title: Jekyll, Comment Avoir Un Javascript Et Un Css Spécifique à Une Page
modified:
categories: jekyll
excerpt: Si vous utilisez Jekyll, vous avez peut-être eu besoin de mettre un css ou un javascript spécifique sur un post. Voilà comment j'ai fait.
extra_css: 
    - css_specifique.css
extra_js:
    - javascript_specifique.js
---

Dans l’arborescence de Jekyll, vous trouverez un répertoire “assets”.
C’est là que se trouvent les scripts (javascript en particulier) et les feuilles de style (css) utilisées dans vos pages.

Un CSS spécifique à un article

Dans mon répertoire css, je crée là un sous-répertoire ‘postspecific’. J’y dépose mon css spécifique “css_specifique.css”

Dans mon répertoire “_includes”, je trouve mon “head.html”. J’y ajoute ces quelques lignes entre les balises head >:

        <head>
            { % for css_name in page.extra_css % }
                <link rel="stylesheet" href="http://ici.e-jambon.com/css/postspecific/">
            { % endfor % }
        </head>
    

Note Il n’y a pas d’espace entre les % et les { }.

Ce code permet donc de charger, dans le head de votre page html, les liens vers les css que j’ajoute dans mon entête d’article. Dans le présent article, en particulier, il n’y en a qu’un :

extra_css: 
        - css_specifique.css

NB : Je parle de Jekyll par défaut. Si vous avez utilisé un modèle pour personnaliser votre installation, il est probable que la balise “head” ne soit plus dans ce même fichier. A vous de voir où c’est (les outils de recherche sont des amis).

Testons la feuille de style

Voici le contenu, un peu complexe je vous le concède, de ma feuille de style : .grosmoche { border : 3px; background-color: yellow; }

Et voilà le html que j’inclus ci-dessous :

    <html>
        <div class="grosmoche">
            <p> Quand je suis malin, je tiens à ce que ça se voit.</p>
        </div>
    </html>

Quand je suis malin, je tiens à ce que ça se voit.

Un Javascript spécifique à un article

Devinez … c’est la même idée. Je crée un répertoire “javascript” à la racine de mon site (il n’y en a pas, par défaut). Dans ce répertoire, je crée un répertoire “postspecific”, où je déponse mon fichier “javascript_specifique.js”.

Ceci étant fait, dans le fichier _include/head.html je fais ma modification pour pouvoir l’appeler :

    <head>
    
        { % for js_name in page.extra_js % }
            <script type='text/javascript' src="http://ici.e-jambon.com/javascript/postspecific/"></script>
        { % endfor % }
    
    </head>

Note : Même remarque. Pas d’espace entre % et les { }

Voilà, c’est tout. Normalement, si je me suis pas gouré (l’idée y est), ça devrait marcher. Remarquez ma configuration est très différente. Donc je teste de suite.

Testons le javascript

Voici le code javascript super élaboré que je teste dans cette page :

function boom(){
  alert('Boom !');  
}
}

Et je l’appelle ci-dessous en créant un bouton en mettant du code html dans ma page :

    <html>
    <input 
        id= "bouton_danger"
        type="button" 

        value="Détonateur">
    </html>

Bon… Testez si le coeur vous en dis.