In the previous section, we saw how we can transclude the values of variables within running text. We can also use variables within other formatting instructions – as the values of attributes on widgets or HTML tags.

We already did this once already in the link pattern exercise in Your First Dynamic List, before we had explained that <<currentTiddler>> was a variable:

<$link to=<<currentTiddler>>/>

In a basic sense, using variables as attribute values is no different than using them elsewhere. However, there are some pitfalls for the unwary when it comes to mixing variables and other wikitext elements. Fully elucidating all of these requires much more understanding of TiddlyWiki, so we'll start by covering the most basic issues in this section and postpone the rest until later.

Multiple links to the same place

Suppose we want to link to the Wikipedia homepage multiple times. If we want the same text on the link each time, we can simply put the wikitext needed to create the link in a variable and transclude it several times, like this:

<$let wp="[[link|https://en.wikipedia.org]]">

  Wikipedia: <<wp>>

  The free encyclopedia: <<wp>>

</$let>

But what if we want to use different text for the link each time? You might try this:

<$let wp="https://en.wikipedia.org">

  [[Wikipedia|<<wp>>]]

  [[The free encyclopedia|<<wp>>]]

</$let>

Unfortunately, transclusions can't be nested inside other complex wikitext elements like links, so this doesn't work. If you try clicking on one of the links in the example above, you'll see that TiddlyWiki produces a link to the tiddler literally called <<wp>>, which isn't very helpful!

However, you can transclude a variable into the value of an attribute. So an easy solution is to use an a HTML element instead of wikitext syntax (recall that all items of wikitext syntax have corresponding widgets or HTML tags). This element takes the URL to link to in its href attribute and the text to display in its body. (href stands for hypertext reference, and a for anchor.)

<$let wp="https://en.wikipedia.org">

  <a href=<<wp>> >Wikipedia</a>

  <a href=<<wp>> >The free encyclopedia</a>

</$let>

The space between the >> closing the variable transclusion and the > closing the tag is not required, but many people find it makes the wikitext more readable.

Depending on the palette you have selected, you may notice that links to external sites that use the a tag are a different color than is usual in your wiki. If this bothers you, add the attribute class="tc-tiddlylink-external" to the <a> tag, which will tell TiddlyWiki to use the same styling that it would if you created an external link with [[double square brackets]].

Multiple links to different Wikipedia articles

The previous example may be functional, but it's a bit academic – how often do you want to link to the same web page multiple times?

Here's a more useful idea. Wikipedia article URLs have a very predictable format: for an article named Article Name in the English encyclopedia, the URL looks like https://en.wikipedia.org/wiki/Article Name. The only part that ever changes is the name of the article. Can we use a variable to hold the part of the URL that doesn't change? Then we could produce a working link to any article given only its title.

The most obvious thing to try would be:

<$let wpBase="https://en.wikipedia.org/wiki">
  <a href="<<wpBase>>/Aardvark">Aardvarks</a>
</$let>

That looks OK, but if you click on the link you'll find that it goes to a page called <<wpBase>>/Aardvark, which obviously isn't what we wanted.

Maybe the transclusion needs to go outside the quotation marks?

<$let wpBase="https://en.wikipedia.org/wiki">
  <a href=<<wpBase>>"/Aardvark">Aardvarks</a>
</$let>

Uh-oh!

It turns out that we need an entirely new syntax to achieve this. We can use just a transclusion as the value of an attribute by writing it directly after the =, as we did earlier in this section. Or we can use just a constant value (one with no variables) by placing it in "double quotation marks" after the =. But if we need to combine a constant value and one or more variables, as we do here, we need to use a substituted attribute value, which looks like this:

<$let wpBase="https://en.wikipedia.org/wiki">
  <a href=`$(wpBase)$/Aardvark`>Aardvarks</a>
</$let>

Those funny `'s are called backticks. On a standard US keyboard, you can find the backtick (also called the grave accent) to the left of the 1 key. Other keyboards have it in weirder places or even on the AltGr layer; you may have to do a quick web search to learn how to type it on your keyboard.

Within a substituted attribute value, the syntax $(wpBase)$ refers to the value of the variable wpBase. The way in which this differs from <<wpBase>> is somewhat arcane, so we'll hold off on discussing it until we learn about macros in chapter 6. For now, suffice it to say that you should refer to the values of variables with this $()$ syntax within substituted attribute values.

Exercises

Takeaways