Skip to content

Instantly share code, notes, and snippets.

@dimon-durak
Created September 16, 2021 05:12
Show Gist options
  • Select an option

  • Save dimon-durak/5c531b385479cb7b45b093a88eb3ffc8 to your computer and use it in GitHub Desktop.

Select an option

Save dimon-durak/5c531b385479cb7b45b093a88eb3ffc8 to your computer and use it in GitHub Desktop.
11ty - Parsing posts collection with tags

11ty - Parsing posts collection with tags

My code to parse posts or any other collection in 11ty.

Result

  • Order of the posts gets reversed, sorting by date.
  • Date format normalized (d.m.y).
  • Description shortened to 105 characters.
  • Undefined or empty tags are ignored.
  • Bonus: The "post-wrap" class is inside a link.
---
layout: post
title: The unique post title
description: This is a placeholder for the description.
date: 2021-08-17
tags: [posts, principles, web, approach]
---
## Consulting
Understanding the exact requirements of your project. Creating a visual draft, technological tree and establishing available resources, ensures the success of any collaboration.
## Optimized Pages
Pages are optimized for quick loading. No useless animations, images, frameworks or libraries. Information is passed the most efficient way and "eye-candy" is always used wisely.
<div class="row blog-post">
{% assign posts = collections.posts | reverse %}
{% for post in collections.posts %}
<div class="col-md-3">
<span class="date">{{ post.date | date: "%b %d, %Y"}}</span>
</div>
<div class="col-md-9">
<a href="{{ post.url }}">
<div class="post-wrap">
<h3>{{ post.data.title }}</h3>
<p class="desc">{{ post.data.description | truncate: 105, "[...]" }}</p>
<ul class="tags">
{% for t in post.data.tags %}
{% if t != "posts" %}
<li>{{t}}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</a>
</div>
{% endfor %}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment