This post actually serves two purposes:
- It indicates that I’m still alive.
- Since I was asked about the active class in the navigation of this site, I’d like to explain how that works.
I actually use some of the newer features of Hakyll 4.3 in this Blog e.g. the partials and if. To make the navigation indicator work I only need the if, but while I’m at it I can also explain a little about the general setup of this blog.
Actually if is more like an “isDefined” in Hakyll you can just find out if a variable is set. So my solution to add the active class to the menu is quite simple:
- Add a variable for every menu entry (blog, talks, contact, facts).
- Set the variable to some value in the yaml front matter of the matching pages.
- In the navigation partial check on every entry if the matching variable is set.
- If so add the active class to the matching entry.
A walk through the code
Let’s make that a little more detailed, probably nobody understood it from the tl;dr anyway. I take the facts page to illustrate it, but it works the same for all the other entries.
Our journey starts at line 3 of the facts.html:
--- title: xinitrc facts facts: true ---
The variable facts is initialised and set to true, as I already said the value is completely irrelevant, it suffices to add the variable at all. (I was actually tempted to set it to false but that would be outright evil.)
Next in Line 144ff of site.hs
match ("facts.html" .||. "contact.html" ) $ do route idRoute compile $ applyKeywords >>= loadAndApplyTemplate "templates/main.html" (taggedPostCtx tags)
the facts page is matched and the templates/main.html is applied.
<di id="wrapper"> $partial("partials/navbar.html")$ <div class="contentwrapper"> <div class="content"> $body$ </div> </div> $partial("partials/sidebar.html")$ </div>
Where in Line 6 the partials/navbar.html partial is requested for rendering. Which in line 16ff contains the following code.
<li> <a $if(facts)$ class="active" $endif$ href="/facts.html">xinitrc facts<i class="icon-chevron-right con-large"></i></a> </li>
This looks up if facts is defined, which it is, and therefor renders the class=“active”.
That’s it. I hope this helps and you find some use for it somewhere else.