A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.md 3.8KB

il y a 3 ans
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>