Skip to content
A Jekyll plugin for single page websites.
JavaScript Ruby
Find file
Latest commit b25bfbe @JCB-K typo
Failed to load latest commit information.
.gitignore removed some files
LICENSE ommited extensions
README.md typo
jquery.min.js initial commit
pagify.js initial commit
root initial commit
singlepage-jekyll.rb oops, bug squashed.

README.md

Singlepage-Jekyll

A simple Jekyll plugin to make content load dynamically using pagify.js.

Description

Pagify.js is a great jQuery plugin to make simple one-page websites, with content loading dynamically. The only problem with it is that you have to define every page you want to load manually. This is fine for a static page, but it get's in the way when you're hosting a website with regularly updated content. This plugin aims to solve that.

It generates a JSON file of all your pages, which you can pass to pagify.js.

Usage

Files

Place "singlepage-jekyll.rb" in _plugins, "root" in _includes, and jquery-min.js and pagify.js in your website root. Install ruby-json:

gem install json

Setup

Create a layout in _layouts, such as default.html. Load Pagify and jQuery:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="pagify.js" type="text/javascript"></script>

Then go on and add the following:

<body>
{% include root %}
{{ content }}
</body>

Create a page with the layout default. Create a div that will contain page content:

<div id='page_holder' />

Call pagify on the aforementioned div and pass in options. The only required option is pages.

$.getJSON('html.json', function(data) {
   $('#page_holder').pagify({ 
       pages: data, 
       default: 'home'
   }); 
});

Link to other pages by linking to hashes of their page names:

<a href='#contact'>Contact</a>
<a href='#about'>About</a>

Or like this:

{% for post in site.posts %}
<a href="#{{ post.id }}">{{ post.title }}</a>
{% endfor %}

All the pages you want to call don't need a layout, as their content will just be loaded within a div on the page. To learn more about the options of pagify.js, check out it's Github page.

Everything else

This is just a first version. Feel free to improve and send a pull request.

Made by Jacob Klapwijk.

MIT licensed.

Something went wrong with that request. Please try again.