Merge pull request #3 from patdryburgh/feat/pagination

add pagination support
This commit is contained in:
Pat Dryburgh
2018-08-08 21:56:32 -07:00
committed by GitHub
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,6 +4,9 @@ layout: default
{% assign menu = site.data.menu %} {% assign menu = site.data.menu %}
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
{% include back-link.html %}
{% else %}
<header class="site-masthead"> <header class="site-masthead">
{% if site.title %} {% if site.title %}
<h1> <h1>
@ -29,13 +32,55 @@ layout: default
</nav> </nav>
{% endif %} {% endif %}
</header> </header>
{% endif %}
<main class="home" aria-label="Content"> <main class="home" aria-label="Content">
<h1 class="divided"> <h1 class="divided">
{% if site.paginate and site.paginate_path and paginator.page > 1 %}
Page {{ paginator.page }}
{% else %}
Contents Contents
{% endif %}
</h1> </h1>
{% 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"> <ul class="post-list">
{% for post in site.posts %} {% for post in site.posts %}
<li> <li>
@ -51,4 +96,7 @@ layout: default
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %}
</main> </main>

View File

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

View File

@ -87,35 +87,6 @@ hr {
text-align: center; 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 { .post-date {
color: $muted-text-color; color: $muted-text-color;
display: block; 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", "font",
"base", "base",
"masthead", "masthead",
"post-list",
"article" "article"
; ;