Add posts, categories, category, tags, tag, and collection layouts

Replace sample pages with hard coded HTML and Liquid in favor of a layout that does all the heavy lifting. Assign the appropriate `layout` via YAML Front Matter and away you go.
This commit is contained in:
Michael Rose 2018-03-20 12:45:28 -04:00
parent 2463b55c4c
commit d6605146ac
13 changed files with 246 additions and 3 deletions

View file

@ -0,0 +1,19 @@
{% assign entries = site[include.collection] %}
{% if include.sort_by == 'title' %}
{% if include.sort_order == 'reverse' %}
{% assign entries = entries | sort: 'title' | reverse %}
{% else %}
{% assign entries = entries | sort: 'title' %}
{% endif %}
{% elsif include.sort_by == 'date' %}
{% if include.sort_order == 'reverse' %}
{% assign entries = entries | sort: 'date' | reverse %}
{% else %}
{% assign entries = entries | sort: 'date' %}
{% endif %}
{% endif %}
{%- for post in entries -%}
{% include archive-single.html %}
{%- endfor -%}

View file

@ -0,0 +1,3 @@
{%- for post in site.categories[include.taxonomy] -%}
{% include archive-single.html %}
{%- endfor -%}

3
_includes/posts-tag.html Normal file
View file

@ -0,0 +1,3 @@
{%- for post in site.tags[include.taxonomy] -%}
{% include archive-single.html %}
{%- endfor -%}

48
_layouts/categories.html Normal file
View file

@ -0,0 +1,48 @@
---
layout: archive
---
{{ content }}
<ul class="taxonomy-index">
{% assign categories_max = 0 %}
{% for category in site.categories %}
{% if category[1].size > categories_max %}
{% assign categories_max = category[1].size %}
{% endif %}
{% endfor %}
{% for i in (1..categories_max) reversed %}
{% for category in site.categories %}
{% if category[1].size == i %}
<li>
<a href="#{{ category[0] | slugify }}">
<strong>{{ category[0] }}</strong> <span class="taxonomy-count">{{ i }}</span>
</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% assign categories_max = 0 %}
{% for category in site.categories %}
{% if category[1].size > categories_max %}
{% assign categories_max = category[1].size %}
{% endif %}
{% endfor %}
{% for i in (1..categories_max) reversed %}
{% for category in site.categories %}
{% if category[1].size == i %}
<section id="{{ category[0] | slugify | downcase }}" class="taxonomy-section">
<h2 class="archive__subtitle">{{ category[0] }}</h2>
<div class="entries-{{ page.entries_layout | default: 'list' }}">
{% for post in category.last %}
{% include archive-single.html %}
{% endfor %}
</div>
<a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
</section>
{% endif %}
{% endfor %}
{% endfor %}

9
_layouts/category.html Normal file
View file

@ -0,0 +1,9 @@
---
layout: archive
---
{{ content }}
<div class="entries-{{ page.entries_layout | default: 'list' }}">
{% include posts-category.html taxonomy=page.taxonomy %}
</div>

9
_layouts/collection.html Normal file
View file

@ -0,0 +1,9 @@
---
layout: archive
---
{{ content }}
<div class="entries-{{ page.entries_layout | default: 'list' }}">
{% include documents-collection.html collection=page.collection sort_by=page.sort_by sort_order=page.sort_order %}
</div>

29
_layouts/posts.html Normal file
View file

