
Styling an RSS/Atom feed with XSL
-
technology
On my blog I link to my RSS/Atom feed for the convenience of people who use a feed reader. However, since this is an XML document, clicking on the link could be confusing for web visitors. I had previously looked into adding styles to the XML document to make it less scary, but the feed structure isn’t very conductive to normal CSS styles.
I thought I was out of luck on a useless exercise until I saw a post from Hsiaoming Yang. XML provides essentially a templating language that allows creating an HTML document from a raw XML file. By selecting the data needed, you can create just about any view desired.
<!-- excerpt of feed.xsl -->
<section class="summary">
<h1><xsl:value-of select="atom:title"/></h1>
<p><xsl:value-of select="atom:subtitle"/></p>
<a>
<xsl:attribute name="href">
<xsl:value-of select="atom:link[@rel='alternate']/@href"/>
</xsl:attribute>
Visit Website →
</a>
</section>
The XSL in that document was written for a podcast RSS feed, so I wrote my own for an Atom feed. Since the XSL is independent of the data, it should work for most Atom feeds with only minor modifications needed. The key changes are adding a reference to the XSL to your feed file. Then adjust the XSL file for any missing data or styling changes you’d like.
<!-- start of feed.xml -->
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="/assets/feed.xsl" type="text/xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">
As powerful as XML is, it’s also not particularly developer friendly. I often found that if there was a syntax error or bad reference, the browser gave me almost no indication as to what was wrong. I ended up keeping my scope limited and not working too hard on styling since this isn’t a standard web page. That said, it felt like a usability win to be able to point lost visitors back to the main website in case someone does click on the feed link.
You can see the final product at www.ciccarello.me/feed.xml. Feel free to check out the commit for the full source.
Recent articles
Previous
Software takes more than “the right technology”
Carpenters have lots of tools to pick from. Drills, impact drivers, circular saws, and miter saws; each tool may be really good for a specific purpose and a great carpenter will know when to use each one. However, the best carpenter is not necessarily the one who uses the most...
-
technology
Next
Birding in 2020
2020 Trends After a year of international travel that triggered my re-entry into bird watching, 2020 was a much more restrained year. While life events and global lockdowns kept me in the US, I enjoyed refining my birding skills and focusing on more birding from home. As the stress of...
-
travel
birding