How to make a TiddlyWiki table of contents (toc) with differnt colors

Question

I use

<div class="tc-table-of-contents">
<<toc "Inhalt">>
</div>

where every tiddler tagged with Inhalt is listed in toc. This works fine.

But I have an additional tag named Fahrt. Is it possible to change the color in the toc of this entries? The result should look like this:

Only tag Inhalt        --> normal blue color 
tag Inhalt + tag Fahrt --> perhaps a lighter blue oder different color

Answer 1

This isn't possible with the default toc macros, but we can write a new macro based on the built-in toc macro to do this without too much trouble. We'll make a version of the macro, template-toc, that uses a template to display each element in the table of contents – this way, we'll be able to reuse our work to format TOC elements in a totally arbitrary way. (Fuller explanation of templates. NB: I wrote this.)

We first start by copying the macros toc and toc-body from $:/core/macros/toc and pasting them into a new tiddler $:/template-toc-macros (you can call this tiddler anything you want) with the tag $:/tags/Macro (this will cause the macros in it to be available in any tiddler in the wiki).

Then we rename toc-body and all references to template-toc-body, likewise toc to template-toc. We add a parameter template as the second parameter of both of these macros, and adjust the bodies of both so that they transclude the <<__template__>> parameter as a tiddler rather than looking into the caption and title fields for a title and creating a link with this as the text. That makes the body of this tiddler look like this:

\define template-toc-body(tag,template,sort:"",itemClassFilter,exclude,path)
\whitespace trim
<ol class="tc-toc">
  <$list filter="""[all[shadows+tiddlers]tag<__tag__>!has[draft.of]$sort$] -[<__tag__>] -[enlist<__exclude__>]""">
    <$let item=<<currentTiddler>> path={{{ [<__path__>addsuffix[/]addsuffix<__tag__>] }}}>
      <$set name="excluded" filter="""[enlist<__exclude__>] [<__tag__>]""">
        <$set name="toc-item-class" filter=<<__itemClassFilter__>> emptyValue="toc-item-selected" value="toc-item">
          <li class=<<toc-item-class>>>
            <$transclude tiddler=<<__template__>>/>
            <$macrocall $name="template-toc-body" tag=<<item>> template=<<__template__>> sort=<<__sort__>> itemClassFilter=<<__itemClassFilter__>> exclude=<<excluded>> path=<<path>>/>
          </li>
        </$set>
      </$set>
    </$let>
  </$list>
</ol>
\end

\define template-toc(tag,template,sort:"",itemClassFilter:"")
<$macrocall $name="template-toc-body"  tag=<<__tag__>> template=<<__template__>> sort=<<__sort__>> itemClassFilter=<<__itemClassFilter__>> />
\end

Now here's how we use this: we create a template tiddler which, given that the variable <<currentTiddler>> is set to a particular tiddler we want to include in the TOC, renders the HTML/wikitext we want to include in the table of contents. In this example, we'll call this tiddler MyTemplate, but you'll probably want to use something more descriptive. In your case, the text will look something like:

<$link to=<<currentTiddler>>>
<$list filter="[all[current]tag[Fahrt]]" emptyMessage="""<$view field='caption'><$view field='title' /></$view>""">
  <span style="color: red;"><$view field='caption'><$view field='title' /></$view></span>
</$list>
</$link>

That is, if the filter [all[current]tag[Fahrt]] has any output, i.e., the currentTiddler is tagged Fahrt, then fill in the body of the $list widget (creating a span with a color: red; CSS property), containing the caption field if it exists on the tiddler, or the title field otherwise. If it's not tagged Fahrt, then fill in the contents of emptyMessage, which does the same thing but without the color. In either case, create a link going to currentTiddler containing that content.

Lastly, wherever you want to show the table of contents, call the template-toc macro instead of the toc macro, and pass it the template you just created as a second argument:

<div class="tc-table-of-contents">
  <<template-toc "Inhalt" MyTemplate>>
</div>

Result: