Let's style our RSS feed! - ♺ ∙ Web Crafting Materials

schlime9k
Casual Poster ⚓︎

Forever personalising my profile
⛺︎ My Room
StatusCafe: schlime9k
iMood:

RSS:

Guild Memberships:

Artifacts:

Let's style our RSS feed!

« on: a Summer day »

INTRO
Hey all, schlime here! DanQ (big user, over a million subs) made a post on tha Forum about how to make an RSS feed, and it was a big hit with the netizens of Melonland because – let’s face it – RSS feeds are scary at first but once you start to learn it, it’s actually simple AF! But when people see that RSS feed, it’s gonna look like this…

https://file.garden/ami2FkDIMWpECBL8/Untitled.jpg

This looks so bad! I mean, sure it’s readable but I wanna style it up! How do we do that? With an XSL document!

WHAT DA FREAK IS XSL???
XSL (Extensible Stylesheet Language) is a style document for XML documents, similar to how CSS is a styling document for HTML documents. Basically, it’s a HTML and CSS document where the XML information is linked and shown. It seems complicated, but trust me when I say (and also show you in this tutorial) it’s easier than you think!

STEP 1: LINKING XSL TO XML
First, create a .XSL document, you can name it whatever, but I prefer to name it either “rss.xsl” or “style.xsl” just for simplicity sake. Then put this line here into your XML document, just below your starting line:
<?xml-stylesheet type="text/xsl" href="/style.xsl"?>
Just like how you link your CSS stylesheet in your HTML doc, you link the stylesheet to your XML document! Again, your HREF link might be different from mine, it could be in another folder with your CSS or be named different, just change it to what you need.

STEP 2: STARTING YOUR XSL
Now this is all the declaration you’ll need at the start of an XSL document:

Code

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">

I’ll break this down line-by-line so you understand what’s going on.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
This is basically just telling the browser / RSS reader this is an XML/XSL document.
<xsl:output method="html" encoding="UTF-8" indent="yes"/>
This line here states how the document should be shown. We want it to be shown as an HTML document, because we’ll be using HTML and CSS tags for simplicity.

STEP 3: HTML-IN' IT UP
Next, we’re just going to start making an HTML document!

Code

<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title><xsl:value-of select="rss/channel/title"/></title>
        <style>

Literally. We start to make an HTML page, because we’ll be linking the information from our XML document to make our RSS nice and pretty on a new webpage!

If you want, you can link another CSS page, but to make things far less complicated, I put my styling in the same document, in a <style> tag.

I’ll use my own RSS feed as an example (which you should subscribe to for awesome film reviews and blogs!) because it’s quite simple to follow along with.

Code

<div class="header"><h2>schlime.RSS</h2></div>
<div id="welcome">
    <img src="{rss/channel/image/url}" alt="Site Image"/>
    <div>
        <p><b>Welcome!</b><br/>
        <br/>This is the RSS Feed for the <b><xsl:value-of select="rss/channel/title"/></b> This 
        feed will show updates on both my Journal entries and Film reviews, which will be categoried 
        for your convenience. If you're using an RSS Reader, please subscribe to the page. 
        Otherwise, feel free to browse the latest updates or visit the <xsl:value-of select="rss/channel/title"/>
        </p>
        <a class="visit" href="{rss/channel/link}">Visit schlime.OnLine</a>
    </div>
</div>

As you can see in this header and welcome section, there’s this new funky tag I’m using:
<xsl:value-of select=”[link to XML tag]”/>
This is exclusive to XSL, it links the value of whatever is inside that specific tag in the XML document. The link will be “[name-of-xml-doc]/channel/[tag]”, so for example, I want to link the title of the RSS doc, it’d be “rss/channel/title” or an image, as shown in the image above, “rss/channel/image/url”.

Now to make the posts as seen in my RSS feed, you only need to write the code for one post! Your XSL and XML will take care of the rest of the work!

Code

<xsl:for-each select="rss/channel/item">
     <div class="post">
         <h2><a href="{link}"><xsl:value-of select="title"/></a></h2>
         <div class="cate-date">
             <xsl:value-of select="category"/> • <xsl:value-of select="pubDate"/>
         </div>
         <p><xsl:value-of select="description"/></p>
         <p class="link2"><a href="{link}">&gt; Read Post</a></p>
     </div>
</xsl:for-each>

To break it down a little:
<xsl:for-each select=”[link-2-items]”>
This tells the document to repeat the code inside for each <item> in your XML document! This makes it so much easier for you to write up your html and css.

Now, for each <xsl:value-of> inside this tag, your url for the tags will be linked to the url in the <xsl:for-each> tag, so you don’t need to write out the full url for each tag. Remember that!

