Skip to main content

Template Development

Templates control the appearance of the client site, player cabinet, and individual modules. They should remain readable, safe, and resilient to missing data.

Workflow​

  1. Find the page or block that needs a change.
  2. Copy the template into the working theme or extension.
  3. Make the smallest useful change.
  4. Check light and dark themes.
  5. Check mobile width.
  6. Check empty, success, and error states.

Template Structure​

A good template usually contains:

  • clear block heading;
  • data availability check;
  • main output;
  • empty state;
  • error or warning output;
  • partial templates for repeated elements.

Safe Output​

By default, output user data with escaping. Use raw HTML only for trusted content that has already been sanitized by the system.

Safe Output
{{ user.name }}
{{ notice.content }}
{{ trustedNoticeHtml|raw }}

Do not use raw for email, nicknames, user messages, form URLs, or other user-controlled data.

Safe Output
- {{ user.email|raw }}
- {{ comment.text|raw }}
+ {{ user.email }}
+ {{ comment.text }}

Reusable Blocks​

Use include or macro for cards, table rows, and repeated forms. This reduces differences between pages and makes maintenance easier.

Reusable Blocks
{% include '@site/partials/server-card.html.twig' with {
  server: server
} %}

Interface States​

For each block, check:

  • data loaded;
  • list is empty;
  • user is not authorized;
  • operation is forbidden;
  • server is unavailable;
  • API returned an error.