Darkoneko's Weblog

Yesterday, today, and no future / time waits for no one

Personnalisons Wikipédia : ajouter des liens

Posted by DarkoNeko sur mardi 30 juin 2009

Ce billet fait partie de la série “Personnalisons Wikipédia“.

La personnalisation d’aujourd’hui vous permettra d’ajouter des liens dans le menu de gauche de l’interface de Wikipédia, à l’aide de quelques lignes de JavaScript. Ceux qui ne veulent pas d’explications trouveront le code tout en bas de la page.

Commençons par quelques notions de base

Comme nous l’avons vu lors de précédents billets, le HTML est une structure en arbre composé de balises imbriquées les unes dans les autres. le JavaScript, tout comme le CSS, permet de modifier des éléments HTML à partir de leur type, de leur identification, ou de leurs positions dans l’arbre.

il est recommandé d’avoir des notions dans un quelconque langage de programmation, mais vous trouverez les bases sur Wikibooks et Wikiversity.

Pour être honnète, je pense qu’un partie d’entre vous va trouver ça beaucoup plus compliqué que mes billets sur le CSS.

Il y a deux types d’écriture :

  • l’écriture normale
  • L’écriture condensée

L’écriture condensée permet d’effectuer une série d’actions (ou l’action n+1 a besoin du retour de l’action n) sur une seule ligne.

dans l’exemple suivant, je veux modifier le texte contenu dans le premier lien de la page.

var a = document.getElementsByTagName("a") //recuperer la liste des liens de la page (tableau)
var a_first = a[0] // le premier lien de la liste
var a_text = a_first.firstChild // le node contenant le texte dans ce lien
a_text.nodeValue = "liaison" // remplacer son contenu par "liaison"

Ce code peut aussi s’écrire en condensé :

document.getElementsByTagName("a")[0].firstChild.nodeValue = "liaison"

J’utiliserai généralement la deuxième version.

Le code HTML du menu de gauche est disponible dans ce billet, je ne le détaillerai donc pas ici.

Passons au code

Fonctions personnalisées ?

Pour me faciliter la vie, je me suis créé quelques fonctions. Pour vous faciliter la vie, nous nous servirons de l’une d’elles :)

Cette fonction est createLiAdressNode(). Elle encapsule :

  • La création d’un node texte (le texte que le lien affichera)
  • La creation d’un node ‘a’ (un lien)
  • L’affectation d’une adresse à la propriété « href » du lien.
  • La mise de ce node texte dans le lien
  • la création d’un node ‘li’ (car le menu de gauche est constitué de listes à points)
  • La mise du node ‘a’ dans le node ‘li’

et nous retourne ce node ‘li’

En plus compréhensible, elle créée ce qui correspond au code HTML suivant :

<li>
   <a href="lien">
        texte du lien
   </a>
</li>

(elle permet en réalité plus de choses, mais Le comportement qu’on lui demande fera ça)

Sa syntaxe est

createLiAdressNode(adresse, texte du lien)

le code en lui même

Tout d’abord, importons le fichier contenant createLiAdressNode()

importScript('Utilisateur:Darkoneko/divers.js')

Le code en lui-même sera placé dans une fonction

function addLinksInLeftBar() {
    //ici notre code
}

Je veux ajouter des liens en bas du menu navigation.

En pratique, cela veux dire « je veux ajouter des balises <li> (contenant chacune un lien) qui se trouveront dans le premier <ul> situé dans l’élement ayant l’id p-navigation ».

<div id="#p-navigation">
  (...)
  <ul>
     <li>...</li>
     <-- c'est à dire ici pour ceux qui ont du mal à suivre :)
  </ul>
  (...)
</div>

Récuperons donc le « <ul> » dans lequel nous stockerons nos balises <li>.

var ul = document.getElementById("p-navigation").getElementsByTagName("ul")[0]

