aeruz/twig-deferred-extension

Aeruz Twig Deferred 扩展

维护者

详细信息

gitlab.com/aeruz/twig-deferred-extension

源代码

问题

安装: 838

依赖项: 0

建议者: 0

安全: 0

星标: 0

分支: 0

1.3.0 2024-09-04 18:40 UTC

Requires

Requires (Dev)

MIT f4ff60cbda389b536f53f5ec692e09442a21a66b

This package is auto-updated.

Last update: 2024-09-04 19:08:54 UTC

README

此扩展是对 Eugene Leonovich (rybakit) 的原始想法及其 Twig Deferred Extension 的全面重构。

这次重构是对原始扩展的完全重写，目标是使其能够正确工作（特别是对块的重写）并支持未来的 Twig 4.x 版本，同时只支持从 3.x 版本的 Twig。

Twig 版本支持

从 twig 3.9 开始，采用了一种新的渲染策略，这在本扩展中引入了一些副作用。因此，我们需要按照以下所示拆分对 twig 3.x 分支的支持

延迟扩展版本Twig 版本PHP 版本
>= 1.0.0, <= 1.0.2>= 3.0.0, < 3.9.0>= 7.4
由于问题 https://github.com/twigphp/Twig/issues/4008 不支持3.9.0, 3.9.1, 3.9.2
>= 1.1.0, <= 1.2.2>= 3.9.2, < 3.12.0>= 7.4
>= 1.3.0, < 2.0.0>= 3.12.0, < 4.0.0>= 8.0.2

新渲染策略仅从版本 1.2.0 开始支持

未来版本

延迟扩展版本Twig 版本PHP 版本
>= 2.0.0>= 4.0.0>= 8.0.2

一个允许延迟块渲染的 Twig 扩展。

安装

composer require aeruz/twig-deferred-extension

初始化

use Twig\DeferredExtension\DeferredExtension;
use Twig\Environment;

...

$twig = new Environment($loader);
$twig->addExtension(new DeferredExtension());

简单示例

{% block foo deferred %}
    {{ bar }}
{% endblock %}

{% set bar = 'bar' %}

foo 块将输出 "bar"。

高级示例

仅为示例目的，首先创建一个 全局 twig 变量

use Twig\Environment;

...

$twig = new Environment($loader);
$twig->addGlobal('assets', new \ArrayObject());

然后构建以下一系列模板

{# layout.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        {% block content '' %}

        {{ assets.append('/js/layout-header.js') }}

        {% block javascripts deferred %}
            {% for asset in assets %}
                <script src="{{ asset }}"></script>
            {% endfor %}
        {% endblock %}

        {{ assets.append('/js/layout-footer.js') }}
    </body>
</html>


{# page.html.twig #}
{% extends "layout.html.twig" %}

{% block content %}
    {{ assets.append('/js/page-header.js') }}

    {% if foo is defined %}
        {{ include("subpage1.html.twig") }}
    {% else %}
        {{ include("subpage2.html.twig") }}
    {% endif %}

    {{ assets.append('/js/page-footer.js') }}
{% endblock %}


{# subpage1.html.twig #}
{{ assets.append('/js/subpage1.js') }}


{# subpage2.html.twig #}
{{ assets.append('/js/subpage2.js') }}

生成的 html 将是以下内容

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <script src="/js/layout-header.js"></script>
        <script src="/js/page-header.js"></script>
        <script src="/js/subpage2.js"></script>
        <script src="/js/page-footer.js"></script>
        <script src="/js/layout-footer.js"></script>
    </body>
</html>

块重写

{# index.twig #}
{% extends "base.twig" %}
{% block foo %}foo is not deferred anymore{% endblock %}
{% block bar deferred %}bar is deferred now{% endblock %}

{# base.twig #}
{% block foo deferred %}foo is deferred{% endblock %}
{% block bar %}bar is not deferred{% endblock %}

许可

该库在 MIT 许可下发布。有关详细信息，请参阅捆绑的 LICENSE 文件。