Customizing Themes
To customize a theme to create a new directory _layouts
in the root folder. If you have multiple languages directories, create inside the language specific folder.
Follow the struct bellow to customize pages for different outputs:
Folder | Description |
---|---|
_layouts | Main folder containing all the templates |
_layouts/website/page.html | Template for a normal page |
_layouts/ebook/page.html | Template for a normal page during ebook generation (PDF, ePub, Mobi) |
The files inside this folder will overwrite the template of the selected theme.
Example file structure:
You can also set a custom style for the theme, if it allows.
Example book.json
{
"plugins": ["theme-material",
"-autotheme",
"-fancybox",
"-lunr",
"-fontsettings",
"-sharing",
"-search"],
"pluginsConfig": {
"theme-material": {
"styles": {
"website": "styles/website.css"
}
}
}
Look at the documentation for more information.
Exemple: extending theme-faq
To extend https://github.com/GitbookIO/theme-faq install it setting book.json:
{
"plugins": [
"theme-faq",
"-fontsettings",
"-sharing"
]
}
Run on the terminal:
$ gitbook install
$ gitbook serve
Adding logo to header
Create a file_layouts/website/page.html
with the content:
{% extends template.self %}
{% block faq_header_brand %}
<img src="https://mywebsite.com/logo.png" height="30" />
{% endblock %}
Adding navigation links to the header
Create a file _layouts/website/page.html
with the content:
{% extends template.self %}
{% block faq_menu %}
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Contact us</a></li>
<li><a href="#">Return to SuperWebsite</a></li>
</ul>
{% endblock %}
To check which blocks the theme has, look at node_modules folder to see theme structure: