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.htmlwith the content:

{% extends template.self %}

{% block faq_header_brand %}
<img src="https://mywebsite.com/logo.png" height="30" />
{% endblock %}

Create a file _layouts/website/page.htmlwith 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:

results matching ""

    No results matching ""