Afficher votre flux RSS mis en forme grâce à XSL

Lorsqu'un visiteur affiche le flux RSS de votre site dans son navigateur, celui-ci le présente sous forme d'arborescence structurée (comme tout document XML affiché dans un navigateur). Cet affichage, assez rebutant, surprend l'utilisateur bêta peu familier des documents XML.

Afin de proposer une lecture claire et agréable de vos flux RSS, ceux-ci peuvent être affichés comme de simples pages HTML grâce à la combinaison de deux feuilles de style différentes :

une feuille de style XSL qui contient les règles de transformation XML en HTML
une feuille de style CSS qui contient les informations de mise en forme et présentation (polices, couleurs, ...)

Le langage XSL (dit aussi XSLT), par une série de règles de transformation, remplace les éléments XML et leurs attributs en balisage HTML. Permettant simplement le contrôle de l'affichage des données à l'écran, ces règles ne modifient en rien votre document RSS. Un processeur XSL installé sur l'ordinateur client (dans le navigateur) se charge de transformer la source XML (ici le fichier RSS) en conjonction avec la feuille de style XSL.

Voici par exemple le même fichier RSS 2.0 en version classique et avec mise en forme.

Utiliser la feuille de style XSL de BelRSS

La feuille de style XSL peut s'appliquer à n'importe quel flux RSS 0.9x ou 2.0 à condition que celui-ci soit correctement construit et respecte les standards. Il vous suffit de l'attacher au document XML qui contient votre flux.

L'appel à la feuille de style XSL doit être inséré entre la déclaration XML et l'élément racine <rss version="."> . Le reste du document ne subit aucune modification.

<?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/xsl" href="http://belrss.monrezo.be/rss2htm.xsl"?> <rss version="2.0">

NB : le format RDF ou RSS 1.0 n'accepte pas cette feuille de sytle car la structure du fichier XML est tout à fait différente.

Créer votre propre transformation XSL

Voyons comment la feuille de style XSL ci-dessous va transformer votre fichier RSS en une page HTML, plus lisible pour l'utilisateur.

Un fichier de transformation XSL est, lui-même, un document XML. La première ligne est donc une déclaration XML.
Elle est suivie par la balise <xsl:stylesheet> , élément racine de la feuille de style XSL qui définit la version du langage utilisé. Ces deux premières lignes, étant communes à toutes les feuilles de style XSL, ne nécessitent aucune adaptation de votre part.
<xsl:stylesheet> contient l'élément <xsl:template> . Par le biais de son attribut match, il indique à quelles parties du document XML s'appliqueront les transformations.
Nous écrivons maintenant les instructions d'affichage proprement dites en utilisant des balises HTML. Toutes les balises HTML peuvent être employées au sein des éléments de transformation XSL. Néanmoins, le balisage HTML doit correspondre à celui de la version 4.0 du langage, et donc, être parfaitement structuré.
Nous commençons donc par l'élément <html> , suivi de <head> , <body> , . comme pour un fichier HTML classique. A l'intérieur de ces balises HTML se trouvent les instructions XSL qui déterminent les nouds à afficher. C'est ici que vous pouvez choisir d'attacher une CSS. Comme dans un fichier HTML, elle s'attache via la balise <link rel="stylesheet" href="..." type="text/css" /> placée entre les balises <head></head>.
Par exemple, dans <h1></h1> est affiché le contenu du noud <title></title> du flux RSS grâce à l'élément <xsl:value-of> qui permet d'extraire la valeur d'un noeud sélectionné dans l'arborescence d'un document XML. <h1><xsl:value-of select="title"/></h1>
L'élément <xsl:for-each> permet d'appliquer des règles de style sur chaque noeud identique d'un template. Pour chaque noud <item> du flux RSS, nous avons ici créé un <div class="item"> dans lequel nous afficherons les nouds <date></date> , <description></description>, <link></link> , . grâce à l'élément <xsl:value-of>.
A la fin du document, n'oubliez pas de refermer les balises HTML ouvertes ainsi que </xsl:template> et </xsl:stylesheet>.

<?xml version="1.0" encoding="UTF-8"?>
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
  <xsl:template match="rss/channel">
 
    <html>
 
      <head>
 
        <title><xsl:value-of select="title" /></title>
 
        <link rel="stylesheet" href="http://belrss.monrezo.be/css/belrss.css" type="text/css" />
 
      </head>
 
      <body>
 
        <h1><xsl:value-of select="title" /></h1>
 
        <div class="item"> 
 
        <xsl:for-each select="item">
 
          <h2><xsl:value-of select="title" /></h2> 
 
          <p><xsl:value-of select="description" /></p> 
 
          <p><a href="{link}"><xsl:value-of select="link" /></a></p>
 
          <p class="pubdate" ><xsl:value-of select="pubDate" /></p>
 
        </xsl:for-each> 
 
        </div> 
 
      </body> 
 
    </html> 
 
  </xsl:template> 
 
</xsl:stylesheet>

Télécharger le fichier source rss2htm.xsl

En savoir plus

www.w3schools.com/xsl/ : Tutoriaux, exemples, .
www.w3.org/Style/XSL/ : Recommandations XSL Transformations (XSLT) 1.0 du W3C (-> http://xmlfr.org/w3c/TR/xslt/ traduction française)
www.xmlfiles.com/xsl/ : Explication du processus de transformation et description des éléments XSL et XSLT

Top |