Customizing the Template

Templating in Raneto is powered by Mustache. All of the template views can be found in the themes/default/ folder. Feel free to customize the template as you wish. The template structure is as follows:

  • layout.html: The parent template. You'll probably want to customize this first
  • home.html: The homepage template. Shown if you don't have an index.md
  • page.html: The template used for single pages
  • search.html: The template used for search results
  • error.html: Shown when Raneto encounters an error or can't find a page

Remember you will need to restart the app after changing the template.

Enable Features on Pages by Altering Config Settings

Some features can be enabled on your pages by changing settings in the config.default.js file.

Enable Table of Contents

In config.default.js set table_of_contents to true. Raneto uses markdown-toc to generate the table of contents on pages, so you can customize the appearance of the tables of contents by specifying values for parameters in the table_of_contents_options object in config.default.js.

Display Site Menu on Pages

In config.default.js set menu_on_pages to true.
To make the menu collapsible, so that category headings can be expanded or collapsed - useful for sites with lots of pages - set menu_on_pages_collapsible to true.

Public Files

All static files in Raneto (images, CSS, JavaScript files, etc.) are served from the public folder.
This is so that no one can access any other files in the install.
Only files in the public folder are available to visitors that are not logged in.

It's worth noting that when customising Raneto you should always make your own files rather than customizing the existing Raneto files, so that your changes don't get lost when you update Raneto.

Template Variables

Below are a list of template variables available to use in their respective templates:

home.html

  • config: Holds an array of values from config.js
  • pages: Structured list of categories and pages (used for navigation)
  • body_class: Class for the <body> tag

page.html

  • config: Holds an array of values from config.js
  • pages: Structured list of categories and pages (used for navigation)
  • body_class: Class for the <body> tag
  • meta: Holds an array of values taken from the page meta comment block (e.g. meta.title)
  • content: The HTML content of the page
  • last_modified: The formatted date of the time the file was last modified

search.html

  • config: Holds an array of values from config.js
  • pages: Structured list of categories and pages (used for navigation)
  • body_class: Class for the <body> tag
  • search: The current search query
  • searchResults: An array search results

Array Structure

The pages array has a structure similar to the following:

  • slug: The category slug
  • title: The category title
  • is_index: True for the top level files (ie not in a category)
  • class: CSS class
  • sort: The sort index for this category
  • files[]: Array of pages in this category
  • slug: The page slug
  • title: The page title
  • active: True if the current page is "active"
  • sort: The sort index for this page

The searchResults array contains items which include:

  • slug: The page slug
  • title: The page title
  • body: The page content
  • excerpt: The page excerpt
Last updated on 25th Sep 2022