As you know, you can use Booktype to publish your books into different formats but you can also view them on the web. In this blog post I will try to show how that web view can be customized with simple template modification. By default Booktype comes with predefined templates but they can all be easily customized to your own needs (templates can also be multilingual).
Let us imagine we are publishing shop “Awesome Sun” who is interested in publishing books about solar power. Booktype project has been installed in /var/www/awesomesun/ directory on our web hosting server. We are not so happy with the default look and feel so we decided to change it. Where should our web designers look at? In the case of “Awesome Sun” template files should be placed in /var/www/awesomesun/templates/ directory while all static files (CSS files, JavaScript files, images, …) should be placed in /var/www/awesomesun/static/ directory. Fairly simple for now. Before doing any work it would be wise to check documentation how to work with Django templates. As you could guess, examples in this blog post are oversimplified.
By default, to present books on the web Booktype comes with Django application called “Reader” and we will customize templates for that application. Original templates for this application are placed in $BOOKTYPESOURCE/lib/booki/reader/templates/ directory and our customized templates will be placed in /var/www/awesomesun/templates/reader/ directory. All you have to do is either copy original template files into awesomesun project and modify them or write new templates from scratch.
What kind of modifications are we making? As you can see on the screenshots bellow we want to have very simple book view, we want our “Table of contents” to be always visible while we scroll the page and we want our header to be fixed on top with name of the book and chapter we are currently reading.
To make it work I created new base template called new_base.html and placed it in /var/www/awesomesun/templates/ directory. This is a base template which other templates for “Reader” application should include. This template just includes jQuery library and creates place holders for future content.
{% load i18n messaging_tags booki_tags %}
{% booki_site_favicon %}
{% booki_site_metadata %}
{% block header %}
{% endblock %}
{% block content %}
{% endblock %}
Then I had to create /var/www/awesomesun/templates/reader/book_chapter.html template file. This is where I include additional JavaScript library, CSS file, display “Table of contents” and content of chapter. Besides HTML and CSS there are just two important things to look at. Chapter content is inserted with {% booki_format content %} and “Table of contents” is inside of variable chapters. It all depends how you want to show your “Table of Contents” but here I am using “for” loop to construct unordered list with chapter titles. Everything else is just CSS styling.
{% extends "new_base.html" %}
{% load i18n booki_tags %}
{% block header %}
{% endblock %}
{% block content %}
{{ book.title }}
{% endblock %}
Essentialy this is how you customize Booktype templates. I have compiled all needed files (with CSS and additional JavaScript) from this blog post here. Please download it if you are interested in more details.