Need help with infinite-jekyll?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

tobiasahlin
213 Stars 30 Forks MIT License 39 Commits 11 Opened issues

Description

Infinite scroll for Jekyll based blogs

Services available

!
?

Need anything else?

Contributors list

Infinite Jekyll

Infinite scroll for Jekyll based blogs. See it in action at tobiasahlin.com/blog/.

Getting Started

Add the

js
folder and
all-posts.json
to the root of your Jekyll site. If you're not already using jQuery, open
_layouts/default.html
and include it:

In

_layouts/default.html
, include
infinite-jekyll.js
after jQuery:

Render posts, not links

How fun is it to only see links? Open up

index.html
. Find this line:
  • {{ post.date | date_to_string }} » {{ post.title }}
  • Remove everything within the

    li
    . Open up
    _layouts/post.html
    and copy the markup for single posts. Paste it within the
    li
    , and replace every instance of
    page.
    with
    post.
    . This is how it should look using the default markup:
  • {{ post.title }}

    {{ post.date | date_to_string }}

    <div class="post">
    {{ post.content }}
    </div>
  • Limit the number of posts

    Per default, Jekyll will render all posts in your entire archive. For lazy loading to make sense, we need to set a limit. Open up

    index.html
    and find this line:
    {% for post in site.posts %}
    

    Change it to:

    {% for post in site.posts limit: 10 %}  
    

    You can change

    10
    to whatever number you like. The same number will be used for lazy loading new posts, so
    10
    will render 10 static post, and then fetch another 10 posts every time you get near the bottom of the page.

    Add the spinner

    You should see your 10 latest posts on the front page, but no infinite scroll yet. Infinite Jekyll will only try to lazy load posts if there's a spinner present. At the very end of

    index.html
    , add the spinner:

    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
    .

    And you're done. Happy scrolling!

    We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.