Ensuite, ajoutons lui les liens+li que l’on veux.

  • « appenchild() » est la méthode qui permet d’ajouter des « fils » dans d’une balise (à la suite des éventuels existants). En l’occurence, nos balises <li>
  • b=fonction1( fonction2() ) est l’equivalent de a=fonction1() suvi de b=fonction2(a)
ul.appendChild( createLiAdressNode( '/wiki/Wikipédia:Wikimag_de_la_semaine', 'Wikimag') )
ul.appendChild( createLiAdressNode( 'https://darkoneko.wordpress.com/' , 'mon blog à moua' ) )
ul.appendChild( createLiAdressNode( '/wiki/Wikipédia:Bot/Requêtes/Mensuel', 'Requêtes bot' ) )

Et pour finir, il faut indiquer que notre fonction doit être chargée au démarrage de la page. MediaWiki fournie une fonction dédiée pour ce faire :

addOnloadHook(addLinksInLeftBar)

Notre code final, celui que vous pouvez ajouter dans votre monobook.js,  est donc :


importScript('Utilisateur:Darkoneko/divers.js')

function addLinksInLeftBar() {
     //ajouter des liens en bas de la boite "navigation"
     var ul = document.getElementById("p-navigation").getElementsByTagName("ul")[0]
     ul.appendChild( createLiAdressNode( '/wiki/lien_1', 'texte 1')  )
     ul.appendChild( createLiAdressNode( '/wiki/lien_2', 'texte 2')  )

    //ajouter des liens en bas de la boite "contribuer"
     var ul2 = document.getElementById("p-Contribuer").getElementsByTagName("ul")[0]
     ul2.appendChild( createLiAdressNode( '/wiki/lien_3', 'texte 3')  )
     ul2.appendChild( createLiAdressNode( '/wiki/lien_4', 'texte 4')  )
    //etc...
}

addOnloadHook(addLinksInLeftBar)

NB: n’oubliez pas que le menu de gauche étant visible depuis la page d’édition, il vous suffit de prévisualiser pour voir le resultat de votre code.

Publicités

10 Réponses to “Personnalisons Wikipédia : ajouter des liens”

  1. X-Javier said

    Mais heu… Je viens de le mettre ton code pour juste le Wikimag. Il s’affiche uniquement quand on est en modif sur une page ? c’est normal (ou bien c’est encore le cache)

  2. Ælfgar said

    Merci !

  3. DarkoNeko said

    N’hesites pas à l’appliquer dans ton monobook, dans ce cas

  4. Diti said

    Impeccable, crois-le ou non, c’est le premier tutoriel Javascript que je comprends (bon, là en même temps, c’est pas des exemples à la con parce que ça sert).

  5. DarkoNeko said

    Pour préciser ma réponse, donc si un gadget ajoute un lien, et que le monobook en ajoute d’autre, alors (si mon raisonnemment plus haut est juste) le lien du gadget apparaitra en premier suivi de ceux du monobook.

  6. « Mais ça n’a pas de raison d’arriver » – tu connais la loi de Murphy? ^^

  7. popowiki said

    Je trouve ça beaucoup plus compliqué que tes billets sur le CSS.

    Mais ça reste compréhensible.

    Question: certains gadgets permettent déjà de modifier ou d’ajouter des liens à gauche. Est-ce qu’il y a possibilité de conflit (genre on ré-attribue deux fois le premier lien, une fois avec son monobouc et une fois avec les gadgets), et si oui qui est-ce qui « gagne » ce conflit (et a priorité)?

    • DarkoNeko said

      Miaou

      Je pense que le monobook personnel est la derniere chose executée (notamment pour que le CSS perso ai priorité sur ce lui du site ou autres gadget), donc le code des gadgets serait executé en premier (mais il faudrait que je vérifie)

      Je ne vois pas de conflit possible pour le code que j’ai utilisé plus haut, SAUF si un autre script change l’id sur lequel on se base pour l’ajout (car du coup, notre code ne trouverait pas ou écrire) – Mais ça n’a pas de raison d’arriver :)

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s