|
12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- 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"><?xml version="1.0" encoding="UTF-8"?></span>
- <span class="cp"><?xml-stylesheet href="/rss.xsl" type="text/xsl"?></span>
- <span class="nt"><rss</span> <span class="na">version=</span><span class="s">"2.0"</span><span class="nt">></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"><?xml version="1.0" encoding="utf-8"?></span>
- <span class="nt"><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">></span>
- <span class="nt"><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">/></span>
- <span class="nt"><xsl:template</span> <span class="na">match=</span><span class="s">"/"</span><span class="nt">></span>
- ...
- <span class="nt"></xsl:template></span>
- <span class="nt"></xsl:stylesheet></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>
|
