This is the beginning of part four of my Textpattern CMS tag guide. The name of the game is navigational tags, and over the course of the next five articles you will learn how to use and build the following tags:
* category, category1, category2 and category_list
* link_to_home, link_to_next and link_to_prev
* newer and older
* section and section_list
Navigational tags are, as the name implies, largely aimed at assisting website users make their way around. As such, all navigational tags can be used to create hyperlinks that can be clicked or tapped to aid navigation. I’m trying to not use the word ‘navigation’ too many times in a single paragraph, but with the subject matter at hand, it’s pretty important. Ahem.
This article will focus on the use of `permlink`, and the remaining 4 bullets above will have their own explanations in the following articles. The `permlink` tag is one of a select group of tags that can be used as either a single or container tag, so both of these barebones blocks are valid:
They differ in function slightly: the single use instance outputs a plain URL to an article, whereas the container version turns it into a hyperlink and uses the inner contents as the thing that can be clicked or tapped. With that in mind, the previous two code blocks will output something like this:
The (optional) attributes for `permlink` are pretty straightforward to understand, too:
class=”css class name”
id=”article id to link to”
style=”inline css rule(s)”
title=”HTML title attribute”
All of these are unset by default. The `class` attribute provides an easy way to set a CSS class to style the output The `id` attribute takes the current article as its target, unless it’s provided with a numerical ID for a different article. Note that some other tags use `id` as a CSS reference, so don’t get confused. The `style` attribute is used to assign inline style to the container text, though from a modern web development perspective it’s generally accepted that using a CSS class and/or a CSS ID is preferable. The `title` attribute is used to populate the HMTL title part of a link, which aids accessibility and search engine visibility.
With all that in mind, some nifty code can be built up with a little bit of work. Let’s start with a basic link:
…and add a couple of CSS classes:
<txp:permlink class=”link-muted link-recent”>Link</txp:permlink>
…then throw in a `title` to ensure good accessibility:
<txp:permlink class=”link-muted link-recent” title=”Permanent link to this article”>Link</txp:permlink>
Hold it right there. This is important. You see that ‘Permanent link to this article’ part? That would be so much cooler if the title referred to the actual title of the article instead of something generic, right? We can do that:
<txp:permlink class=”link-muted link-recent” title=’Permanent link to <txp:title />’>Link</txp:permlink>
Note that the `title` attribute value is now using different punctuation. This is because of a Textpattern tag inside a Textpattern tag, which is both a) pretty cool and b) the start of a slippery slope to tag nest soup if you’re not careful.
The last thing to mention today is that if you want to add an HTML `rel` attribute, that’s currently not available as a tag attribute. Rather than get mad and bemoan the state of free open source software development, you can just use the single tag version instead and do it another way:
<a href=”<txp:permlink />” class=”link-muted link-recent” rel=”internal”>Link</a>
Next time: `category`, `category1`, `category2` and `category_list`.