Replace hard coded archive pages with new layouts

This commit is contained in:
Michael Rose 2018-03-20 14:39:40 -04:00
parent ffef5a93de
commit ba5d25c419
13 changed files with 59 additions and 112 deletions

View file

@ -851,10 +851,10 @@ tag_archive:
Which would create category and tag links in the breadcrumbs and page meta like: `/categories/#foo` and `/tags/#foo`. Which would create category and tag links in the breadcrumbs and page meta like: `/categories/#foo` and `/tags/#foo`.
**Note:** these are simply hash (fragment) links into the full taxonomy index pages. For them to resolve properly, the category and tag index pages need to exist at [`/categories/index.html`](https://github.com/{{ site.repository }}/blob/master/docs/\_pages/category-archive.html) (copy to `_pages/category-archive.html`) and [`/tags/index.html`](https://github.com/{{ site.repository }}/blob/master/docs/\_pages/tag-archive.html) (copy to `_pages/tag-archive.html`). **Note:** these are simply hash (fragment) links into the full taxonomy index pages. For them to resolve properly, the category and tag index pages need to exist at [`/categories/index.html`](https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.md) (copy to `_pages/category-archive.md`) and [`/tags/index.html`](https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.md) (copy to `_pages/tag-archive.md`).
{: .notice--warning} {: .notice--warning}
If you have the luxury of using Jekyll Plugins, then [**jekyll-archives**][jekyll-archives] will create a better experience as discrete taxonomy pages would be generated, and their corresponding links would be "real" (not just hash/fragment links into a larger index). However, the plugin will not generate the taxonomy index pages (`category-archive.html` and `_pages/tag-archive.html`) so you'd still need to manually create them if you'd like to have them (see note above). If you have the luxury of using Jekyll Plugins, then [**jekyll-archives**][jekyll-archives] will create a better experience as discrete taxonomy pages would be generated, and their corresponding links would be "real" (not just hash/fragment links into a larger index). However, the plugin will not generate the taxonomy index pages (`category-archive.md` and `tag-archive.md`) so you'd still need to manually create them if you'd like to have them (see note above).
First, you'll need to make sure that the `jekyll-archives` plugin is installed. Either run `gem install jekyll-archives` or add the following to your `Gemfile`: First, you'll need to make sure that the `jekyll-archives` plugin is installed. Either run `gem install jekyll-archives` or add the following to your `Gemfile`:

View file

@ -142,11 +142,11 @@ Below are sample archive pages you can easily drop into your project, taking car
* [All Posts Grouped by Collection -- List View][posts-collection] * [All Posts Grouped by Collection -- List View][posts-collection]
* [Portfolio Collection -- Grid View][portfolio-collection] * [Portfolio Collection -- Grid View][portfolio-collection]
[posts-categories]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.html [posts-categories]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.md
[posts-tags]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.html [posts-tags]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.md
[posts-year]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/year-archive.html [posts-year]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/year-archive.md
[posts-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/collection-archive.html [posts-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/collection-archive.html
[portfolio-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/portfolio-archive.html [portfolio-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/portfolio-archive.md
Post and page excerpts are auto-generated by Jekyll which grabs the first paragraph of text. To override this text with something more specific use the following YAML Front Matter: Post and page excerpts are auto-generated by Jekyll which grabs the first paragraph of text. To override this text with something more specific use the following YAML Front Matter:
@ -158,34 +158,18 @@ excerpt: "A unique line of text to describe this post that will display in an ar
Adding `type=grid` to the `archive-single` helper will display archive posts in a 4 column grid. For example to create an archive displaying all documents in the portfolio collection: Adding `type=grid` to the `archive-single` helper will display archive posts in a 4 column grid. For example to create an archive displaying all documents in the portfolio collection:
**Step 1:** Create a portfolio archive page (eg. `_pages/portfolio-archive.html`) with the following YAML Front Matter: Create a portfolio archive page (eg. `_pages/portfolio-archive.md`) with the following YAML Front Matter:
```yaml ```yaml
--- ---
layout: archive title: Portfolio
title: "Portfolio" layout: collection
permalink: /portfolio/ permalink: /portfolio/
author_profile: false collection: portfolio
entries_layout: grid
--- ---
``` ```
**Step 2:** Loop over all documents in the portfolio collection and output in a grid:
```html
{% raw %}<div class="grid__wrapper">
{% for post in site.portfolio %}
{% include archive-single.html type="grid" %}
{% endfor %}{% endraw %}
</div>
```
To produce something like this:
<figure>
<img src="{{ '/assets/images/mm-archive-grid-view-example.jpg' | absolute_url }}" alt="archive grid view example">
<figcaption>Grid view example.</figcaption>
</figure>
Teaser images are assigned similar to header images using the following YAML Front Matter: Teaser images are assigned similar to header images using the following YAML Front Matter:
```yaml ```yaml
@ -202,32 +186,22 @@ If you have the luxury of using Jekyll plugins, the creation of category and tag
![archive taxonomy layout example]({{ "/assets/images/mm-layout-archive-taxonomy.png" | absolute_url }}) ![archive taxonomy layout example]({{ "/assets/images/mm-layout-archive-taxonomy.png" | absolute_url }})
If you're not using the `jekyll-archives` plugin then you need to create archive pages yourself. Sample taxonomy archives can be found by grabbing the HTML sources below and adding to your site. If you're not using the `jekyll-archives` plugin then you need to create archive pages yourself. Sample taxonomy archives can be found by grabbing the Markdown sources below and adding to your site.
| Name | HTML Source | | Name | HTML Source |
| -------------------- | --- | | -------------------- | --- |
| [Categories Archive](https://mmistakes.github.io/minimal-mistakes/categories/) | [category-archive.html](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/category-archive.html) | | [Categories Archive](https://mmistakes.github.io/minimal-mistakes/categories/) | [category-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/category-archive.md) |
| [Tags Archive](https://mmistakes.github.io/minimal-mistakes/tags/) | [tag-archive.html](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/tag-archive.html) | | [Tags Archive](https://mmistakes.github.io/minimal-mistakes/tags/) | [tag-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/tag-archive.md) |
The **Tags Archive** page that responds to urls such as `/tags/#tips` looks something like this: The **Tags Archive** page that responds to urls such as `/tags/#tips` looks something like this:
```html ```html
--- ---
layout: archive
permalink: /tags/
title: "Posts by Tag" title: "Posts by Tag"
layout: tags
permalink: /tags/
author_profile: true author_profile: true
--- ---
{% raw %}{% include group-by-array collection=site.posts field="tags" %}
{% for tag in group_names %}
{% assign posts = group_items[forloop.index0] %}
<h2 id="{{ tag | slugify }}" class="archive__subtitle">{{ tag }}</h2>
{% for post in posts %}
{% include archive-single.html %}
{% endfor %}
{% endfor %}{% endraw %}
``` ```
## Home Page Layout ## Home Page Layout

View file

@ -53,18 +53,6 @@ Instead of repeating `{% raw %}{{ site.url }}{{ site.baseurl }}{% endraw %}` ove
A liquid include file for Jekyll that allows an object to be grouped by an array. A liquid include file for Jekyll that allows an object to be grouped by an array.
The Liquid based taxonomy archives found amongst the demo pages rely on this helper.
| Description | | |
| ----------- | ------------------------ | --------------------------- |
| All posts grouped by category | [Source][category-array] | [Demo][category-array-demo] |
| All posts grouped by tag | [Source][tag-array] | [Demo][tag-array-demo] |
[category-array]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.html
[category-array-demo]: {{ "/categories/" | absolute_url }}
[tag-array]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.html
[tag-array-demo]: {{ "/tags/" | absolute_url }}
## Figure ## Figure
Generate a `<figure>` element with a single image and caption. Generate a `<figure>` element with a single image and caption.

View file

@ -1,16 +0,0 @@
---
layout: archive
permalink: /categories-archive/
title: "Posts by Category"
author_profile: true
---
{% include group-by-array collection=site.posts field="categories" %}
{% for category in group_names %}
{% assign posts = group_items[forloop.index0] %}
<h2 id="{{ category | slugify }}" class="archive__subtitle">{{ category }}</h2>
{% for post in posts %}
{% include archive-single.html %}
{% endfor %}
{% endfor %}

View file

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

8
test/_pages/edge-case.md Normal file
View file

@ -0,0 +1,8 @@
---
title: Edge Case
layout: category
permalink: /categories/edge-case/
taxonomy: Edge Case
---
Sample post listing for the category `Edge Case`.

8
test/_pages/markup.md Normal file
View file

@ -0,0 +1,8 @@
---
title: Markup
layout: tag
permalink: /tags/markup/
taxonomy: markup
---
Sample post listing for the tag `markup`.

View file

@ -1,12 +0,0 @@
---
layout: archive
title: "Portfolio"
permalink: /portfolio/
author_profile: false
---
<div class="grid__wrapper">
{% for post in site.portfolio %}
{% include archive-single.html type="grid" %}
{% endfor %}
</div>

View file

@ -0,0 +1,9 @@
---
title: Portfolio
layout: collection
permalink: /portfolio/
collection: portfolio
entries_layout: grid
---
Sample document listing for the collection `_portfolio`.

View file

@ -1,16 +0,0 @@
---
layout: archive
permalink: /tags-archive/
title: "Posts by Tag"
author_profile: true
---
{% include group-by-array collection=site.posts field="tags" %}
{% for tag in group_names %}
{% assign posts = group_items[forloop.index0] %}
<h2 id="{{ tag | slugify }}" class="archive__subtitle">{{ tag }}</h2>
{% for post in posts %}
{% include archive-single.html %}
{% endfor %}
{% endfor %}

View file

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

View file

@ -1,14 +0,0 @@
---
layout: archive
permalink: /year-archive/
title: "Posts by Year"
author_profile: true
---
{% assign postsByYear = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
{% for year in postsByYear %}
<h2 id="{{ year.name | slugify }}" class="archive__subtitle">{{ year.name }}</h2>
{% for post in year.items %}
{% include archive-single.html %}
{% endfor %}
{% endfor %}

View file

@ -0,0 +1,6 @@
---
title: "Posts by Year"
permalink: /year-archive/
layout: posts
author_profile: true
---