Layout template example

randymized edited this page Apr 26, 2013 · 3 revisions
Clone this wiki locally

An example of how a layout can used with content rendered by a template engine adapter can be found in the malifi-marked project tests. Here, markdown text is rendered into an HTML fragment that is then inserted into a layout that is rendered by the Underscore template engine.

Setting up layout capability

The following steps define the rendering engine adapters, specify the path to the layout and implement the layout:

  • /default.meta.coffee defines a template map that maps md file extensions to the marked engine renderer and html extensions to the underscore engine renderer. It does not specify that a layout is to be used and in fact marked.md in the root directory is rendered without a layout.
  • /with_layout/default.meta.coffee specifies that the layout at /layout is to be used for anything rendered by the malifi-marked renderer in the /with_layout directory or its subdirectories.
  • layout_.coffee maps data from req.layout_context into the template and renders the template. A layout module, such as this one will always map req.layout_context.body into the layout context, but in this case a name element is being mapped into the template context from the context of the markdown template. If the name element is not present or if there is no context, the string 'no name!' will be used instead.
  • layout_.html is the layout template. It renders the name and rendered markdown, body into some minimalist HTML.

Using the layout

  • /with_layout/unnamed.md is some very simple markdown that will be rendered with layout. It demonstrates how once layout capability is set up, a complete page can be defined with a single minimal markdown file.
  • /with_layout/named.md and /with_layout/named.coffee demonstrates how by rendering the markdown with a context object, data, such as name can be made available to the layout. If layout_.coffee finds name in req.layout_context.context, it will use that as a name, otherwise it will use the string 'no name!'.