STEP 4: STYLE IT YOUR WAY (or Mike's Way)
That should be all you need to know! I recommend making the html first before you move on to the CSS, which will be the exact same as writing CSS for a standard HTML document.

For me, I couldn’t find any way to preview the XSL, so it was trial and error for me to upload the XSL to Neocities and see what it looked like. So go out there and have fun making a cool-looking RSS feed, and make sure to link it below in the comments for others to check out your junk!

- s9k


« Last Edit: a Summer day by schlime9k »	Logged

https://schlime.online/images/buttons/wsw.gif

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Artifacts:

Re: Let's style our RSS feed!

« Reply #1 on: a Summer day »

Thanks for this!

Advanced Usage #1: remember you're writing XML/XHTML, not HTML!

A really important thing that @schlime9k demonstrated is that XSL is a dialect of XML, not HTML. That means that the rules of XML apply, which are - in general - much stricter than the rules of HTML.

(Strictly-speaking, what you're writing is almost XHTML, which is "HTML, but with XML's stricter rules".)

Let me provide an example. Did you see this bit in @schlime9k's sample code?

Code

<p><b>Welcome!</b><br/>

Notice that @schlime9k said (the space in the middle is optional), not , for a break rule (line break). That's because in XML, every element must be opened and closed. In HTML, you probably aren't used to closing some elements, e.g. you might be used to writing:

- 
- <hr>
- <img src="..." alt="...">

In XML, these instead would be:

- 
- <hr />
- <img src="..." alt="..." />

That slash before the end of the tag means "this is an empty element". So it's equivalent to one of these long-handed ways of doing the same (probably nobody would write this, but for example I will!):

- 
- <hr></hr>
- <img src="..." alt="..."></img>

Advanced Usage #2: JS in particular can be a challenge!

I mention this because it's the kind of thing that might catch you out if you need to write some JavaScript into your XSL transformation! If you have some JS code that uses the "less than" operator (<), that'll be interpreted as the beginning of a new element by an XML parser... and it'll be invalid!

For this reason, if you want to add JS to your XSL to produce XHTML from your RSS feed... you'll need to wrap it up like this:

Code

<script>/* <![CDATA[ */
  if ( 1 < 2 ) console.log("One is less than two!");
/* ]]> */</script>

The really important thing there is the <![CDATA[ ... ]]> block. That tells browsers "the bit in here isn't XML, it's "Character DATA" (CDATA), so don't try to parse it like it was XML! So you can get away with putting e.g. a < in it. The second most important bit is the JS comments /* ... */, which we add to stop the JavaScript interpreter from trying to run the word <![CDATA[ ... ]]> as if it were JS code!

As always when learning something new: start with the simplest case and iterate on it a little at a time. Get @schlime9k's basic example working, and then add or change one thing at a time until you've got what you're looking for.


	Logged

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Artifacts:

Re: Let's style our RSS feed!

« Reply #2 on: a Summer day »

Quote from: schlime9k on a Summer day

For me, I couldn’t find any way to preview the XSL, so it was trial and error for me to upload the XSL to Neocities and see what it looked like. So go out there and have fun making a cool-looking RSS feed, and make sure to link it below in the comments for others to check out your junk!

A local webserver is sufficient for testing XSL offline.


	Logged

Artifact Swap:

schlime9k
Casual Poster ⚓︎

Forever personalising my profile
⛺︎ My Room
StatusCafe: schlime9k
iMood:

RSS:

Guild Memberships:

Artifacts:

Re: Let's style our RSS feed!

« Reply #3 on: a Summer day »

Quote

That's because in XML, every element must be opened and closed

Thanks for the clarification @Dan Q ! Forgot to explain why I was doing that, it is VERY important information because then your XML simply will not work. Thankfully (at least from my experience styling my RSS) your browser should tell you where and why your code isn't working, but you'd obviously want to minimize that occurrence!

Quote from: Dan Q on a Summer day

A local webserver is sufficient for testing XSL offline.

Ah yeah, I should probably set one of those up by now, optional but very helpful!


	Logged

Artifact Swap:

serenefork
Full Member ⚓︎

a Beanie Buddy!
⛺︎ My Room
StatusCafe: serenefork
iMood:

Itch.io: My Games

Guild Memberships:

Artifacts:

Re: Let's style our RSS feed!

« Reply #4 on: a Summer night »

I updated my RSS feed!

I also pieced together this code for sorting the newest post to add an indicator.

Code

<xsl:sort select="sortDate" order="descending"/>
	 <div class="post">
             <xsl:if test="position()=1">
                 
             NEW INDICATOR GOES HERE

             </xsl:if>

             POST GOES HERE

	 </div>

This requires a separate child in the XML item for the date though; I called mine "sortDate" and it has to be in YYYYMMDD format to work correctly.

I also made this to only show a link if I have one to provide.

Code

 <xsl:if test="haslink = 1">
                <a href="{url}">LINK TEXT GOES HERE</a>
            </xsl:if>

This requires a "haslink" child in the XML item for the true/false test. Any value beside 1 will not show any link even if you add one to your "url" child.

I feel very proud that it has worked for my site so I wanted to share. This took me about an hour to figure out through trial, error, and w3schools' guides.