Glyph - Layouts

Topic Layout
Index Layout
Creating a Custom Layout

When generating topic-based outputs, Glyph uses layouts to render topics as standalone documents. By default, the following two layout are used:

topic — used to render standard topics.
index — used to render the index page of your document.

Layouts are nothing more than “fancy” Glyph macros defined using the Glyph language (i.e. by using macro rewriting) within a single .glyph file.

Topic Layout ⇈

The default layout used to render all web topics (the layout used for web5 topics is very similar) is defined as follows:

 1document[
 2  head[
 3    style[default.css]
 4  ]
 5  body[
 6    @class[topic]
 7    section[
 8      @title[{{title}}]
 9      @id[{{id}}]
10      navigation[{{id}}]
11{{contents}}
12      navigation[{{id}}]
13    ]
14  ]
15]

Note that it takes the following attributes, passed automatically by Glyph when processing each topic:

title — the title of the topic.
id — the ID of the topic.
contents — the body of the topic.

Index Layout ⇈

The default layout used to render the web index page (the layout used for the web5 index is very similar) is defined as follows:

 1document[
 2  head[
 3    style[default.css]
 4  ]
 5  body[
 6    @class[topic]
 7    halftitlepage[
 8      title[]
 9      subtitle[]
10      author[]
11    ]
12    frontmatter[
13      toc[]
14    ]
15  ]
16]

Index layouts do not take any attribute or parameter (basically because they are used to produce only one page).

Creating a Custom Layout ⇈

To create a custom layout, proceed as follows:

Create a .glyph file in the lib/layouts directory, within your project, e.g. mytopic.glyph
Add the layout code, making sure (for topic layouts) that all the attributes (title, id, contents) are specified correctly.
Set the output.*.layouts.topic setting to the name of the new layout (mytopic).

TipYou can override which layout to use on a specific topic by specifying it in a @layout attribute.