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, ie, 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: