Paged.js: Difference between revisions
No edit summary |
No edit summary |
||
| Line 13: | Line 13: | ||
'''Remember''': you need to open a Paged.js document through a web server. You can use a local server, either through your code editor or by running a local server in Python: <code>$ python3 -m http.server</code>. | '''Remember''': you need to open a Paged.js document through a web server. You can use a local server, either through your code editor or by running a local server in Python: <code>$ python3 -m http.server</code>. | ||
< | <syntaxhighlight lang="html"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
| Line 35: | Line 35: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
You can also use one of the Paged.js '''starterkits''': https://gitlab.coko.foundation/pagedjs/starter-kits | You can also use one of the Paged.js '''starterkits''': https://gitlab.coko.foundation/pagedjs/starter-kits | ||
Revision as of 08:23, 3 October 2023
Paged.js workshop @ XPUB
(13 October 2022)
Paged.js example
paged.js-polyfill.jsyou can download here: https://unpkg.com/browse/pagedjs@0.4.1/dist/paged.js-interface.cssyou can download here: https://gitlab.coko.foundation/pagedjs/interface-polyfill
Remember: you need to open a Paged.js document through a web server. You can use a local server, either through your code editor or by running a local server in Python: $ python3 -m http.server.
<!DOCTYPE html>
<html>
<head>
<title>Paged.js template example</title>
<meta charset="utf-8">
<!-- load paged.js
(the polyfill is used to turn your whole page into pages)
-->
<script src="paged.js-polyfill.js"></script>
<!-- load the paged.js interface stylesheet -->
<link href="paged.js-interface.css" rel="stylesheet" type="text/css">
<!-- load your own stylesheet -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<section id="cover"></section>
<section id="introduction"></section>
<section class="article"></section>
<section id="backcover"></section>
</body>
</html>
You can also use one of the Paged.js starterkits: https://gitlab.coko.foundation/pagedjs/starter-kits
And this cheatsheet is helpful too: https://pagedjs.org/documentation/cheatsheet/
In general Paged.js has a lot of documentation on their website with lots of examples!