Update pagination

This commit is contained in:
Maruan Al-Shedivat 2020-05-02 18:09:42 -04:00
parent 60ed29eb5b
commit 6e9de53d68
10 changed files with 93 additions and 48 deletions

View File

@ -3,7 +3,7 @@ group :jekyll_plugins do
gem 'github-pages'
gem 'jekyll'
gem 'jekyll-email-protect'
gem 'jekyll-paginate'
gem 'jekyll-paginate-v2'
gem 'jekyll-scholar'
gem 'jemoji'
gem 'unicode_utils'

View File

@ -20,7 +20,7 @@ last_updated: false # set to true if you want to display last updated in the foo
# -----------------------------------------------------------------------------
navbar_fixed: true
footer_fixed: false
footer_fixed: true
# TODO: add layout settings (single page vs. multi-page)
# -----------------------------------------------------------------------------
@ -43,16 +43,17 @@ google_analytics: UA-XXXXXXXXX # out your google-analytics code
blog_name: al-folio
blog_description: a simple whitespace theme for academics
permalink: /blog/:year/:title/
# Pagination
paginate: 4
permalink: /blog/:year/:title/
paginate_path: /blog/page:num/
text:
pagination:
newer: 'Newer'
older: 'Older'
pagination:
enabled: true
collection: 'posts'
permalink: /page/:num/
per_page: 3
trail:
before: 1 # The number of links before the current page
after: 3 # The number of links after the current page
# Comments
disqus_shortname: al-folio # put your disqus shortname
@ -98,7 +99,7 @@ exclude: [vendor]
# Plug-ins
plugins:
- jekyll-email-protect
- jekyll-paginate
- jekyll-paginate-v2
- jekyll/scholar
- jemoji

View File

@ -41,11 +41,11 @@
</li>
<!-- Other pages -->
{% for p in site.pages %}
{% if p.title and p.url != "/" %}
{% if p.nav %}
<li class="nav-item {% if page.title == p.title %}active{% endif %}">
<a class="nav-link" href="{{ p.url | prepend: site.baseurl | prepend: site.url }}">
{{ p.title }}
{% if page.nav == p.nav %}
{% if page.title == p.title %}
<span class="sr-only">(current)</span>
{% endif %}
</a>

View File

@ -1,23 +1,17 @@
{% if paginator.total_pages != 1 %}
<div class="pagination clearfix mb1 mt4">
<div class="left">
{% if paginator.previous_page %}
{% if paginator.page == 2 %}
<a class="pagination-item" href="{{ site.baseurl }}/blog/">{{ site.text.pagination.newer }}</a>
{% else %}
<a class="pagination-item" href="{{ paginator.previous_page_path | prepend: site.baseurl }}">{{ site.text.pagination.newer }}</a>
{% endif %}
{% else %}
<span class="pagination-item disabled">{{ site.text.pagination.newer }}</span>
{% if paginator.total_pages > 1 %}
<nav aria-label="Blog page naviation">
<ul class="pagination pagination-lg justify-content-center">
<li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
<a class="page-link" href="{{ paginator.previous_page_path | prepend: site.baseurl }}" tabindex="-1" aria-disabled="{{ paginator.previous_page }}">Newer</a>
</li>
{% if paginator.page_trail %}
{% for trail in paginator.page_trail %}
<li class="page-item {% if page.url == trail.path %}active{% endif %}"><a class="page-link" href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}">{{ trail.num }}</a></li>
{% endfor %}
{% endif %}
</div>
<div class="right">
{% if paginator.next_page %}
<a class="pagination-item" href="{{ paginator.next_page_path | prepend: site.baseurl }}">{{ site.text.pagination.older }}</a>
{% else %}
<span class="pagination-item disabled">{{ site.text.pagination.older }}</span>
{% endif %}
</div>
<div class="pagination-meta">Page {{ paginator.page }} of {{ paginator.total_pages }}</div>
</div>
<li class="page-item {% unless paginator.next_page %}disabled{% endunless %}">
<a class="page-link" href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
</li>
</ul>
</nav>
{% endif %}

View File

