Replace hard coded archive pages with new layouts
This commit is contained in:
Michael Rose
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`.
|
||||
|
||||
**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}
|
||||
|
||||
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`:
|
||||
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
* [Portfolio Collection -- Grid View][portfolio-collection]
|
||||
|
||||
[posts-categories]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.html
|
||||
[posts-tags]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.html
|
||||
[posts-year]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/year-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.md
|
||||
[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
|
||||
[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:
|
||||
|
||||
|
|
@ -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:
|
||||
|
||||
**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
|
||||
---
|
||||
layout: archive
|
||||
title: "Portfolio"
|
||||
title: Portfolio
|
||||
layout: collection
|
||||
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:
|
||||
|
||||
```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 }})
|
||||
|
||||
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 |
|
||||
| -------------------- | --- |
|
||||
| [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) |
|
||||
| [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) |
|
||||
| [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.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:
|
||||
|
||||
```html
|
||||
---
|
||||
layout: archive
|
||||
permalink: /tags/
|
||||
title: "Posts by Tag"
|
||||
layout: tags
|
||||
permalink: /tags/
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
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
|
||||
|
||||
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