Load more content

blog.php

<?php snippet('header') ?>

<main class="main blog" role="main">

	<?php $articles = $page->children()->visible()->flip()->paginate(6) ?>
	<?php foreach($articles as $article): ?>
	<article class="posts">
		<h1><?php echo $article->title()->html() ?></h1>
		<time datetime="<?php echo $article->date('c') ?>" pubdate="pubdate"><?php echo $article->date('d.m.Y H:i') ?></time>
		<p><?php echo $article->text()->excerpt(300) ?></p>
		<a href="<?php echo $article->url() ?>">Read more…</a>
	</article>
	<?php endforeach ?>

	<?php if($articles->pagination()->hasPages()): ?>
	<nav class="pagination">
		<?php if($articles->pagination()->hasNextPage()): ?>
		<a class="next" data-site="<?php echo $articles->pagination()->nextPage() ?>" data-href="<?php echo $articles->pagination()->nextPageURL() ?>">Show me more article</a>
		<?php else: ?>
		<p class="end">Congrats, you’ve reached the end of the internet.</p>
		<?php endif ?>
	</nav>
	<?php endif ?>

</main>

<?php snippet('footer') ?>

script.js

$(document).on("click", ".pagination .next", function() {

	var temp = $("<div>"),
		self = $(this);

	self
		.html("Loading...")
		.addClass("loading");

	temp.load($(this).data("href") + ".blog .posts, .pagination", function() {
		window.history.pushState({page: self.data("site"), postion: $(document).scrollTop()}, document.title, self.data("href"));
		self.parent(".pagination").remove();
		$(".blog").append(temp.html());
	});

});