SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 164 visiteurs en ce moment

Accueil > Interactivité, échanges > Syndication > Archives Syndication > Fils RSS/backends mis en page avec xsl & css

Fils RSS/backends mis en page avec xsl & css

9 juin 2005 – par Simon – 11 commentaires

0 vote

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é !

P.-S.

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

Notes

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

Dernière modification de cette page le 27 août 2005

Retour en haut de la page

Vos commentaires

  • Le 24 mai 2006 à 14:10, par bertrandmac En réponse à : Fils RSS/backends : Changer la redirection des liens vers les articles

    Bonjour !

    Ne sachant pas si je poste dans le bon forum je m’en excuse d’avance.

    Mon site : un squelette avec frames et boutons sous flash qui fonctionne très bien (merci spip 1.8.3 ! ;)

    Mon problème : Le flux RSS du lien
    feed ://www.monsite/backend.php3
    répertorie les articles modifiés oki.
    Mais si je clique sur les liens je suis redirigé vers l’article (et l’article seul)

    Ce que je voudrais : Que les liens des articles du flux RSS redirige systématiquement vers ma page d’accueil.

    Ma question : Savez-vs quel fichier et comment je dois modifier le code ?

    Merci d’avance pour toute contribution

    Max

    Répondre à ce message

  • Le 9 juin 2005 à 15:40, par Emmanuel En réponse à : > Fils RSS/backends mis en page avec xsl & css

    Très intéressant comme tutoriel pour manipuler mon premier fichier xsl. Merci

    une petite correction, dans le fichier xsl, le lien sur la feuille de style n’est pas :

    href=’custom/style/xml/xsl.css’

    mais :

    href=’xml/xsl.css’

    • Le 28 novembre 2005 à 16:11, par Das En réponse à : > Fils RSS/backends mis en page avec xsl & css

      Cette contrib m’interresse au plus haut point, dans le sens où j’ai souvent affaire à des personnes qui ne connaissent pas l’existence de feed reader.

      J’avais par contre un soucis en faisant un copier/coller de l’entête.
      J’ai donc fait une recherche sur le format xsl et j’ai fini par faire le lien légèrement différement vers le fichier xsl dans mon backend.html

      <?php
              @header('Content-type: text/xml[; charset=(#CHARSET)]');
              echo '<'.'?xml version="1.0" encoding="#CHARSET"?'.">\n";
              echo '<?xml-stylesheet type="text/xsl" href="xml/xml.xsl"?>';
      ?>

      Avec cette entête, j’ai réussit à afficher la mise en forme du fil rss que je n’affichait pas avec l’entête que vous proposez.
      j’obtenais une horrible page avec uniquement le contenu sans retour chariot, sans mise en forme, rien...

      Si cette manip peut servir à quelqu’un... ;-)

    • Le 28 novembre 2005 à 16:33, par Simon En réponse à : > Fils RSS/backends mis en page avec xsl & css

      Amusante coincidence, je travaillait a l’export de ma contrib pour wikini, et j’étais bloqué par un problème de charset, résolu par ta manip.

      Après renseignements, il semblerais en effet qu’il est important de spécifier le charset dans le header(), sans quoi le navigateur prend le charset préféré du navigateur...

    Répondre à ce message

  • Le 19 juin 2005 à 00:13, par ? En réponse à : > Fils RSS/backends mis en page avec xsl & css

    B’jour, Est-il possible de récupérer le code qui génère la petite fenètre « Cette page est un flux de syndication destiné à être inclus dans un agrégateur rss ou un autre site web
    (...) »

    • Le 24 juin 2005 à 12:50, par Simon En réponse à : > Fils RSS/backends mis en page avec xsl & css

      C’est une combinaison de plusieurs codes :

      1. ajouter <textInput><:texte_syndication:><textInput> dans backend.html, dans les éléments propres à l’ensemble du flux. exemple :

              <title>[(#NOM_SITE_SPIP|textebrut|texte_backend|entites_html|entites_unicode)]</title>
              <link>#URL_SITE_SPIP</link>
              <language>#LANG</language>
              <textInput><:texte_syndication:></textInput>
              <description>[(#DESCRIPTIF|textebrut|texte_backend)]</description>

      2. ajouter 'texte_syndication' => 'Cette page est un flux de syndication...', dans vos fichiers langues de spip (exemple local_fr.php3).

      3. ajouter dans le fichier xml.xsl, avant <xsl:for-each select="item">

                      <div id="menubox"><xsl:value-of select="textInput" /><br/>
                              (<a href="http://www.cassiopea.org/article26.html">...</a>)
                      </div>

      4. ajouter le style css dans xml.css :

      #menubox {
              width:200px;         
              -moz-border-radius:4px;
              border-radius:4px;
              float:right;       
              background: #f5f5f5 10px 10px no-repeat url('info.gif');                        
              border: 1px solid #ddd;                         
              padding: 10px  10px 10px 40px;                         
              font-size: 12px; color: #aaa;                         
              border-width: 0 1px 1px 0;                
              }

      Et voila !

    • Le 30 juin 2005 à 12:42, par ? En réponse à : > Fils RSS/backends mis en page avec xsl & css

      Merci je vais essayer de suite !

    Répondre à ce message

  • Le 9 juin 2005 à 19:38, par ? En réponse à : > Fils RSS/backends mis en page avec xsl & css

    Hello,

    Ca ne marche pas (testé sous spip 1.8.1 et firefox).

    Soyez plus précis svp , faut-il remplacer les lignes déjà présentes dans le backend.html :

    <?php
        
    @header('Content-type: text/xml[; charset=(#CHARSET)]');
        echo 
    '<'.'?xml version="1.0" encoding="#CHARSET"?'.">\n";
    ?>

    ou faut-il rajouter les lignes que vous indiquez en supplement ?

    Répondre à ce message

  • Le 13 juin 2005 à 05:25, par sveetch En réponse à : > Fils RSS/backends mis en page avec xsl & css

    Pour ceux qui ont besoin d’aide sur XSL, je vous conseille le labo de Zvon. Description de tout les méthodes, fonctions etc.. et des tests en ’live’.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Plugin Vidéo(s)

    23 novembre 2010 – 684 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support mobile, iPad, (...)

  • GIS 4

    11 août 2012 – 1419 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • SPIP Zen Garden

    12 novembre 2009 – 173 commentaires

    Le plugin Zen Garden, ou Jardin Zen, vous permet de gérer une galerie de thèmes pour votre site, et de changer très facilement de thèmes parmi les thèmes disponibles. Pré-requis Le jardin Zen nécessite d’utiliser un squelette comme le squelette Zpip (...)

  • SPIP 3, Agenda et FullCalendar

    6 août 2012 – 313 commentaires

    Depuis SPIP 3, l’affichage d’un agenda sous forme de calendrier par jour/semaine/mois à changé. Les filtres |agenda_memo et apparentés sont désormais obsolètes. Il en est de même pour les filtres agendafull_memo et apparentés du plugin Agenda. (...)

  • Agenda Fullcalendar facile

    29 octobre 2016 – 51 commentaires

    Dans un précédent article, nous expliquions comment afficher un agenda Fullcalendar sur son site avec le plugin agenda. Cependant, ceci nécessite des manipulation de squelettes, ce qui n’est pas toujours évident lorsqu’on débute. La présente (...)