Skip to content

Getting started

Jump to bottom Edit New page
Dovyski edited this page Sep 30, 2011 · 4 revisions

Waker is composed of two html files and some javascript/css/images used to load and organize the content. A vanilla installation of Waker has the following structure:

  • waker/
  • index.html
  • config.html

The index.html should not be edited, unless you want to make some modification to Waker's layout. The most important file is config.html, the place Waker will look for content pages (see sections below).

1. Add content pages

In order to add a new content page, just create an html file in the root folder (where index.html is). You can name the file the way you want, say dossier-01.html.

This page (and any other you add) will be dynamically loaded by Waker into a special div in index.html. Any content page must not include the complete HTML tags structure (<html>, <head>, <body>, etc). It is supposed to have "pure" content, such as a set of paragraphs. You are free to use any html/css/javascript knowledge you have, but bear in mind that the content will be loaded into a div.

Every content page can feature one headline image, which is displayed at the beginning of the content. In order to specify a headline image, just add a common <img> tag with the class img-headline. E.g.

<img src="path/to/headline/img.jpg" class="img-headline" />

About the content layout, you must specify a "starting headline", which is the text in bold displayed at the beggining of the page, below the headline image. E.g.

	<div class="content-element">
		<div class="starting-headline">
			<h1>Embedding YouTube Videos, the card-flip effect and playing sound</h1>
		</div>
	</div>

All other texts can be wrapped by the following structure:

<div class="content-element">
	<div class="large-column float-left">
	     <p>Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales.</p>
	     <p>Donec molestie dui et nisl posuere volutpat rhoncus mauris porta.</p>
	</div>
</div>

2. Tell Waker about the page you created

After you added any page you must list it in config.html so your page can be loaded by Waker. All you have to do is to create a link to your new page inside config.html, using <a> tag. Such link will not be displayed to the user, instead it will be used by Waker to create the navegation bar (prev/next button, index, etc).

A link to a page should look like the following:

<a href="dossier-01.html" data-thumb="path/to/thumb.jpg" title="Page tilte displayed in the index">Shot description displayed below the page title in the index.</a>

Explaning each attribute:

  • href tells where the page is. In order to avoid any problems with image/css links, the better place to add your page file is in the same directory config.html and index.html are;

  • data-thumb is the path to a 100x100 px image that will be used as the page thumbnail in the index (the one that appears when the user clicks the index icon, at the upper right corner of the page);

  • title is the title displayed in the index and also in the browser window.

The content of the <a> tag (text between <a> and </a>) will be used as a short description of the page. This text is displayed below the page title in the index.

The page of the first link listed in config.html will be used as the cover page (first page of the magazine).

3.You're done!

Fire up index.html and check your pages. Waker will create the index and do the pages loading for you.

Add a custom footer
Add a custom sidebar
Clone this wiki locally