Step-by-Step Guide: Posts by Month in Bear Blog

4 days ago 1

Jun 13, 2025

The default list of all blog posts on Bear blog works fine, but can get quite long and a bit unorganized when you've blogged for a long time and posted a lot of content.

I wrote a plugin that organizes your posts a little more neatly by year and month. For example, if you wrote five posts in June 2025, a header for this month is added to the default blog posts page with those five post titles displayed below it.

If you only came here to add this custom feature to your own Bear blog, follow the steps below.

Copy the following script:

<script src="https://cdn.jsdelivr.net/gh/froodooo/[email protected]/bear/blog-posts.js"></script>

(See my bear-plugins GitHub repository for the latest release number)
From your Bear blog dashboard, click on your blog name, then on Settings, then on Header and footer directives, and paste the above script in the Footer directive.

... and you're done! Go to the blog overview page on your website. It now lists all blog posts from a specific month under its corresponding header.

The Technical Details

For those who are interested, the complete JavaScript code that makes this all happen can be found right here on my bear-plugins GitHub.

The code uses the <ul> element with the blog-posts class that is automatically injected on the default Bear blog posts overview page:

This unordered list contains child <li> elements, where each of these list items contains the date-time and title of a single blog post. The general structure of a single list item looks like this (using an example post from my blog):

<li> <span> <i> <time datetime="2025-06-09T06:00Z"> Jun 9, 2025 </time> </i> </span> <a href="/remembering-the-story/">Remembering the Story</a> </li>

The JavaScript code collects the value of the datetime attribute for all blog posts and inserts it into a postsByMonth map. This map has a long month name and four-digit numeric year as its keys (for example, "June 2025") and all posts from that specific month as the keys' values:

posts.forEach(post => { const timeElement = post.querySelector('time'); if (!timeElement) return; const date = new Date(timeElement.getAttribute('datetime')); const monthYear = formatMonthYear(date); if (!postsByMonth.has(monthYear)) { postsByMonth.set(monthYear, []); } postsByMonth.get(monthYear).push(post); });

After this map has been created and filled with all posts, it is sorted by its keys, sorted in descending order (most recent month first):

const sortedMonths = Array.from(postsByMonth.keys()).sort((a, b) => { const dateA = new Date(a); const dateB = new Date(b); return dateB - dateA; });

Finally, the newly sorted list of blog posts is put back into the unordered list with the blog-posts class I mentioned before:

sortedMonths.forEach(monthYear => { // Create and add month header const header = document.createElement('h2'); header.textContent = monthYear; header.className = 'month-header'; blogPostsList.appendChild(header); // Add posts for this month postsByMonth.get(monthYear).forEach(post => { blogPostsList.appendChild(post); }); });

Read Entire Article