Using XSLT to Style RSS Feed
Thu, 07 Apr 2022 05:30:00 -0600
XSLT is a styling language for XML. Upon first glance, this may seem odd. If you are just learning about XML, you know that XML is designed strictly for the transfer of data with the use of descriptive tags. Its counterpart HTML, on the other hand, is designed for marking up text. XSLT is a really nice feature that can avoid the "ugly" XML trees that show up when you visit someones RSS feed or Sitemap.
Styling an RSS feed
XSLT styling is a bit different than embedding CSS into HTML. XSLT style sheets are kept in a separate file with the .xsl file extension.
It is easier to understand this with an example. Take this simple RSS feed.
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<item>
<guid>https://domain.tdl/post1.html</guid>
<title>First Post</title>
</item>
<item>
<guid>https://domain.tdl/post2.html</guid>
<title>Second Post</title>
</item>
</channel>
<rss>To create a style sheet for this feed, I begin by creating a file called style.xsl. In this file, put the following:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/rss/channel">
<html>
<body>
<table>
<tr>
<th>Title</th>
</tr>
<xsl:for-each select="item">
<tr>
<td><xsl:value-of select="title"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>This is a lot of information to unpack, so lets break it down into parts. In the grand scheme, this when linked to in my original document, this style sheet will put the data from my RSS feed into a table with all of the titles of my posts.
In the first line, you will see that this is an XML file. Unlike a styling language like CSS, XSLT's syntax is not different from XML as CSS is to HTML. This means when a tag is opened, it must be closed. XSLT is very picky this way.
The following line opens up the xsl:stylesheet tag. This tells our document that we will be putting some style data in between. Note that this tag has some attributes. First we give the version, and next we establish an XML namespace in by calling the xmlns attribute with the appropriate prefix (xmlns:xsl).
We use namespaces so that we share a common vocabulary with other XML documents. Namespaces were created in order to standardize markup vocabulary, promote reuse, and avoid collision with other modules. More can be read here. Note that the URL is telling us the user that we will be using this document as a means to Transform data by styling it.
Next we will be calling the xsl:template tag with the match attribute. We give the match attribute some information about the documents hierarchy. Remember XML stores information in a strict hierarchy--the outermost tags being at the top. In our example, we are telling our document that it should be looking to style tags that fall inside of the channel tags, but since the channel tag falls underneath the rss tags, it is necessary to write a "path" to where we would like to start our styling.
After we have established were we want to start, we then put some good old HTML. Like a regular html document we open with the html and body tags. We then want to put our data in a table so we use the table tag with the appropriate table structure.
Then, we open up a sort of xsl for loop with the xsl:for-each tag. We then add the select attribute with an argument. In this case, we want to iterate over every "item" in our RSS feed (in this case, items being posts).
Between the loop tags, we then add some more HTML to keep our "items" properly formatted inside of our table. Then, in each table row and column, we would like to put the title of each post. We do this by using the xsl:value-of tag with the select attribute, and we choose what tag that falls under the item tag we would like to display. In this case, we have chosen title. Note that this is a self closing tag, and it is important that you use the forward slash.
Finally, we close each tag in the order that it came in, and we are all set to link it to our RSS feed! All you have to do is add the following line to your RSS feed document.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="path/to/style.xsl"?>
<rss version="2.0">
<channel>
<item>
<guid>https://domain.tdl/post1.html</guid>
<title>First Post</title>
</item>
<item>
<guid>https://domain.tdl/post2.html</guid>
<title>Second Post</title>
</item>
</channel>
</rss>I am an XSLT novice, and this only scratches the surface of what you can do, but I hope you learned something and avoided some of the beginner mistakes I made when stumbling into XSLT.