Robert Birming

Yearly blog archives for Bear

A simple way to create yearly archives on Bear using the built-in date range template variable.1

How to use

Create a separate page for each year and add the date range variable. For example, a 2024 page would use:

Markup

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

Then add a list of links for each year on every page, wrapped in a <div class="inline-menu"></div>, and add the styles to your theme.

Styles

/* Yearly blog archives | robertbirming.com */
.inline-menu ul {
  margin-block: 0 1.6rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  font-size: 0.9em;
  opacity: 0.8;
}

.inline-menu 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.