@ -0,0 +1,29 @@
---
layout: archive
---
{{ content }}
<ul class="taxonomy-index">
{% assign postsInYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
{% for year in postsInYear %}
<li>
<a href="#{{ year.name }}">
<strong>{{ year.name }}</strong> <span class="taxonomy-count">{{ year.items | size }}</span>
</a>
</li>
{% endfor %}
</ul>
{% assign postsByYear = site.posts | group_by_exp: 'post', 'post.date | date: "%Y"' %}
{% for year in postsByYear %}
<section id="{{ year.name }}" class="taxonomy-section">
<h2 class="archive__subtitle">{{ year.name }}</h2>
<div class="entries-{{ page.entries_layout | default: 'list' }}">
{% for post in year.items %}
{% include archive-single.html %}
{% endfor %}
</div>
<a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
</section>
{% endfor %}

9
_layouts/tag.html Normal file
View file

@ -0,0 +1,9 @@
---
layout: archive
---
{{ content }}
<div class="entries-{{ page.entries_layout | default: 'list' }}">
{% include posts-tag.html taxonomy=page.taxonomy %}
</div>

48
_layouts/tags.html Normal file
View file

@ -0,0 +1,48 @@
---
layout: archive
---
{{ content }}
<ul class="taxonomy-index">
{% assign tags_max = 0 %}
{% for tag in site.tags %}
{% if tag[1].size > tags_max %}
{% assign tags_max = tag[1].size %}
{% endif %}
{% endfor %}
{% for i in (1..tags_max) reversed %}
{% for tag in site.tags %}
{% if tag[1].size == i %}
<li>
<a href="#{{ tag[0] | slugify }}">
<strong>{{ tag[0] }}</strong> <span class="taxonomy-count">{{ i }}</span>
</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
{% assign tags_max = 0 %}
{% for tag in site.tags %}
{% if tag[1].size > tags_max %}
{% assign tags_max = tag[1].size %}
{% endif %}
{% endfor %}
{% for i in (1..tags_max) reversed %}
{% for tag in site.tags %}
{% if tag[1].size == i %}
<section id="{{ tag[0] | slugify | downcase }}" class="taxonomy-section">
<h2 class="archive__subtitle">{{ tag[0] }}</h2>
<div class="entries-{{ page.entries_layout | default: 'list' }}">
{% for post in tag.last %}
{% include archive-single.html %}
{% endfor %}
</div>
<a href="#page-title" class="back-to-top">{{ site.data.text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>
</section>
{% endif %}
{% endfor %}
{% endfor %}

View file

@ -295,6 +295,72 @@
} }
} }
.taxonomy-section {
margin-bottom: 2em;
padding-bottom: 1em;
&:not(:last-child) {
border-bottom: solid 1px $border-color;
}
.archive__item-title {
margin-top: 0;
}
.archive__subtitle {
border: 0;
}
+ .taxonomy-section {
margin-top: 2em;
}
}
.taxonomy-title {
margin-bottom: 0.5em;
color: lighten($text-color, 60%);
}
.taxonomy-count {
color: lighten($text-color, 50%);
}
.taxonomy-index {
display: grid;
grid-column-gap: 2em;
grid-template-columns: repeat(2, 1fr);
margin: 0;
padding: 0;
font-size: 0.75em;
list-style: none;
@include breakpoint($large) {
grid-template-columns: repeat(3, 1fr);
}
a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0.25em 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
color: inherit;
text-decoration: none;
border-bottom: 1px solid $border-color;
}
}
.back-to-top {
display: block;
color: lighten($text-color, 50%);
font-size: 0.6em;
text-transform: uppercase;
text-align: right;
text-decoration: none;
}
/* /*
Comments Comments
========================================================================== */ ========================================================================== */

View file

@ -1,6 +1,6 @@
--- ---
layout: archive layout: archive
permalink: /categories/ permalink: /categories-archive/
title: "Posts by Category" title: "Posts by Category"
author_profile: true author_profile: true
--- ---

View file

@ -1,7 +1,7 @@
--- ---
layout: archive layout: archive
title: "Recipes" title: "Recipes"
permalink: /recipes/ permalink: /recipes-archive/
author_profile: false author_profile: false
--- ---

View file

@ -1,6 +1,6 @@
--- ---
layout: archive layout: archive
permalink: /tags/ permalink: /tags-archive/
title: "Posts by Tag" title: "Posts by Tag"
author_profile: true author_profile: true
--- ---