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,51 +4,99 @@ layout: default
{% assign menu = site.data.menu %} {% assign menu = site.data.menu %}
<header class="site-masthead"> {% if site.paginate and site.paginate_path and paginator.page > 1 %}
{% if site.title %} {% include back-link.html %}
<h1> {% else %}
{{ site.title }} <header class="site-masthead">
</h1> {% if site.title %}
{% endif %} <h1>
{% if site.title %} {{ site.title }}
<h2> </h1>
{{ site.description }} {% endif %}
</h2> {% if site.title %}
{% endif %} <h2>
{% if menu %} {{ site.description }}
<nav class="site-navigation"> </h2>
<ul> {% endif %}
{% for item in site.data.menu %} {% if menu %}
<li> <nav class="site-navigation">
<a href="{{ item.url | prepend: baseurl }}"> <ul>
{{ item.title }} {% for item in site.data.menu %}
</a> <li>
</li> <a href="{{ item.url | prepend: baseurl }}">
{% endfor %} {{ item.title }}
</ul> </a>
</nav> </li>
{% endif %} {% endfor %}
</header> </ul>
</nav>
{% endif %}
</header>
{% endif %}
<main class="home" aria-label="Content"> <main class="home" aria-label="Content">
<h1 class="divided"> <h1 class="divided">
Contents {% if site.paginate and site.paginate_path and paginator.page > 1 %}
Page {{ paginator.page }}
{% else %}
Contents
{% endif %}
</h1> </h1>
<ul class="post-list"> {% if site.paginate and site.paginate_path %}
{% for post in site.posts %}
<li> <ul class="post-list">
<a href="{{ post.url | absolute_url }}" class="post-link"> {% for post in paginator.posts %}
<span class="post-title"> <li>
{{ post.title }} <a href="{{ post.url | absolute_url }}" class="post-link">
</span> <span class="post-title">
<span class="post-date"> {{ post.title }}
{{ post.date | date: "%b %-d, '%y" }} </span>
</span> <span class="post-date">
</a> {{ post.date | date: "%b %-d, '%y" }}
</li> </span>
{% endfor %} </a>
</ul> </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> </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"
; ;