Replace hard coded archive pages with new layouts
This commit is contained in:
parent
ffef5a93de
commit
ba5d25c419
13 changed files with 59 additions and 112 deletions
|
@ -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`:
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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 %}
|
|
6
test/_pages/category-archive.md
Normal file
6
test/_pages/category-archive.md
Normal 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
8
test/_pages/edge-case.md
Normal 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
8
test/_pages/markup.md
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
title: Markup
|
||||||
|
layout: tag
|
||||||
|
permalink: /tags/markup/
|
||||||
|
taxonomy: markup
|
||||||
|
---
|
||||||
|
|
||||||
|
Sample post listing for the tag `markup`.
|
|
@ -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>
|
|
9
test/_pages/portfolio-archive.md
Normal file
9
test/_pages/portfolio-archive.md
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
title: Portfolio
|
||||||
|
layout: collection
|
||||||
|
permalink: /portfolio/
|
||||||
|
collection: portfolio
|
||||||
|
entries_layout: grid
|
||||||
|
---
|
||||||
|
|
||||||
|
Sample document listing for the collection `_portfolio`.
|
|
@ -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 %}
|
|
6
test/_pages/tag-archive.md
Normal file
6
test/_pages/tag-archive.md
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: "Posts by Tag"
|
||||||
|
permalink: /tags-archive/
|
||||||
|
layout: tags
|
||||||
|
author_profile: true
|
||||||
|
---
|
|
@ -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 %}
|
|
6
test/_pages/year-archive.md
Normal file
6
test/_pages/year-archive.md
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: "Posts by Year"
|
||||||
|
permalink: /year-archive/
|
||||||
|
layout: posts
|
||||||
|
author_profile: true
|
||||||
|
---
|
Loading…
Reference in a new issue