Phonemos User Guide

HTML Template

The HTML can be customized using a Handlebars template. See the Handlebars guide for detailed information.

You have to provide the complete HTML (starting with <!DOCTYPE html> and <html ...

Template Variables

The following placeholders can be used (but don't have to be used):

Name

Type

Description

content.main

HTML (use with {{{content.main}}})

The main content, namely the actual content of the wikipage (without the title)

content.titleImageLong

HTML (use with {{{content.titleImageLong}}})

The title including an image (if present). The image is cropped to a flat long format.

content.titleImageSquare

HTML (use with {{{content.titleImageSquare}}})

The title including an image (if present). The image is cropped to a square format.

content.pageTree

HTML (use with {{{content.pageTree}}})

All pages in the topic as a tree structure.

content.tableOfContents

HTML (use with {{{content.tableOfContents}}})

The table of contents of the current page

content.searchBox

HTML (use with {{{content.searchBox}}})

A search input field that will full-text search across the topic

content.languageSwitch

HTML (use with {{{content.languageSwitch}}})

A language switcher dropdown. Only renders content if the topic has multiple languages enabled.

title

String

The title of the page. Typically used in head/title and in h1

topicName

String

The title of the topic. Typically used in head/title or in heading boxes.

logoUrl

String (URL)

URL to the topic logo image. Can be used for favicon or header logo.

contentLanguage

String (e.g. de)

Language of the content. Use as <html lang={{contentLanguage}}>

stylesheetHrefs

Array of String

Links to stylesheets, e.g. the one from the theme itself.

Including Stylesheets

Use the following pattern in the <head> to include stylesheets:

1 2 3 {{#each stylesheetHrefs}} <link rel="stylesheet" type="text/css" href="{{this}}" /> {{/each}}