Creating Year/Month Route to Index Template

Developer help Routing
3

This is a fairly complex use case, but I think you were already half way there with the solution posted in the other topic. Rather than making a lot of routes in your site you could make use of anchor links, by adding an id to each of the post date headings like so:

{{#foreach posts}}
  <article class="post post-date-{{date format="M"}}">
    <div class="post-label" id="{{date format="YYYY"}}-{{date format="MM"}}">{{date format="MMMM YYYY"}}</div>
    <a class="post-link" href="{{url}}">
      <h2 class="post-title">{{title}}</h2>
    </a>
  </article>
{{/foreach}}

Then to create a list of links to each month you could use some JavaScript:

// Get all the date heading dates
let dates = [...document.querySelectorAll(".post-label[id]")].map(
  date => date.id
);

// Remove duplicates
dates = Array.from(new Set(dates));

// Render list of links that go to the date section
document.querySelector(".navigation").innerHTML = dates
  .map(date => `<a href="#${date}">${date}</a>`)
  .join(" ");

The JavaScript would find all unique instances of each date and produce a link that goes to #2020-02 for example. Using this technique would mean extending the limit so the posts wouldn’t get cut off by pagination. I made a CodePen to demo how it would work: https://codepen.io/daviddarnes/pen/JjdEqPJ

This seems more manageable in my eyes, but would like to hear your thoughts :slight_smile: