Fils RSS/backends mis en page avec xsl & css

Comment rendre lisible en ligne vos fils RSS, en générant du html à l’aide de xlst, mis en forme avec du CSS

Cette contrib a pour vocation de montrer comment vous pouvez rendre vos fils RSS lisibles en ligne. De la même manière que l’excellent pluggin pour firefox FeedView.

Deux exemples de l’utilisation de la méthode II sont disponibles ici :
http://www.cassiopea.org/backend.ph...
http://www.educa21.be/backend.php3?...

Méthode I : ajouter un css au xml

La méthode la plus simple pour styliser vos flux rss consiste à faire un appel vers une feuille de style en haut de votre fichier backend.html [1] :

<?php echo '<?xml version="1.0" encoding="#CHARSET"?>
<?xml-stylesheet type="text/css" href="chemin/xml.css" ?>'; ?>

Puis de créer une feuille de style CSS qui habillera le xml, par exemple :

Cette feuille de style permettra de mettre en forme les balises xml de votre fil rss avec toutes les potentialités du css, ce qui améliore déja de beaucoup l’affichage de votre flux. Le problème c’est que malgré la feuille de style, ce qui s’affiche dans le navigateur est toujours du xml, et vos titres ne seront donc pas cliquables. Pour cela il faut générer du html a partir du backend.

Méthode II : générer du html a partir du fil rss avec la technologie xsl

Installation rapide

  1. décompressez l’archive.
  2. copiez le répertoire /xml/ par ftp dans le répertoire ou vous avez installé spip
  3. ajoutez en haut de votre squelette backend.html l’appel à la feuille xsl, à l’aide de l’instruction suivante.
<?php echo '<?xml version="1.0" encoding="#CHARSET"?>
<?xml-stylesheet type="text/xsl"  href="xml/xml.xsl" ?>'; ?>

Personalisation & explications

Cette méthode vous permet de générer du html lors de l’affichage dans le navigateur, et donc de le mettre en forme selon vos souhait, comme n’importe quelle page web.

Pour cela il est nécessaire d’ajouter un appel vers le fichier xml en haut de votre backend :

<?php echo '<?xml version="1.0" encoding="#CHARSET"?>
<?xml-stylesheet type="text/xsl"  href="xml/xml.xsl" ?>'; ?>

Ensuite vous pouvez construire un fichier xsl qui va générer le html. Le langage xsl fonctionne un peu comme des boucles spip ;-). Voici un exemple de fichier xsl :

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/rss" >
<xsl:for-each select="channel">
    <html xml:lang="{language}">
    <head>
	<title><xsl:value-of select="title" /></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel='stylesheet' href='custom/style/xml/xsl.css' type='text/css'/>
    </head>
    <body>
    <div class="channel">
        <h1><a href="{link}"><xsl:value-of select="title" /></a></h1>
        <p class="descriptif_rss"><xsl:value-of select="description" /></p>
        <xsl:for-each select="item">
	     <div class="post">
		<a href="{link}" title="{description}"><xsl:value-of select="title" /> </a>
		<p class="descriptif"><xsl:value-of select="description" /></p>
	     </div>
        </xsl:for-each>
    </div>
    <hr />
    </body>
</html>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Il s’agit globalement d’une page html, dans lesquel des boucles vont être effectuées pour chaque « item » présent dans votre fichier backend. Voici une portion du code ci-dessus, qui montre assez clairement ces « boucles » :

<xsl:for-each select="item">
	<div class="post">
	<a href="{link}" title="{description}"><xsl:value-of select="title" /> </a>
	<p class="descriptif"><xsl:value-of select="description" /></p>
	</div>
</xsl:for-each>    

En haut de notre fichier xsl, nous avons bien entendu placé un appel vers une feuille de style css, pour habiller le code html produit, et le tour est joué !

Notes

[1n’oubliez pas de remplacer « chemin » par le chemin vers votre fichier css

Je n’ai pas testé sur tout les navigateurs existants, mais ca marche sous firefox & MSIE6

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom