A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 3.8KB

3 years ago
12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. title: How to style RSS feed
  2. url: https://lepture.com/en/2019/rss-style-with-xsl
  3. hash_url: 40d98edeb7835abd7f9d4c1917e3ea5c
  4. <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>
  5. <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>
  6. <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>
  7. <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>
  8. <div class="md-block blockquote"><blockquote><p>But how can we make a RSS feed look like the above UI?</p>
  9. </blockquote></div>
  10. <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>
  11. <div class="highlight"><pre><span></span><span class="cp">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span>
  12. <span class="cp">&lt;?xml-stylesheet href="/rss.xsl" type="text/xsl"?&gt;</span>
  13. <span class="nt">&lt;rss</span> <span class="na">version=</span><span class="s">"2.0"</span><span class="nt">&gt;</span>
  14. </pre></div>
  15. <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>
  16. <p>Next, we can inspect the source code of <code>rss.xsl</code>:</p>
  17. <div class="md-block pre"><pre><code>view-source:https://lepture.com/rss.xsl</code></pre></div>
  18. <h2 id="toc_2" class="md-block">XSL Template</h2>
  19. <p>Here is an overview of the XSL file:</p>
  20. <div class="highlight"><pre><span></span><span class="cp">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
  21. <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>
  22. <span class="na">xmlns:atom=</span><span class="s">"http://www.w3.org/2005/Atom"</span><span class="nt">&gt;</span>
  23. <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>
  24. <span class="nt">&lt;xsl:template</span> <span class="na">match=</span><span class="s">"/"</span><span class="nt">&gt;</span>
  25. ...
  26. <span class="nt">&lt;/xsl:template&gt;</span>
  27. <span class="nt">&lt;/xsl:stylesheet&gt;</span>
  28. </pre></div>
  29. <p>Things to do:</p>
  30. <div class="md-block list"><ol>
  31. <li>XML namespaces: register the required namespace when you need to select it via xpath.</li>
  32. <li>XSL template: create the UI in XHTML</li>
  33. </ol></div>
  34. <h2 id="toc_3" class="md-block">XSL Methods</h2>
  35. <p>We will use some XSL methods to create our XHTML template:</p>
  36. <div class="md-block list"><ol>
  37. <li><code>xsl:if</code></li>
  38. <li><code>xsl:for-each</code></li>
  39. <li><code>xsl:attribute</code></li>
  40. <li><code>xsl:value-of</code></li>
  41. </ol></div>
  42. <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>