在宏中清楚地包含内容所需的 css/js？

Question

我有一个这样的页面模板：

{# page.twig #}    
{% import "_widgets.twig" as widgets %}

{% include '_header.twig' %}

<body>
    {{ widgets.fancy_widget(record.items) }}
    {# more content goes here #}
</body>

_header.twig 包含 <head> 标签和 css 和 javascript 的一些块：

{# _header.twig #}
<!DOCTYPE html>

<head>
    {% block javascripts %}
    {% endblock %}

    {% block stylesheets %}
    {% endblock %}
</head>

_widgets.twig 包含生成一些标记的宏

{# _widgets.twig #}
{% macro fancy_widget(fanciful_items) %}

    {# insert special css and js into <head> only if the macro is used #}
    {% block stylesheets %}
        <link rel="stylesheet" href="css/some_fancy_widget.css">
    {% endblock %}

    {% block javascripts %}
        <script src="js/some_fancy_widget.js"></script>
    {% endblock %}


    {% for item in fanciful_items %}
        {# output some fancy markup #}
    {% endfor %}

{% endmacro %}

如果调用宏，我想做的是将小部件 css/js 添加到 _header.twig 中的块。理想情况下，它们只会添加一次，因此多次调用不会创建额外的 <link> 和 <script> 标签。

这可能吗？或者有更好的方法来完成这个吗？

Answer 1

我会说你没有正确使用 Twig。

事实上你的 page.twig 必须扩展 base.html.twig.

{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block stylesheets %}{% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
    {% block body %}{% endblock %}
    {% block javascripts %}{% endblock %}
</body>
</html>

那么你的 page.html.twig 必须扩展这个 base.html.twig

您不能在宏中定义或覆盖块。最简单的方法是：

在你的page.html.twig中：

{% extends 'base.html.twig' %}
{% import "_widgets.twig" as widgets %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="css/some_fancy_widget.css">
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="js/some_fancy_widget.js"></script>
{% endblock %}
{% block body %}

{% endblock %}

和其余的（你的宏）： _widgets.twig :

{# _widgets.twig #}
{% macro fancy_widget(fanciful_items) %}


{% for item in fanciful_items %}
    {# output some fancy markup #}
{% endfor %}

{% endmacro %}

在宏中清楚地包含内容所需的 css/js？

Cleanly including css/js required by content in a macro?

symfony

macros

twig

bolt-cms