Refactor page meta (#2641)
* Rename include * Add grid view test pages * Rename `.post__meta-sep` and use CSS to add line break * Improve collection grid archive * Improve page grid archive * Enable `grid` * Don't show date icon if there is no `date` value * Add blank line at EOF * Add space * Wrap date and reading time in named `span` elements
This commit is contained in:
Michael Rose
GitHub
parent
7a6060a55a
commit
c6f10529a4
17 changed files with 131 additions and 45 deletions
|
|
@ -24,7 +24,7 @@
|
|||
<a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a>
|
||||
{% endif %}
|
||||
</h2>
|
||||
{% include post__meta.html type=include.type %}
|
||||
{% include page__meta.html type=include.type %}
|
||||
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
|
||||
</article>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
{% elsif page.header.show_overlay_excerpt != false and page.excerpt %}
|
||||
<p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
|
||||
{% endif %}
|
||||
{% include post__meta.html %}
|
||||
{% include page__meta.html %}
|
||||
{% if page.header.cta_url %}
|
||||
<p><a href="{{ page.header.cta_url | relative_url }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
|
||||
{% endif %}
|
||||
|
|
|
|||
30
_includes/page__meta.html
Normal file
30
_includes/page__meta.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{% assign document = post | default: page %}
|
||||
{% if document.read_time or document.show_date %}
|
||||
<p class="page__meta">
|
||||
{% if document.show_date and document.date %}
|
||||
{% assign date = document.date %}
|
||||
<span class="page__meta-date">
|
||||
<i class="far {% if include.type == 'grid' and document.read_time and document.show_date %}fa-fw {% endif %}fa-calendar-alt" aria-hidden="true"></i>
|
||||
<time datetime="{{ date | date_to_xmlschema }}">{{ date | date: "%B %-d, %Y" }}</time>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if document.read_time and document.show_date %}<span class="page__meta-sep"></span>{% endif %}
|
||||
|
||||
{% if document.read_time %}
|
||||
{% assign words_per_minute = document.words_per_minute | default: site.words_per_minute | default: 200 %}
|
||||
{% assign words = document.content | strip_html | number_of_words %}
|
||||
|
||||
<span class="page__meta-readtime">
|
||||
<i class="far {% if include.type == 'grid' and document.read_time and document.show_date %}fa-fw {% endif %}fa-clock" aria-hidden="true"></i>
|
||||
{% if words < words_per_minute %}
|
||||
{{ site.data.ui-text[site.locale].less_than | default: "less than" }} 1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
|
||||
{% elsif words == words_per_minute %}
|
||||
1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
|
||||
{% else %}
|
||||
{{ words | divided_by: words_per_minute }} {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
{% assign page = post | default: page %}
|
||||
|
||||
{% if page.read_time or page.show_date %}
|
||||
<p class="page__meta">
|
||||
|
||||
{% if page.show_date %}
|
||||
{% assign date = page.date %}
|
||||
<i class="far {% if include.type == 'grid' and page.read_time and page.show_date %}fa-fw {% endif %}fa-calendar-alt" aria-hidden="true"></i>
|
||||
<time datetime="{{ date | date_to_xmlschema }}">{{ date | date: "%B %-d, %Y" }}</time>
|
||||
{% endif %}
|
||||
|
||||
{% if page.read_time and page.show_date %}
|
||||
{% if include.type == "grid" %}
|
||||
<br \>
|
||||
{% else %}
|
||||
<span class="post__meta-sep"></span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.read_time %}
|
||||
{% assign words_per_minute = page.words_per_minute | default: site.words_per_minute | default: 200 %}
|
||||
{% assign words = page.content | strip_html | number_of_words %}
|
||||
|
||||
<i class="far {% if include.type == 'grid' and page.read_time and page.show_date %}fa-fw {% endif %}fa-clock" aria-hidden="true"></i>
|
||||
{% if words < words_per_minute %}
|
||||
{{ site.data.ui-text[site.locale].less_than | default: "less than" }} 1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
|
||||
{% elsif words == words_per_minute %}
|
||||
1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
|
||||
{% else %}
|
||||
{{ words | divided_by:words_per_minute }} {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</p>
|
||||
{% endif %}
|
||||
|
|
@ -27,7 +27,7 @@ layout: default
|
|||
{% unless page.header.overlay_color or page.header.overlay_image %}
|
||||
<header>
|
||||
{% if page.title %}<h1 id="page-title" class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>{% endif %}
|
||||
{% include post__meta.html %}
|
||||
{% include page__meta.html %}
|
||||
</header>
|
||||
{% endunless %}
|
||||
|
||||
|
|
|
|||
|
|
@ -201,6 +201,14 @@
|
|||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.page__meta-sep {
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.archive__item-title {
|
||||
margin-top: 0.5em;
|
||||
font-size: $type-size-5;
|
||||
|
|
|
|||
|
|
@ -299,7 +299,7 @@ body {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post__meta-sep::before {
|
||||
.page__meta-sep::before {
|
||||
content: "\2022";
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
|
|
|
|||
|
|
@ -311,14 +311,14 @@ To disable reading time for a post, add `read_time: false` to its YAML Front Mat
|
|||
words_per_minute: 250
|
||||
```
|
||||
|
||||
### Post meta separator
|
||||
### Page meta separator
|
||||
|
||||
To customise the separator between the post date and reading time (if both are enabled), edit `.post__meta-sep::before` in a [custom stylesheet]({{ "/docs/stylesheets/" | relative_url }}).
|
||||
To customise the separator between the page date and reading time (if both are enabled), edit `.page__meta-sep::before` in a [custom stylesheet]({{ "/docs/stylesheets/" | relative_url }}).
|
||||
|
||||
For example,
|
||||
|
||||
```css
|
||||
.post__meta-sep::before {
|
||||
.page__meta-sep::before {
|
||||
content: "\2022";
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
|
|
|
|||
7
test/_pages/category-archive-grid.md
Normal file
7
test/_pages/category-archive-grid.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: "Posts by Category (grid view)"
|
||||
layout: categories
|
||||
permalink: /categories-grid/
|
||||
entries_layout: grid
|
||||
author_profile: true
|
||||
---
|
||||
28
test/_pages/collection-archive-grid.html
Normal file
28
test/_pages/collection-archive-grid.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
layout: archive
|
||||
title: "Posts by Collection (grid view)"
|
||||
permalink: /collection-archive-grid/
|
||||
entries_layout: grid
|
||||
author_profile: true
|
||||
---
|
||||
|
||||
{% assign entries_layout = page.entries_layout | default: 'list' %}
|
||||
{% capture written_label %}'None'{% endcapture %}
|
||||
|
||||
{% for collection in site.collections %}
|
||||
{% unless collection.output == false or collection.label == "posts" %}
|
||||
<section class="taxonomy__section">
|
||||
{% capture label %}{{ collection.label }}{% endcapture %}
|
||||
{% if label != written_label %}
|
||||
<h2 id="{{ label | slugify }}" class="archive__subtitle">{{ label }}</h2>
|
||||
{% capture written_label %}{{ label }}{% endcapture %}
|
||||
{% endif %}
|
||||
<div class="entries-{{ entries_layout }}">
|
||||
{% for post in collection.docs %}
|
||||
{% include archive-single.html type=entries_layout %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="#page-title" class="back-to-top">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }} ↑</a>
|
||||
</section>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
|
@ -17,7 +17,7 @@ author_profile: true
|
|||
{% endunless %}
|
||||
{% for post in collection.docs %}
|
||||
{% unless collection.output == false or collection.label == "posts" %}
|
||||
{% include archive-single.html %}
|
||||
{% include archive-single.html type=page.entries_layout %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
9
test/_pages/edge-case-grid.md
Normal file
9
test/_pages/edge-case-grid.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Edge Case (grid view)
|
||||
layout: category
|
||||
permalink: /categories/edge-case-grid/
|
||||
taxonomy: Edge Case
|
||||
entries_layout: grid
|
||||
---
|
||||
|
||||
Sample post listing for the category `Edge Case`.
|
||||
9
test/_pages/markup-grid.md
Normal file
9
test/_pages/markup-grid.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Markup (grid view)
|
||||
layout: tag
|
||||
permalink: /tags/markup-grid/
|
||||
taxonomy: markup
|
||||
entries_layout: grid
|
||||
---
|
||||
|
||||
Sample post listing for the tag `markup`.
|
||||
16
test/_pages/page-archive-grid.html
Normal file
16
test/_pages/page-archive-grid.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: archive
|
||||
title: "Page Archive"
|
||||
permalink: /page-archive-grid/
|
||||
entries_layout: grid
|
||||
author_profile: false
|
||||
---
|
||||
|
||||
{% assign entries_layout = page.entries_layout | default: 'list' %}
|
||||
<section class="taxonomy__section">
|
||||
<div class="entries-{{ entries_layout }}">
|
||||
{% for post in site.pages %}
|
||||
{% include archive-single.html type=entries_layout %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
7
test/_pages/tag-archive-grid.md
Normal file
7
test/_pages/tag-archive-grid.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: "Posts by Tag (grid view)"
|
||||
permalink: /tags-grid/
|
||||
layout: tags
|
||||
entries_layout: grid
|
||||
author_profile: true
|
||||
---
|
||||
7
test/_pages/year-archive-grid.md
Normal file
7
test/_pages/year-archive-grid.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: "Posts by Year (grid view)"
|
||||
permalink: /year-archive-grid/
|
||||
layout: posts
|
||||
entries_layout: grid
|
||||
author_profile: true
|
||||
---
|
||||
Loading…
Reference in a new issue