@ -9,7 +9,7 @@ layout: page
{% if page.profile %}
<div class="profile col-4 {% if page.profile.align == 'left' %}order-first{% endif %}">
{% if page.profile.image %}
<img src="{{ page.profile.image | prepend: '/assets/img/' | prepend: site.baseurl | prepend: site.url }}">
<img class="img-fluid z-depth-1 rounded" src="{{ page.profile.image | prepend: '/assets/img/' | prepend: site.baseurl | prepend: site.url }}">
{% endif %}
{% if page.profile.address %}
<div class="address">

View File

@ -3,6 +3,7 @@ layout: page
title: projects
permalink: /projects/
description: A growing collection of your cool projects.
nav: true
---
{% for project in site.projects %}

View File

@ -4,6 +4,7 @@ permalink: /publications/
title: publications
description: Publications by categories in reversed chronological order. Generated by jekyll-scholar.
years: [1956, 1950, 1935, 1905]
nav: true
---
{% for y in page.years %}

View File

@ -3,6 +3,7 @@ layout: page
permalink: /teaching/
title: teaching
description: Materials for courses you taught. Replace this text with your description.
nav: true
---
For now, this page is assumed to be a static description of your courses. You can convert it to a collection similar to `_projects/` so that you can have a dedicated page for each course.

View File

@ -5,10 +5,10 @@
// Typography
a, table.table a {
color: $link-color;
color: $theme-color;
display: inline-block;
&:hover {
color: $link-color;
color: $theme-color;
text-decoration: underline;
}
&:hover:after {
@ -17,6 +17,7 @@ a, table.table a {
}
// Math
.equation {
margin-bottom: 1rem;
text-align: center;
@ -26,9 +27,6 @@ a, table.table a {
// Profile
.profile {
img {
box-shadow: 0 0 5px $grey-color;
}
.address {
font-family: monospace;
font-size: 1.2rem;
@ -46,7 +44,6 @@ a, table.table a {
border-bottom: 1px solid $grey-color-light;
opacity: 0.95;
}
.navbar.navbar-light {
// Remove link decoration
a {
@ -56,15 +53,15 @@ a, table.table a {
}
.navbar-nav .nav-item .nav-link {
&:hover {
color: $link-color;
color: $theme-color;
}
}
.navbar-nav .nav-item.active>.nav-link {
background-color: inherit;
color: $link-color;
color: $theme-color;
font-weight: bolder;
&:hover {
color: $link-color;
color: $theme-color;
}
}
.contact-icon {
@ -72,7 +69,7 @@ a, table.table a {
a {
color: $grey-color-dark;
&:hover {
color: $link-color;
color: $theme-color;
}
}
}
@ -115,11 +112,14 @@ a, table.table a {
// News
.news table td {
font-size: 1rem;
}
// Social (bottom)
.social {
text-align: center;
.contact-icon {
@ -127,7 +127,7 @@ a, table.table a {
a {
color: $grey-color-dark;
&:hover {
color: $link-color;
color: $theme-color;
}
}
}
@ -147,7 +147,7 @@ footer.fixed-bottom {
a {
color: white;
&:hover {
color: lighten($link-color, 25%);
color: lighten($theme-color, 25%);
text-decoration: none;
}
}
@ -159,3 +159,48 @@ footer.sticky-bottom {
padding-bottom: 40px;
font-size: 0.9rem;
}
// Blog
.header-bar {
border-bottom: 1px solid $grey-color-light;
text-align: center;
padding-top: 2rem;
padding-bottom: 5rem;
h1 {
color: $theme-color;
font-size: 5rem;
}
}
.post-list {
margin: 0;
margin-bottom: 40px;
padding: 0;
li {
border-bottom: 1px solid $grey-color-light;
list-style: none;
padding-top: 2rem;
padding-bottom: 2rem;
.post-meta {
color: $grey-color;
font-size: 0.875rem;
margin-bottom: 0;
}
a {
color: black;
text-decoration: none;
&:hover {
color: $theme-color;
}
}
}
}
.pagination .page-item.active .page-link {
background-color: $theme-color;
&:hover {
background-color: $theme-color;
}
}

View File

@ -1,5 +1,7 @@
---
layout: default
pagination:
enabled: true
---
<div class="post">
@ -13,7 +15,7 @@ layout: default
<ul class="post-list">
{% for post in paginator.posts %}
<li>
<h2><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2>
<h3><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
<p class="post-meta">{{ post.date | date: '%B %-d, %Y' }}</p>
<p>{{ post.description }}</p>
</li>