Robert Birming

Yearly archives

Bear's {{ posts|from:YYYY-MM-DD|to:YYYY-MM-DD }} variable filters posts by date range. Use it to build a simple yearly archive with a year navigation list.1

Preview

How to use

Create a page for each year, add the date range variable, and include the year navigation markup with links to each archive page. Then add the styles to your theme.

Markup

{{ posts|from:2024-01-01|to:2024-12-31 }}

<div class="year-nav">
  <ul>
    <li><a href="/archive/2025/">2025</a></li>
    <li><a href="/archive/2024/">2024</a></li>
  </ul>
</div>

Styles

/* Yearly archives | robertbirming.com */
.year-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  margin-block: 0 var(--space-block);
  padding: 0;
  list-style: none;
  font-size: var(--font-small);
  color: var(--muted);
}

.year-nav li:not(:last-child)::after {
  content: "·";
  margin-inline-start: 0.6em;
  opacity: 0.5;
}

Want more? Check out all available Bearming add-ons.

Happy blogging, for many years to come.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