Skip to content

Instantly share code, notes, and snippets.

@bradonomics
Last active July 16, 2021 05:44
Show Gist options
  • Save bradonomics/ab42dd473c602ceb713d6a56eeada2c1 to your computer and use it in GitHub Desktop.
Save bradonomics/ab42dd473c602ceb713d6a56eeada2c1 to your computer and use it in GitHub Desktop.
<div class="wrap">
<div id="container" class="wrap-inner" data-page="{{ currentPage }}" data-totalPages="{{ paginator.total_pages }}">
{% assign posts = site.posts | where: "language", page.language %}
{% if paginator.page %}
{% assign offset = paginator.page | minus:1 | times:paginator.per_page %}
{% assign currentPage = paginator.page %}
{% else %}
{% assign offset = 0 %}
{% assign currentPage = 1 %}
{% endif %}
{% for post in site.posts limit:site.paginate offset:offset %}
<article class="post entry" itemscope itemtype="http://schema.org/CreativeWork">
<header class="entry-header">
<h2 class="entry-title" itemprop="headline"><a href="{{ post.url }}" rel="bookmark">{{ post.title }}</a></h2>
<p class="entry-meta">
<time class="entry-time" itemprop="datePublished" datetime="{{ post.date | date_to_xmlschema }}">{% include post-time.html %}</time>
</p>
</header>
<div class="entry-content" itemprop="text">
<a href="{{ post.url }}" aria-hidden="true">
<div class="post-image">
<img width="756" height="300" src="{% if post.featured_image_path %}{{ post.featured_image_path }}{% else %}/images/default.jpg{% endif %}" alt="{{ post.title }}" itemprop="image">
</div>
</a>
<p>{{ post.content | strip_html | truncatewords: 60 }}</p>
</div>
</article>
{% endfor %}
{% assign postCount = site.posts | size %}
{% assign postsCovered = site.paginate | plus:offset %}
{% if postsCovered < postCount %}
<button id="loadmore" class="button loadmore">Load more posts</button>
{% endif %}
</div>
</div>
$("#loadmore").click(loadMorePosts);
function loadMorePosts() {
var _this = this;
var $container = $("#container");
var nextPage = parseInt($container.attr("data-page")) + 1;
var totalPages = parseInt($container.attr("data-totalPages"));
$(this).addClass("loading");
$.get("/blog/page" + nextPage, function (data) {
var htmlData = $.parseHTML(data);
var $articles = $(htmlData).find("article");
$container.attr("data-page", nextPage).append($articles);
if ($container.attr("data-totalPages") == nextPage) {
$("#loadmore").remove();
}
$(_this).removeClass("loading");
});
}
@bradonomics
Copy link
Author

ajax-error

@bradonomics
Copy link
Author

I'm trying to get this to work for multiple languages, but since the paginate plugin won't output the pages for more than one language it's not working. Any advice on getting pagination or a "load more" option to work for multi-language sites would be very welcome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment