Tag Primer (Part 2)
In the last article in this series, we discussed most of the basic tags needed for working page content. Today, I'd like to cover a few tags that relate to page navigation.
Web sites often include some sort of context sensitive navigation to help users get around. This is accomplished by showing a link as bold, showing a tab as selected, or doing something to indicate to the user where they are in the site. Radiant provides a set of tags to help you with this. Consider the following example from the Ruby-Lang redesign:
If you are on the /en/news/ page, this code will output the following:
<r:navigation urls="Downloads: /en/downloads/; Documentation: /en/documentation/; Libraries: /en/libraries/; Community: /en/community/; News: /en/news/; About Ruby: /en/about/"> <r:normal><a href="<r:url />"><r:title /></a></r:normal> <r:here><strong><r:title /></strong></r:here> <r:selected><strong><a href="<r:url />"><r:title /></a></strong></r:selected> <r:between><span class="separator"> | </span></r:between> </r:navigation>
<a href="/en/downloads/">Downloads</a> <span class="separator"> | </span> <a href="/en/documentation/">Documentation</a> <span class="separator"> | </span> <a href="/en/libraries/">Libraries</a> <span class="separator"> | </span> <a href="/en/community/">Community</a> <span class="separator"> | </span> <strong>News</strong> <span class="separator"> | </span> <a href="/en/about/">About Ruby</a>
In the code above, the
navigation tags cause a list of links to be generated with “News” in bold. The list of links and their captions is specified in the semicolon separated pairs in the
url attribute of the
navigation tags allow links to be displayed in one of three states:
heretag should contain a snippet which will be rendered when you are on the specific URL. In the example above, this is what caused “News” to be rendered bold.
selectedtag should contain a snippet which will be rendered when you are on a child page of the specific URL. In the example above, this causes “News” to be rendered as a bold link when you are on a news article.
normaltag should contain a snippet which will be rendered when a link is not in the “here” or “selected” states. In the example above, it renders a plain link.
between tag specifies the code that should be rendered after every link except the last one. In this case, the
between tag renders a separator between each of the links.
In the story of Hansel and Gretel, the children keep track of their path through the forest by dropping a trail of breadcrumbs behind them as they journey. Unfortunately, the animals in the forest eat the breadcrumbs and the children become hopelessly lost.
In tribute to this fine tale by the Brothers Grimm, a trail of navigation links on a Web page has come to be known as breadcrumbs. Breadcrumbs are a simple navigational aid to help users understand where they are on a site. On a complex site, this can be quite useful.
On this site, the trail of breacrumbs to this page looks like this:
In Radiant, you can generate breadcrumbs using the
<r:breadcrumbs between=" → " />
You can use the
between attribute to specify the code that should be placed between each of the links. By default the
between attribute is set to