https://github.com/tobiasahlin/infinite-jekyll

Infinite scroll for Jekyll based blogs
https://github.com/tobiasahlin/infinite-jekyll

Last synced: 14 days ago
JSON representation

Infinite scroll for Jekyll based blogs

• Host: GitHub
• URL: https://github.com/tobiasahlin/infinite-jekyll
• Owner: tobiasahlin
• License: mit
• Created: 2013-11-21T20:27:21.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2021-04-04T00:27:24.000Z (over 3 years ago)
• Last Synced: 2024-08-01T00:56:00.607Z (3 months ago)
• Language: JavaScript
• Size: 213 KB
• Stars: 227
• Watchers: 9
• Forks: 36
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Infinite Jekyll

===============

Infinite scroll for Jekyll based blogs. See it in action at [tobiasahlin.com/blog/](http://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:

```html

```

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

```html

```

### Render posts, not links

How fun is it to only see links? Open up `index.html`. Find this line: 

```html



{{ 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:

```html



	
{{ post.title }}

	
{{ post.date | date_to_string }}


	


	{{ post.content }}

	



```


### 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:

```html



```


`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!