readme.md 1.72 KB
Newer Older
julientaq's avatar
julientaq committed
1 2 3
# Use Paged.js inside Hugo the easy way :)

Paged.js is a library that transforms HTML and CSS into beautiful paginated document, ready to be printed or saved as PDF. If you want to know more about Paged.js, please go to [https://www.pagedjs.org]
julientaq's avatar
julientaq committed
4 5 6 7 8
This project is an implementation for the static site generator Hugo.

## Install component as a submodule

```sh
julientaq's avatar
julientaq committed
9
git submodule add https://gitlab.pagedmedia.org/julientaq/pagedjs-hugo.git themes/pagedjs
julientaq's avatar
julientaq committed
10
```
julientaq's avatar
julientaq committed
11

12 13 14 15 16 17 18
To update the component

```sh
git submodule update --remote themes/pagedjs
```


julientaq's avatar
julientaq committed
19 20
## Using the plug-in

julientaq's avatar
julientaq committed
21 22 23 24
If you want to use the component, you need to add two partials: 

- `pagedjs-header.html` in the `<head>` of the template using `{{ partial "pagedjs-header.html" . }}`.
- `print-button.html` as the first element of the body to fix it top right of the page, using `{{ partial "print-button.html" }}`.
julientaq's avatar
julientaq committed
25 26 27 28 29 30

## Styling your css

The paged.js module includes a couple of CSS files to work:

- `theme/pagedjs/assets/css/print.css` that contains the styles used for printing (setting up the page size, the running heads, etc.). If you want to change how the PDF will look once printed, you can check [https://www.pagedjs.org](https://www.pagedjs.org).
julientaq's avatar
julientaq committed
31
- `theme/pagedjs/assets/css/pagedjs.css` to define the `#Print` button css properties;
julientaq's avatar
julientaq committed
32 33 34 35 36 37 38 39
- `theme/pagedjs/assets/css/interface.css` that offer the minimum styles to have a book-looking preview on screen.

If you want to use your own style, you can create a `print.css`, a `pagedjs.css` or a `interface.css` in your Hugo’s project `assets/css/` directory, or, if your making a theme, in the `themes/name-of-the-theme/assets/css/`. Modifying any of the provided CSS files will make it harder to update when new version of paged.js is released.


## License

MIT