Stylujeme vzhled RSS kanálu v prohlížeči pomocí XSLT

2. února 2006

•

V tomto článku si ukážeme, jak snadno můžeme učinit náš RSS kanál čitelný přímo v prohlížeči uživatele, a to i bez RSS čtečky nebo prohlížeče s podporou RSS. Ukážeme si také, jak může uživatel Windows takový kanál přímo sledovat na ploše.

Pokud na naší stránce zveřejníme přímý odkaz na RSS kanál (a můžeme jej také obohatit téměř standardizovanou ikonkou z Feed Icons), pak čtenář neznalý RSS, který na odkaz klikne, uvidí ve svém prohlížeči pouhý kód kanálu. Kód mu k ničemu není a navíc může mít i pocit, že máme na stránkách chybu. Protože se však v případě RSS jedná o klasický formát XML, jednoduše můžeme připojit šablonu XSLT a transformovat kanál do vzhledné podoby pomocí XSLT přímo v prohlížeči. Prohlédněte si ukázku (zdrojový kód).

Jak jsem uvedl, stačí ke XML dokumentu přidat element indikující, že má být na dokument před zobrazením aplikována transformace podle daného stylu, a prohlížeč se o tento proces postará sám. Ve druhém řádku kódu našeho RSS kanálu provedeme připojení stylesheetu transformace:

<?xml version=’1.0′ encoding=’UTF-8′?>
<?xml-stylesheet type=“text/xsl“ href=“RssChannel.xslt“ media=“screen“ ?>
<rss version=’2.0′>
<channel>
    <title>Interval.cz (články, RSS 2.0)</title>
    <link>http://interval.cz</link>
    <description>Interval.cz – webdesign a e-komerce denně</description>
    <language>cs</language>
    <copyright>Copyright 2006, Interval.cz</copyright>
    <managingEditor>redakce@interval.cz (Interval.cz)</managingEditor>
    <webMaster>redakce@interval.cz (Interval.cz)</webMaster>
    <pubDate>Sat, 14 Jan 2006 11:00:02 +0100</pubDate>
    <generator>Interval.cz Export Manager v3.1</generator>
    <docs>http://backend.userland.com/rss2/</docs>
    <ttl>60</ttl>
    <item>
      <title>Patrick Zandl: Využívání vysokorychlostního internetu brání jeho nízká dostupnost</title>
      <link>http://interval.cz/clanek.asp?article=4084</link>
      <description>Přinášíme vám rozhovor s Patrickem Zandlem – předním českým odborníkem na telekomunikace a velkou osobností českého internetu. Koncem minulého roku jsme si popovídali o příchodu mobilních sítí třetí generace a jejich vlivu na dostupnost připojení k internetu, internetové telefonii, problémech vysokorychlostního internetu, osudu českého WAPu, posledním Invexu a Digitexu a o jeho internetových projektech z minulosti i současnosti.</description>
      <category>Rozhovor</category>
      <comments>http://interval.cz/discussion-read.asp?disc=4084</comments>
      <pubDate>Wed, 04 Jan 2006 01:00:00 +0100</pubDate>
    </item>
    .
    .
</channel>
</rss>

Pokud takovýto kanál zobrazíme v prohlížeči, který podporuje XSLT, prohlížeč provede transformaci podle daného stylu a uživatel tak může vidět dobře vypadající stránku – můžeme v ní použít samozřejmě i CSS.

Standardní RSS čtečky připojený styl ignorují (alespoň já jsem se nesetkal s žádnou, které by se takto doplněný kanál nelíbil), takže kanál zůstane i po úpravě funkční.

Pro úplnost se ještě podíváme na soubor XSLT použitý v ukázce:

<?xml version=“1.0″ encoding=“UTF-8″ ?>
<xsl:stylesheet version=“1.0″ xmlns:xsl=“http://www.w3.org/1999/XSL/Transform“>
<xsl:output method=“html“ omit-xml-declaration=“no“ indent=“yes“ encoding=“utf-8″ media-type=“text/xml; charset=utf-8″ />
<xsl:template match=“rss/channel“>
    <html>
      <head>
        <title><xsl:value-of select=“title“/> – <xsl:value-of select=“lastBuildDate“/></title>
        <link href=“RssChannel.css“ rel=“StyleSheet“ type=“text/css“></link>
      </head>
      <body>
        <h1><a href=“http://interval.cz/“>Interval.cz – webdesign a e-komerce denně<span></span></a></h1>
        <div id=“content“>
          <h2><a><xsl:attribute name=“href“><xsl:value-of select=“link“/></xsl:attribute><xsl:attribute name=“onclick“><xsl:text>return !window.open(this.href);</xsl:text></xsl:attribute><xsl:value-of select=“title“/></a></h2>
          <p><xsl:value-of select=“description“ disable-output-escaping=“yes“ /></p>
          <hr />
          <xsl:for-each select=“//item“>
            <h3><xsl:attribute name=“title“><xsl:value-of select=“pubDate“/></xsl:attribute><a><xsl:attribute name=“href“><xsl:value-of select=“link“/></xsl:attribute><xsl:attribute name=“onclick“><xsl:text>return !window.open(this.href);</xsl:text></xsl:attribute><xsl:value-of select=“title“/></a></h3>
            <p><xsl:value-of select=“description“ disable-output-escaping=“yes“ /></p>
          </xsl:for-each>
        </div>
      </body>
    </html>
</xsl:template>
</xsl:stylesheet>

Výsledný XHTML kód si samozřejmě každý může upravit, v definici XSLT chci jen upozornit na nastavení xsl:output, připojení souboru CSS elementem link a také na to, že odkazy jsou nechány ohleduplným způsobem otvírat do nového okna.

Vhod může být také to, že takto nastylovaný kanál si může uživatel Windows přidat jako Aktivní kanál na plochu a sledovat novinky na vaší stránce i bez RSS čtečky, čímž si vlastně vyrobí RSS čtečku přímo na ploše svého monitoru.

Na závěr ještě uvádím odkazy na naše kanály, pomocí nichž jsem také vytvořil ukázku ke článku: