A Jekyll plugin for single page websites.
JavaScript Ruby
Switch branches/tags
Nothing to show
Latest commit b25bfbe Apr 13, 2012 @JCB-K typo
Permalink
Failed to load latest commit information.
.gitignore removed some files Apr 12, 2012
LICENSE ommited extensions Apr 12, 2012
README.md typo Apr 13, 2012
jquery.min.js initial commit Apr 12, 2012
pagify.js initial commit Apr 12, 2012
root initial commit Apr 12, 2012
singlepage-jekyll.rb oops, bug squashed. Apr 12, 2012

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.