Displaying archives - design ideas


#1

Hey guys and gals,
I’m wondering how people are displaying archives?

I’m currently doing (using: gem ‘jekyll-archives’, git: ‘https://github.com/jekyll/jekyll-archives’):

{% assign postsByYearMonth = site.posts | group_by_exp:"post", "post.date | date: '%Y %b'"  %}
    {% for yearMonth in postsByYearMonth %}
    <li class="list-group-item py-1">
    {% for item in yearMonth.items limit: 1 %}
      <a href="{{ site.url }}/{{ item.date | date: '%Y/%m' }}">{{ yearMonth.name }}</a>
    {% endfor %}
    </li>
{% endfor %}

it works ok, you can see it in action in the link below.
Does anyone have any better design ideas?

Those of you who have years of posts?


#2

have come up with a new idea on my other site:

<div id="accordion" class="archivesAccordian">
{% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
{% for year in postsByYear %}
	<div class="card">
	  	<div class="card-header pl-0 pr-0" id="y{{ year.name }}">
	      <h5 class="mb-0">
	        <button class="btn btn-link w-100" data-toggle="collapse" data-target="#m{{ year.name }}" aria-expanded="false" aria-controls="m{{ year.name }}">
	          {{ year.name }}
	        </button>
	      </h5>
	    </div>
	    <div id="m{{ year.name }}" class="collapse {% if forloop.first %}show{% endif %}" aria-labelledby="y{{ year.name }}" data-parent="#accordion">
	      <div class="card-body">

			<div class="list-group">
  {% assign postsByMonth = year.items | group_by_exp:"post", "post.date | date: '%B'" %}

  {% for month in postsByMonth %}
    {% for item in month.items limit: 1 %}
                <a class="list-group-item list-group-item-action" href="{{ site.url }}/{{ item.date | date: '%Y/%m' }}/">{{ month.name }}</a>
    {% endfor %}
  {% endfor %}
  			</div>
  		</div>
  	</div>
{% endfor %}
</div>

Using bootstrap accordion group . .would love to see other peoples ideas


#3

#4

On my site. I’ve decided against loading any Javascripts to enhance the UI, and keep things as simple as possible while presenting the information in a way most useful to end users. The main Archives page is organized by year, with specific “jump to” anchor links for each year.

In addition to organizing posts by year, I also have a way to browse by “tag” and “category”. I simply include the “Browse by” navbar on each page archives.md, tags.md and categories.md, then change out the active item in the html of each one to navigate between them.

On the tags and categories pages I also use the “jump to” anchor links similar to the jump to year links on the main archive page.

archives.md:

 Archives are sorted by newest first.

<nav class="menu archives text-center" aria-label="browse archives">
  <strong aria-hidden="true">Browse archives by:</strong>
  <a href="/archive" class="active" aria-current="page"><span class="visually-hidden">browse by</span>year</a>
  <a href="/categories"><span class="visually-hidden">browse by</span>category</a>
  <a href="/tags"><span class="visually-hidden">browse by</span>tag</a>
</nav>

{% include archives/by-year.html %}

categories.md

Archives are sorted by newest first.

<nav class="menu archives text-center" aria-label="browse archives">
  <strong aria-hidden="true">Browse archives by:</strong>
  <a href="/archive"><span class="visually-hidden">browse archives by</span>year</a>
  <a href="/categories" class="active" aria-current="page"><span class="visually-hidden">browse archives by</span>category</a>
  <a href="/tags"><span class="visually-hidden">browse archives by</span>tag</a>
</nav>

{% include archives/by-taxonomy.html taxonomy="Categories" items=site.categories %}

tags.md

 Archives are sorted by newest first.

<nav class="menu archives text-center" aria-label="browse archives">
  <strong aria-hidden="true">Browse archives by:</strong>
  <a href="/archive"><span class="visually-hidden">browse archives by</span>year</a>
  <a href="/categories"><span class="visually-hidden">browse archives by</span>category</a>
  <a href="/tags" class="active" aria-current="page"><span class="visually-hidden">browse archives by</span>tag</a>
</nav>

{% include archives/by-taxonomy.html taxonomy="Tags" items=site.tags %}

I then use two includes by-year.html and by-taxonomy.html to get the job done of actually printing the jump to anchors and the full list of items.

archives/by-year.html:

{% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
<nav class="menu browse by-year text-center" aria-label="year">
  <strong aria-hidden="true">Jump to:</strong>
  {% for year in postsByYear %}
  <a href="#{{ year.name }}"><span class="visually-hidden">jump to posts from</span>{{ year.name }}</a>
  {% endfor %}
</nav>
{% for year in postsByYear %}
<h2 id="{{ year.name }}">{{ year.name }}</h2>
<ul aria-label="posts from {{ year.name }}">
  {% for post in year.items %}
  <li>
    {% include post/post-list-item.html %}
  </li>
  {% endfor %}
</ul>
{% endfor %}

archives/by-taxonomy.html:

<nav class="menu browse by-{{ include.taxonomy | slugify }} text-center" aria-label="{{ include.taxonomy }}">
  <strong aria-hidden="true">Jump to:</strong>
  {% for tag in include.items %}
  <a href="#{{ tag[0] | slugify }}" class="post-tag"><span class="visually-hidden">jump to posts classified under </span>{{ tag[0] }}</a>
  {% endfor %}
</nav>
{% for tag in include.items %}
<h2 id="{{ tag[0] | slugify }}">{{ tag[0] }}</h2>
<ul aria-label="posts classified under {{ tag[0] }}">
  {% for post in tag[1] %}
  <li>
    {% include post/post-list-item.html %}
  </li>
  {% endfor %}
</ul>
{% endfor %}

Finally I leverage another set of includes, the first called post-list-item.md to standardize the formatting of the post title, and then within that post-meta.html to format the date and read time/word count. This post meta include is also used in other listings of posts on the site like the main blog posts page as well as on the post detail page.

You can see the results in action here and browse the code here.