A Zim-wiki export template for a adaptive website

I wrote before about Zim, a graphical text editor used to maintain a collection of wiki pages. Although mostly aimed at individual use, notebooks can also be shared as html files (and a few other formats) by exporting the notebook or individual pages as web pages, as explained here. And to give you an idea what you can get, see here an example of one of my notebooks.

For one of my projects I wanted to create a small web-site with fact sheets that provide a short description of vegetation types in eastern Africa. These fact sheets go together with vegetation maps we have created for various countries in the region. The idea was to keep the fact sheets as notes in a Zim notebook, and use the export function to create a small web-site.

A prerequisite was that these sheets should also be easy to view on tablets or mobile phones. The default templates are not really responsive, i.e., they do not adapt really well to different screen sizes, so I decided to create my own template. A good starting point is this wiki page. I opted for the easy way out and started with an existing template (the ZeroFiveEight template) and added a bit of jquery and jQueryMobile magic (or so it seems to my inexperienced eyes) to make the pages responsive.

There are a few glitches to solve, and I am sure a lot can be improved in terms of efficiency etc (suggestions are of course very welcome), but for a first attempt…  well, it works for me. See here for an example, or some screenshots below.

If you want to give it a try, the template is available for download (or here if you are using Zim 0.6) Make sure to download both the ecodiv.html file and the ecodiv folder. You probably want to adapt the html file to fit your needs. I added some notes in the file where you may want to make some changes.


Example how the result looks like on screens that are wider than 700px

Example how the result looks like on wider screens

Example how the result looks like on screens that are wider than 700px - with the side panel open

The side panel with the index. This uses the jQueryMobile panel widget. See here for easy ways to adapt the look and behaviour of the panel.

Using the responsive design view function in Firefox to show how the web page looks on smaller screens.




7 thoughts on “A Zim-wiki export template for a adaptive website

  1. I use Zim to publish a website for my Dungeons and Dragons players. A mobile-friendly Zim template is exactly what I needed, so that people can look up information on their phones at the table. Thanks for contributing this back to the community!

  2. Pingback: Version 0.61 of Zim is out | Ecostudies

  3. Pingback: Update of Zim-wiki export template for an adaptive website | Ecostudies

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s