navigation

[pekeler]

In my <nav> section, I'd like to indicate the current page. Currently I'm doing this by specifying a file in my frontmatter:

{
  "title": "Foo",
  "file": "foo"
}

---

And using file with a bit of JavaScript in my layout:

<nav>
  <ul>
    <a href='foo.html'><li>Foo</li></a>
    <a href='bar.html'><li>Bar</li></a>
    <a href='baz.html'><li>Baz</li></a>
  </ul>
</nav>
<script>
  document.querySelector('nav a[href="{{file}}.html"]').classList.add('active');
</script>

I wonder if there could be an easier way to deal with this that doesn't require any JavaScript.

Maybe using mustache instead of hairlip and automatically setting fileNames and currentFileName would allow for an elegant solution. But perhaps that's not super-simple anymore.

[pekeler]

A small improvement that doesn't require the file in the frontmatter anymore:

<nav>
  <ul>
    <a href='foo.html'><li>Foo</li></a>
    <a href='bar.html'><li>Bar</li></a>
    <a href='baz.html'><li>Baz</li></a>
  </ul>
</nav>
<script>
  document.querySelector('nav a[href="' + location.pathname.split('/').reverse()[0] + '"]').classList.add('active');
</script>

but still needs some JS...