Your first template

This example contains one page, several field types, and a safe runtime value supplied through the query context.

1. Create a project

text

campaign/
├── index.tpl
└── assets/
    └── style.css

campaign/index.tpl:

tpl

@template "Campaign" version=1 description="First campaign"

@section content "Content"
  @param title String = "New campaign" label="Headline" required
  @param introduction Markdown = "A short **description**." label="Introduction"
  @param accent Color = "#ec684d" label="Accent"
  @param destination Url = "https://trafficops.io" label="Destination"
@endsection

@layout
  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>{{title}}</title>
      <link rel="stylesheet" href="assets/style.css" />
    </head>
    <body style="--accent: {{accent}}">
      <main>
        <p>Campaign: {query.campaign}</p>
        <h1>{{title}}</h1>
        <div>{{& introduction}}</div>
        <a href="{{destination}}">Continue</a>
      </main>
    </body>
  </html>
@endlayout

{{title}} escapes a scalar value. {{& introduction}} is available only for Markdown and Wysiwyg fields and passes the value through the sanitizer. {query.campaign} belongs to the safe dialect runtime context.

2. Prepare values

Create values.json beside the campaign directory, not inside it: the CLI copies ordinary project files as assets.

json

{
  "title": "Autumn campaign",
  "introduction": "Launch a **new offer** in minutes.",
  "accent": "#d84c35",
  "destination": "https://trafficops.io/start"
}

You can keep runtime context in a separate context.json:

json

{
  "query": {"campaign": "autumn"},
  "locale": "en",
  "actions": {}
}

3. Generate the page

npx @trafficops/cli \
  --template ./campaign \
  --data ./values.json \
  --context ./context.json \
  --output ./generated

Without --data, the CLI opens an interactive form. Add --force when intentionally replacing files generated by a previous run.

4. Continue in the editor

Open Template Studio, choose Open ZIP, and import a ZIP containing the contents of campaign/. The editor provides a parameter form, live preview, and downloads for either generated pages or the editable source project.

A complete two-page project is available in examples/campaign.

Your first template ​

1. Create a project ​

2. Prepare values ​

3. Generate the page ​

4. Continue in the editor ​

Your first template

1. Create a project

2. Prepare values

3. Generate the page

4. Continue in the editor