How to easily identify website's environment

As a Skeleton website can exist in as many environments as you want, you'll quickly need to identify them from each other. With the following piece of code you can directly retrieve from the request the environment's identifier:

{%- set environment = app.request.get('_environment', 'live') -%}

So now that you have the identifier of the environment is up to you to use this variable in your template. Such as data attribute in the body (and be able to target it in your CSS to specify watermark):

{%- set environment = app.request.get('_environment', 'live') -%}
<html lang="en" data-trans-default-domain="{{ trans_default_domain|e('html_attr') }}" data-environment="{{ environment|e('html_attr') }}">
....
    <body class="environment-{{ environment|e('html_attr') }}">

Note the '|e('html_attr')' filter that ensure that the environment identifier is properly encoded. It's always recommanded.

Another idea is to prefix the page title by the environment identifier, but in the live environment:

{%- set environment = app.request.get('_environment', 'live') -%}
<title>
    {%- if 'live' != environment %}
        {{ environment|upper }}:&nbsp;
    {%- endif -%}
    {%- block title %}Hello, world!{% endblock title %} | {{ 'site.name'|trans -}}
</title>

Check to upper filter, with that trick you'll be able to quickly identify environments in your browser's tabs.