Theming - funzioni Twig e traduzioni

Funzioni Twig disponibili in Drupal

• attach_library($library)
• active_theme() ritorna il nome del tema corrente
• active_theme_path() ritorna il path relativo del tema corrente
• create_attribute($attributes) crea un oggetto Attribute
• render_var($arg)
• file_url($uri) trasforma il prametro in path relativo (verificare)
• link($text, $uri, $attributes) ritorna un link
• path($name, $parameters, $options) ritorna il path
• url($name, $parameters, $options) ritorna l'url

Creare attributi con create_attribute()

Generare path e URL

Creare link verso route Drupal

Includere asset o file del tema

{% set my_attribute = create_attribute() %}
{%
  set my_classes = [
    'kittens',
    'llamas',
    'puppies',
  ]
%}
<div{{ my_attribute.addClass(my_classes).setAttribute('id', 'myUniqueId') }}>
  {{ content }}
</div>

<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>

{# Link alla frontpage view. #}
<a href="{{ path('view.frontpage.page_1') }}">{{ 'View all content'|t }}</a>

{# Link alla pagina dello user #}
<a href="{{ path('entity.user.canonical', {'user': user.id}) }}">{{ 'View user profile'|t }}</a>

{# Link alla pagina di un nodo #}
<a href="{{ path('entity.node.canonical', {'node': node.id}) }}">{{ 'View node page'|t }}</a>

{# Link ad un termine di tassonomia #}
<a href="{{ path('entity.taxonomy_term.canonical', {'taxonomy_term': term.id}) }}">{{ 'View taxonomy term'|t }}</a>

{# Aggiunge un query parameter. In questo esempio event_user_sync.registration è una rotta custom in un modulo #}
{% set redirect_path = path('event_user_sync.registration', {'node': node.id}) %}
<a href="{{ path('user.register',{},{'query':{'destination': redirect_path }}) }}">{{ 'Register'|t }}</a>

Genera un URL assoluto per l'URL corrente:
<a href="{{ url('<current>') }}">{{ 'Reload'|t }}</a>

Genera un URL assoluto per la pagina principale:
<a href="{{ url('<front>') }}">{{ 'Home'|t }}</a>

{# Link al tema corrente, in questo esempio il codice della SVG viene incluso nel button #}
<div class="menu-main-togglewrap">
  <button type="button" name="menu_toggle" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Toggle the menu">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
</div>

Traduzioni per siti multilingua

Il filtro t consente di tradurre le stringhe e dovrebbe essere utilizzato per tutte le stringhe aggiunte manualmente al template e visualizzate dagli utenti. Le stringhe statiche inserite manualmente nel template devono passare da |t o {% trans %}. Le variabili dinamiche non vanno tradotte direttamente con {{ var|t }}, se devono essere inserite in una frase traducibile, vanno usate come placeholder.

Tradurre stringhe nei template

In un file .html.twig:

<p>{{ 'Benvenuto nel nostro sito web!'|t }}</p>

<p>{{ 'Ciao, @nome!'|t({ '@nome': nome_utente }) }}</p>

{# usare sempre un filtro in modo che la variabile venga sanitizzata #}
{# il filtro placeholder oltre a sanitizzare racchiude il testo in un tag <em> #}
{% trans %}
Ciao {{ user.name | escape }}, la data di oggi è: {{ date|placeholder }}.
{% endtrans %}

{# all'interno di un blocco trans le variabili sono sanitizzate automaticamente #}
{% trans %}
C'è 1 commento.
{% plural count %}
Ci sono {{ count }} commenti.
{% endtrans %}

{# esempio sbagliato #}
<p>{{ 'Submitted by'|t }} {{ author_name }} {{ 'on'|t }} {{ date }}</p>

{# esempio corretto #}
<p>{{ 'Submitted by @author_name on @date' |t({'@author_name': author_name, '@date': date}) }}</p>

{# altro esempio corretto #}
<p>{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}</p>

{# esempi sbagliati: non si deve stampare la variabile direttamente nel blocco ma si deve usare un segnaposto #}
{{ var1|t }}
{% trans %}{{ var1 }}{% endtrans %}

{# esempi corretti #}
{{ '@var1'|t({'@var1': var1}) }}

{% trans %}
{{ var1|escape }} // qui non è proprio correttissimo perchè non bisogna passare una variabile come stringa da tradurre
{% endtrans %}

Placeholder nelle traduzioni

Traduzioni in PHP

In un file .theme:

<?php

$messaggio = t('Benvenuto nel nostro sito web!');

$nome = 'Mario';
$saluto = t('Ciao, @nome!', ['@nome' => $nome]);

$variables['messaggio_tradotto'] = $saluto;

?>

Traduzioni in JavaScript

In un file JavaScript:

(function (Drupal) {
    Drupal.behaviors.nomeTemaTraduzione = {
        attach: function (context, settings) {
            
            var messaggio = Drupal.t('Benvenuto nel nostro sito web!');
            
            var nomeUtente = 'Luigi';
           // la @ applica l'escaping sicuro della stringa
            var saluto = Drupal.t('Ciao, @nome!', { '@nome': nomeUtente });
            
            console.log(saluto);
            
            //con il segnaposto % viene applicato l'escaping 
            //e il testo viene anche racchiuso in un tag <em>
            Drupal.t('Il file è stato salvato nel percorso %path.', {'%path': path_to_file});

            // il segnaposto con ! si usa per testo che non deve essere sanitizzato
            Drupal.t('Ciao <a href="!url">@name</a>', {
                '!url': 'http://example.com',
                 '@name': user.displayName
             });

           // nel caso specifico dell'url si può usare il segnaposto : in modo da evitare testo non sanitizzato
            Drupal.t('Ciao <a href=":url">@name</a>', {
                ':url': 'http://example.com',
                 '@name': user.displayName
             });
        }
    };
})(Drupal);