davidbgk
/
larlet-fr-david-cache

title: How to style RSS feed
url: https://lepture.com/en/2019/rss-style-with-xsl
hash_url: 40d98edeb7835abd7f9d4c1917e3ea5c

<p>"RSS is dead" every year; it will be dead in the next year again. But before the dead coming in next year, we can do something to make it dead in an elegant way.</p>
<p>RSS feed is meant to be used by machine (apps) not by human. But people may visit a feed link directly and shout out WTF is this.</p>
<p>The RSS feed however can be human friendly. Take an example of my blog's RSS feed. It is simple and clean, not so scary to ordinary people.</p>
<div class="md-photo"><figure><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://i.typlog.com/lepture/8424206380_291282.jpg" alt="My blog feed UI" title="My blog feed UI"><figcaption>My blog feed UI</figcaption></figure></div><h2 id="toc_1" class="md-block">XSL URL</h2>
<div class="md-block blockquote"><blockquote><p>But how can we make a RSS feed look like the above UI?</p>
</blockquote></div>
<p>We added this UI in <a href="https://typlog.com/">Typlog</a> recently. It is pretty simple with <a href="https://www.w3.org/Style/XSL/"><strong>xsl</strong></a>. I'm not going to explain XSL in this post, instead, we can quickly decorate our RSS feeds with the famous copy paste method.</p>
<div class="highlight"><pre><span></span><span class="cp">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
<span class="cp">&lt;?xml-stylesheet href="/rss.xsl" type="text/xsl"?&gt;</span>
<span class="nt">&lt;rss</span> <span class="na">version=</span><span class="s">"2.0"</span><span class="nt">&gt;</span>
</pre></div>
<p>Here you can see, the feed is styled by an external file <code>/rss.xsl</code>. Note here, instead of providing a shared URL <code>typlog.com/rss.xsl</code>, we are using a relative path here. Because it is required by some browsers for security reasons; we need to put the xsl file under the same domain, protocol and port with the RSS feed.</p>
<p>Next, we can inspect the source code of <code>rss.xsl</code>:</p>
<div class="md-block pre"><pre><code>view-source:https://lepture.com/rss.xsl</code></pre></div>
<h2 id="toc_2" class="md-block">XSL Template</h2>
<p>Here is an overview of the XSL file:</p>
<div class="highlight"><pre><span></span><span class="cp">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
<span class="nt">&lt;xsl:stylesheet</span> <span class="na">version=</span><span class="s">"3.0"</span> <span class="na">xmlns:xsl=</span><span class="s">"http://www.w3.org/1999/XSL/Transform"</span>
<span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;xsl:output</span> <span class="na">method=</span><span class="s">"html"</span> <span class="na">version=</span><span class="s">"1.0"</span> <span class="na">encoding=</span><span class="s">"UTF-8"</span> <span class="na">indent=</span><span class="s">"yes"</span><span class="nt">/&gt;</span>
  <span class="nt">&lt;xsl:template</span> <span class="na">match=</span><span class="s">"/"</span><span class="nt">&gt;</span>
    ...
  <span class="nt">&lt;/xsl:template&gt;</span>
<span class="nt">&lt;/xsl:stylesheet&gt;</span>
</pre></div>
<p>Things to do:</p>
<div class="md-block list"><ol>
<li>XML namespaces: register the required namespace when you need to select it via xpath.</li>
<li>XSL template: create the UI in XHTML</li>
</ol></div>
<h2 id="toc_3" class="md-block">XSL Methods</h2>
<p>We will use some XSL methods to create our XHTML template:</p>
<div class="md-block list"><ol>
<li><code>xsl:if</code></li>
<li><code>xsl:for-each</code></li>
<li><code>xsl:attribute</code></li>
<li><code>xsl:value-of</code></li>
</ol></div>
<p>Take a look at <code>https://lepture.com/rss.xsl</code>, follow the example. It is not hard to create a pretty UI for RSS feed.</p>