在Symfony2 twig express中添加CSS

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?

~ 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; }
<strong>{{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }}</strong>

Everything between the {{ }} twig parenthesis will be evaluated to a string, so this would be equivalent to:

<strong>Username</strong>