Infinite scroll for Jekyll based blogs. See it in action.

Created by Tobias Ahlin, original repository Updated for 2021 by Armando Maynez

The basic functionality for infinite scroll across ALL SITE POSTS is maintained and additional functionality for infinite scroll using a subset of posts filtered by tag (see it in action here) was developed. This can be modified to work for categories as well.

The installation process is therefore divided in two parts accordingly:

• Copy the infinite-jekyll.js and jquery-3.2.1.min.js files to your /assets/js/ folder
• Copy all-posts.json to the root of your Jekyll site.

Add the following HTML tags to the /_layouts/head.html (or /_layouts/default.html) file to ensure jquery and infinite jekyll are loaded:

<script src="{{site.baseurl}}/assets/js/jquery-3.2.1.min.js"></script>
<script src="{{site.baseurl}}/assets/js/infinite-jekyll.js"></script>

In index.html or in any file where you want the infinite scrolling to happen make sure you have this code:

<div class="archive tag-master">
	<div class="post-list">
	{% for post in site.posts limit: 3 %}
		<div class="post">
			<a class="post-list-title" href="{{ post.url }}">{{ post.title }}</a>
			{% include post_meta.html type="post-card-meta" %}
			<div class="post-excerpt">
				{{ post.content | markdownify | strip_newlines | truncatewords: 100 }}<a class="read-more" href="{{ post.url }}"> read more</a>
			</div>
		</div>
	{% endfor %}
	</div>
</div>
<div class="infinite-spinner"></div>

Please note that some element classes are important and without them the script will not work. In particular tag-master and post-list must be kept exactly as they are. The rest are just for styling.

This code will render excerpts of 100 words per post, and if you click either on the title or on "read more" there is a link to the full article. If you however want to scroll over full articles, then replace this:

        <div class="post-excerpt">
            {{ post.content | markdownify | strip_newlines | truncatewords: 100 }}<a class="read-more" href="{{ post.url }}"> read more</a>
        </div>

with this:

        <div class="post-content">
            {{ post.content | markdownify }}
        </div>

/spinner.css contains a simple CSS spinner that works in most modern browsers. Open up css/main.css, and at the very end, paste everything from spinner.css.

The infinite scroll works by taking parts of your static html files of your posts and "inserting" them into the file we are scrolling into. Therefore, an element with a .post class is required in the post.html page, this file is typically found under the /_layouts folder. For the infinite scrolling to work in a page showing only post excerpts use this code within your /_layouts_post.html file:

<style>
    .hidden {
      display:none;
    }
</style>
<section class="hidden">
  <div class="post">
      <a  class="post-list-title" href="{{ page.url }}">{{ page.title }}</a>
      {% include post_meta.html type="post-card-meta" %}
        <div class="post-excerpt">
            {{ page.content | markdownify | strip_newlines | truncatewords: 100 }}<a class="read-more" href="{{ page.url }}"> read more</a>
        </div>
  </div>
</section>

If you want to scroll across all of your full posts, then just ensure you have a DIV container with class="post" encompassing your full blog post.

/optional.css contains an example of styles for the list to render properly, copy them into your css/main.css file as required.

And you're done. Happy scrolling!

If you already did the above, and you have the basic functionality working fine the next steps are:

• Copy posts-by-tag.json to the root of your Jekyll site.

Copy /_pages/tag.html file into your own site's /_pages/ directory.

This page renders an HTML file with ALL the posts per tag, the trick is to hide them all, and only show the ones we want to scroll on, therefore we must add the following CSS to your main.css file:

.hidden{display:none}

Whether you have a tags page or show the tags on your posts, you will need to link those to your new tag.html file properly for it to work.

The liquid code for the link is:

<a href="{{ site.url }}/tag/?tag={{ tag | url_encode }}" class="tag">{{ tag }}</a>

And here is the full code to create a tags list, with number of posts per tag and the links already created:

{% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
{% assign tag_words = site_tags | split:',' | sort %}
<div class="tag-cloud">
    <ul class="tags">
        {% for item in (0..site.tags.size) %}{% unless forloop.last %}
            {% capture this_word %}{{ tag_words[item] | strip_newlines }}{% endcapture %}
            <li><a href="{{ site.url }}/tag/?tag={{ this_word | url_encode }}" class="tag">{{ this_word }} <span>({{ site.tags[this_word].size }})</span></a></li>
        {% endunless %}{% endfor %}
    </ul>
</div>

And you are all set!