forked from Dovyski/Waker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dossier-02.html
68 lines (52 loc) · 3.39 KB
/
dossier-02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--
This is an ordinary content page.
For more information, see dossier-01.html.
-->
<img src="./img/dossier-02/dossier-start-bg.jpg" class="media-headline" />
<h1>How to create content pages</h1>
<div class="full-column float-right">
<img src="./img/dossier-02/image-bracket.jpg" class="media-left"/>
<p>
Waker is composed of two html files and some javascript/css used to load and organize the content. A vanilla installation of Waker has the following structure:
<ul>
<li><code>waker/</code></li>
<li><code>index.html</code></li>
<li><code>config.html</code></li>
</ul>
</p>
<p>The <code>index.html</code> should not be edited, unless you want to make some modification to Waker's layout. The most important file is <code>config.html</code>, the place Waker will look for content pages.</p>
<p>In order to add a new content page, just create an html file in the root folder (where <code>index.html</code> is). You can name the file the way you want, say <code>dossier-01.html</code>. This page (and any other you add) will be dynamically loaded by Waker into a special div in <code>index.html</code>. Any content page must not include the complete HTML tags structure (<code><html></code>, <code><head></code>, <code><body></code>, etc).</p>
</div>
<div class="full-column float-left">
<p>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.</p>
<p>All texts in the page can be wrapped by a <code><p></code> or a <code><div></code> tags as the following structure:</p>
<p>
<pre>
<div class="large-column float-left">
<p> ( ... ) </p>
<p> ( ... ) </p>
</div>
</pre>
</p>
</div>
<div class="full-column float-left">
<h1>Tell Waker about the page you created</h1>
<p>After you added any page you must list it in <code>config.html</code> so your page can be loaded by Waker. All you have to do is to create a link to your new page inside <code>config.html</code>, using an <code><a></code> tag. E.g.</p>
<pre>
<a href="dossier-01.html" data-thumb="path/thumb.jpg" title="Page title">Shot description.</a>
</pre>
</div>
<div class="full-column float-left">
<p>The 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).</p>
<div class="media-right">
<img src="./img/dossier-02/image-robot.png" />
</div>
<p>Explaning each link attribute:</p>
<ul>
<li><code>href</code> 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 <code>config.html</code> and <code>index.html</code> are;</li>
<li><code>data-thumb</code> is the path to a <code>100x100 px</code> image that will be used as the page thumbnail in the index (the one that appears when the user clicks the index icon);</li>
<li><code>title</code> is the title displayed in the index and also in the browser window.</li>
</ul>
<p>The content of the <code><a></code> tag (text between <code><a></code> and <code></a></code>) will be used as a short description of the page. This text is displayed below the page title in the index.</p>
<p>The page of the first link listed in <code>config.html</code> will be used as the <strong>cover page</strong> (first page of the magazine).</p>
</div>