add pagination support

This commit is contained in:
Pat Dryburgh 2018-08-08 21:55:15 -07:00
parent f56356bdb8
commit c014a3cdbe
7 changed files with 141 additions and 72 deletions

3
_includes/back-link.html Normal file
View File

@ -0,0 +1,3 @@
<a href="{{ "/" | prepend: site.baseurl }}" class="back-link">
&#10094; Home
</a>

View File

@ -4,51 +4,99 @@ layout: default
{% assign menu = site.data.menu %}
<header class="site-masthead">
{% if site.title %}
<h1>
{{ site.title }}
</h1>
{% endif %}
{% if site.title %}
<h2>
{{ site.description }}
</h2>
{% endif %}
{% if menu %}
<nav class="site-navigation">
<ul>
{% for item in site.data.menu %}
<li>
<a href="{{ item.url | prepend: baseurl }}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</header>
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
{% include back-link.html %}
{% else %}
<header class="site-masthead">
{% if site.title %}
<h1>
{{ site.title }}
</h1>
{% endif %}
{% if site.title %}
<h2>
{{ site.description }}
</h2>
{% endif %}
{% if menu %}
<nav class="site-navigation">
<ul>
{% for item in site.data.menu %}
<li>
<a href="{{ item.url | prepend: baseurl }}">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</header>
{% endif %}
<main class="home" aria-label="Content">
<h1 class="divided">
Contents
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
Page {{ paginator.page }}
{% else %}
Contents
{% endif %}
</h1>
<ul class="post-list">
{% for post in site.posts %}
<li>
<a href="{{ post.url | absolute_url }}" class="post-link">
<span class="post-title">
{{ post.title }}
</span>
<span class="post-date">
{{ post.date | date: "%b %-d, '%y" }}
</span>
</a>
</li>
{% endfor %}
</ul>
{% if site.paginate and site.paginate_path %}
<ul class="post-list">
{% for post in paginator.posts %}
<li>
<a href="{{ post.url | absolute_url }}" class="post-link">
<span class="post-title">
{{ post.title }}
</span>
<span class="post-date">
{{ post.date | date: "%b %-d, '%y" }}
</span>
</a>
</li>
{% endfor %}
</ul>
{% if paginator.page > 1 %}
<div class="post-pagination">
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="pagination-next btn">&lang; Older</a>
{% else %}
<span>&nbsp;</span>
{% endif %}
<span class="pagination-number">{{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="pagination-previous btn">Newer &rang;</a>
{% else %}
<span>&nbsp;</span>
{% endif %}
</div>
{% endif %}
{% else %}
<ul class="post-list">
{% for post in site.posts %}
<li>
<a href="{{ post.url | absolute_url }}" class="post-link">
<span class="post-title">
{{ post.title }}
</span>
<span class="post-date">
{{ post.date | date: "%b %-d, '%y" }}
</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</main>

View File

@ -2,9 +2,7 @@
layout: default
---
<a href="{{ "/" | prepend: site.baseurl }}" class="back-link">
&#10094; Home
</a>
{% include back-link.html %}
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

View File

@ -87,35 +87,6 @@ hr {
text-align: center;
}
.post-list {
margin: 1em 0;
list-style: none;
}
.post-link {
color: $text-color;
display: flex;
flex-direction: column-reverse;
text-decoration: none;
padding: .25em 0;
.post-title {
display: block;
padding: .25em 0;
}
&:hover .post-title,
&:focus .post-title {
text-decoration: underline;
}
@media (min-width: $on-tablet) {
display: flex;
flex-direction: row;
justify-content: space-between;
.post-title {
margin-right: 4em;
}
}
}
.post-date {
color: $muted-text-color;
display: block;

48
_sass/_post-list.scss Normal file
View File

@ -0,0 +1,48 @@
.post-list {
margin: 1em 0;
list-style: none;
}
.post-link {
color: $text-color;
display: flex;
flex-direction: column-reverse;
text-decoration: none;
padding: .25em 0;
.post-title {
display: block;
padding: .25em 0;
}
&:hover .post-title,
&:focus .post-title {
text-decoration: underline;
}
@media (min-width: $on-tablet) {
display: flex;
flex-direction: row;
justify-content: space-between;
.post-title {
margin-right: 4em;
}
}
}
.post-pagination {
margin-top: 4rem;
font-size: .75em;
display: flex;
flex-direction: row;
justify-content: space-between;
* > {
flex-grow: 1;
flex-basis: 0;
}
a {
text-decoration: none;
text-transform: uppercase;
&:hover,
&:focus {
text-decoration: underline;
}
}
}

View File

@ -13,5 +13,6 @@ $asset_url: '{{ '/assets' | absolute_url }}';
"font",
"base",
"masthead",
"post-list",
"article"
;