Skip to content

Templates

Jump to bottom
Matthias edited this page Mar 5, 2020 · 9 revisions

A template defines the layout for all entries of the same group (ie Weapons)

Structure

A template is written in basic HTML/CSS. <html> and <body> tags can be omitted.
To put in dynamic SnD uses Nunjuks, a templating engine.
To create or edit a template, go to the webfrontend and take a look at the Templates section. When a template is created or opened there are four pages to it. Information, Print Template, List Template and Data Skeleton.

Information

Holds basic information for the template, like a name and description, shown in the template list.

Print Templates

The definition of the printout, written in HTML/CSS and rendered to a printable image by webkit.

List Template

Data Skeleton

Holds the actual data of an entry. The data is enveloped in a json to make it universally readable by SnD. Json are text only and can be edited in any text editor. There are lots of tools and validators easily available online.

Examples

Since some data is needed before it can be printed, there is an import script to get the data of open5e imported into SnD. For this tutorial some data is manually created. Starting with the base information. Goto Templates->Create New. First enter the Name and optionally a description. Then switch over to Data Skeleton. The structure of the skeleton is like this:

{
  ATTRIBUTE_NAME: ATTRIBUTE_VALUE
}

This would be the simplest json possible. A base structure for magic items would look something like this:

{
  "requires_attunement": "",
  "document_slug": "",
  "document_title": "",
  "slug": "",
  "name": "",
  "type": "",
  "desc": "",
  "rarity": ""
}

Of course this is highly customizable. When the skeleton is created, hit Save. The new template is shown and can be opened by clicking Open Template. By clicking New Entry, a new item for that template can be entered. The dialogue showing all the options previously defined in the data skeleton.

The next step is to create a layout to print. Click Edit Template and open Print Template.
This is basic HTML/CSS, with dynamic values provided by Nunjuks out of the data skeleton.

<style>
/* Divider Name / Stats */
hr.divider {
  border: 2px solid black;
}

/* Divider standard */
hr.std {
  border: 1px solid black;
}
</style>

<h1>{{it.name}}</h1>
{{it.type}} ({{it.rarity}})
<hr class="divider">
<B>Requires Attunement:</B> {{it.requires_attunement}}<br />
{{it.desc}}

This is not the most basic example, but it shows how to integrate some CSS. Saving this template end selecting the created item will show a preview on the right side.

Clone this wiki locally