2.3 KiB
| title | date | draft | description | featured | toc | comments | categories | tags | ||
|---|---|---|---|---|---|---|---|---|---|---|
| Prettify Hugo Rss Feed Xslt | 2024-04-29 | true | This is a new post about... | false | true | true | Backstage |
|
I put in some work several months back making my sure my site's RSS would work well in a feed reader. This meant making a lot of modifications to the default Hugo RSS template. I made it load the full article text rather than just the summary, present correctly-formatted code blocks with no loss of important whitespace, include inline images, and even pass online validation checks:
But while the feed looks great when rendered by a reader, the browser presentation left some to be desired...
It feels like there should be a friendlier way to present a feed "landing page" to help users new to RSS figure out what they need to do in order to follow a blog - and there absolutely is. In much the same way that you can prettify plain HTML with the inclusion of a CSS stylesheet, you can also style boring XML using eXtensible Stylesheet Language Transformations (XSLT).
This post will quickly cover how I used XSLT to style my blog's RSS feed and made it look like this:
Starting Point
The RSS Templates page from the Hugo documentation site provides some basic information about how to generate (and customize) an RSS feed for a Hugo-powered site. The basic steps are to enable the RSS output in hugo.toml, include a link to the generated feed inside the <head> element of the site template (I added it to layouts/partials/head.html), and (optionally) include a customized RSS template to influence how the output gets rendered.