Создание RSS-лент с возможностью просмотра из браузера

RSS-ленты стали наиболее популярным форматом передачи материала в последнее время. Существуют десятки RSS-клиентов, аггрегаторов, настольных и онлайн-приложений для просмотра лент. Но что насчет браузеров? Каждый день я совершаю одну и ту же ошибку: жму на ссылку “RSS-лента”, и мой браузер отображает XML-содержимое ленты. Почему нельзя просмотреть ее прямо в браузере?

В этой заметке я попытаюсь создать ленту, которая будет нормально отображаться как в браузере, так и в RSS-клиенте. Я буду использовать технологию XSLT 1.0 (так как мой Firefox не поддерживает XSLT 1.1).

Для начала нам нужна RSS-лента. Я взял ее на сайте digg.com в категории “программирование” (вы можете посмотреть на нее здесь). Лента содержит некоторые дополнительные поля в секции item (см. Спецификация RSS 2.0), что будет полезно для демонстрации того, как можно расширить мой пример.

<item>
  <title>Transparent PNG Images in IE</title>
  <link>http://digg.com/programming/Transparent_PNG_Images_in_IE</link>
  <description>Fellow digg user patrickweber commented w/ this URL. A
    javascript fix that passes off a transparent PNG to DirectX to
    render so IE can render PNG's. You can also do it with CSS via:
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
    sizingMethod=image src='imgurlhere');</description>
  <pubDate>Wed, 5 Apr 2006 02:26:44 GMT</pubDate>
  <guid isPermaLink="true">http://digg.com/programming/Transparent_PNG_Images_in_IE</guid>
  <digg:diggCount>650</digg:diggCount>
  <digg:submitter>
    <digg:username>kefs</digg:username>
    <digg:userimage>/userimages/kefs/medium.jpg</digg:userimage>
  </digg:submitter>
  <digg:submitter>kefs</digg:submitter>
  <digg:category>programming</digg:category>
  <digg:commentCount>90</digg:commentCount>
</item>

HTML-представление RSS-ленты должно содержать кнопки добавления ленты в различные онлайн-клиенты. Кроме того, необходимо предоставить пользователю краткие инструкции по использованию ленты. Мне нравятся дизайны, основанные на CSS, потому разметку страницы я размещу во внешнем CSS-файле.

<?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"/>

  <xsl:template match="/">
    <html>
      <head>
        <title><xsl:value-of select="/rss/channel/title"/></title>
        <link rel="stylesheet" href="digg.css" type="text/css"/>
      </head>
      <xsl:apply-templates select="rss/channel"/>
    </html>
  </xsl:template>

  <xsl:template match="channel">
    <body>
      <div class="topbox">
        <p>This is a <strong>RSS-feed</strong> from the <xsl:value-of select="title"/>
          website. RSS feeds allow you to stay up to date with the latest news and
          features you want from  <xsl:value-of select="title"/>. To subscribe to it,
          you will need a News Reader or other similar device.</p>
      </div>
      <div class="contbox">
        <div class="header">
          <div class="fltl">
            <span class="subhead">Blog for: </span>
          </div>
          <a href="#" class="item">
            <img height="15" hspace="5" vspace="0" border="0" width="32" alt="RSS" src="rss_feed.gif" title="RSS " align="left"/>
            <xsl:value-of select="title"/>
          </a>
          <br class="fltclear"/>
        </div>
        <div class="mainbox">
          <div class="itembox">
            <ul>
              <xsl:apply-templates select="item"></xsl:apply-templates>
            </ul>
          </div>
          <div class="subscrbox">
            <div class="padrhsbox">
              <h2>Subscribe to this feed</h2>
              <p>You can subscribe to this RSS feed in a number of ways, including
                the following:</p>
              <ul>
                <li>Drag the orange RSS button into your News Reader</li>
                <li>Drag the URL of the RSS feed into your News Reader</li>
                <li>Cut and paste the URL of the RSS feed into your News Reader</li>
              </ul>
              <h3>One-click subscriptions</h3>
              <p>If you use one of the following web-based News Readers,
                click on the appropriate button to subscribe to the RSS feed.
              </p>
              <a href="#" onClick="window.location='http://add.my.yahoo.com/rss?url=' + window.location;return false;">
                <img height="17" width="91" vspace="3" border="0" alt="my yahoo" src="myyahoo.gif"/>
              </a><br/>
              <a href="#" onClick="window.location='http://www.bloglines.com/sub/'+ window.location;return false;">
                <img height="18" width="91" vspace="3" border="0" alt="bloglines" src="bloglines.gif"/>
              </a><br/>
              <a href="#" onClick="window.location='http://www.newsgator.com/ngs/subscriber/subext.aspx?url='+ window.location;return false;">
                <img height="17" width="91" vspace="3" border="0" alt="newsgator" src="newsgator.gif"/>
              </a><br/>
              <a href="#" onClick="window.location='http://client.pluck.com/pluckit/prompt.aspx?GCID=C12286x053&amp;a=' + window.location + '&amp;t={title}';return false;">
                <img src="pluspluck.png" vspace="3" border="0" alt="Subscribe with Pluck RSS reader"/>
              </a><br/>
              <a href="#" onClick="window.location='http://www.rojo.com/add-subscription?resource=' + window.location;return false;">
                <img src="add-to-rojo.gif" vspace="3" border="0" alt="Subscribe in Rojo"/>
              </a><br/>
              <a href="#" onClick="window.location='http://fusion.google.com/add?feedurl=' + window.location;return false;">
                <img src="add-to-google-plus.gif" vspace="3" border="0" width="104" height="17" alt="Add to Google"/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </body>
  </xsl:template>

  <xsl:template match="item">
    <li>
      <a href="{link}">
        <xsl:value-of select="title"/>
      </a>
      <small> &#8212; <xsl:value-of select="pubDate"/></small>
      <br/>
      <div class="item_desc">
        <xsl:value-of select="description"/>
      </div>
    </li>
  </xsl:template>
</xsl:stylesheet>

Интегрировать XSLT-таблицу с RSS-лентой крайне просто. Просто добавьте следующую строку после <?xml … ?>:

<?xml version="1.0"?>
<?xml-stylesheet title="XSL_formatting" type="text/xsl" href="digg.xsl"?>

В начале я дал обещание показать, как можно обрабатывать специальные поля digg. В xsl:stylesheet необходимо добавить пространство имен digg:

<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:digg="http://digg.com//docs/diggrss/">

Обратите внимание, что URL содержит два слеша. Теперь можно использовать атрибуты:

<xsl:template match="item">
    <li>
      <a href="{link}">
        <xsl:value-of select="title"/>
      </a>
      <small>
        by <strong><xsl:value-of select="digg:submitter/digg:username"/></strong>
        &#8212; <xsl:value-of select="pubDate"/>
        (<xsl:value-of select="digg:diggCount"/> diggs)
      </small>
      <br/>
      <div class="item_desc">
        <xsl:value-of select="description"/>
      </div>
    </li>
  </xsl:template>

Вы можете посмотреть результаты здесь. Полные исходные коды доступны для загрузки.

Рекомендуемые книги

Источник: http://kpumuk.info/



Опубликовал admin
17 Окт, Среда 2007г.



Программирование для чайников.