在Symfony2 twig express中添加CSS

Question

In Twig HTML file here is a very normal line:

{{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }}

How to add a <strong></strong> tag to wrap username?

Answer 1

~ is Twig's string concatenation operator. From Twig's docs:

~: Converts all operands into strings and concatenates them.
{{ "Hello " ~ name ~ "!" }} would return Hello John! (assuming name is 'John').

 

In your case, this should translate to something like:

{{ 'layout.logged_in_as'|trans({'%username%': '<b>'~app.user.username~'</b>'}, 'FOSUserBundle') }}

Or perhaps:

{% set boldUsername = '<strong>' ~ app.user.username ~ '</strong>' %}
{{ 'layout.logged_in_as'|trans({'%username%': boldUsername}, 'FOSUserBundle') }}

If autoescaping of the html is a problem, you may need to apply the raw filter:

{% set boldUsername = '<strong>' ~ app.user.username ~ '</strong>' %}
{{ 'layout.logged_in_as'|trans({'%username%': boldUsername}, 'FOSUserBundle')|raw }}

Finally, if you prefer making styling in css (who doesn't), add a <span> with a class instead of <strong>:

{% set usernameMarkup = '<span class="username">' ~ app.user.username ~ '</span>' %}
{{ 'layout.logged_in_as'|trans({'%username%': usernameMarkup}, 'FOSUserBundle')|raw }}

And in a css file:

.username { font-weight: bold; }