skrip42/static-collector-bundle

添加静态收集器以控制你的静态资源!

v2.0.3 2021-04-16 05:41 UTC

This package is auto-updated.

Last update: 2024-09-16 13:28:30 UTC


README

简化静态资源工作的symfony扩展包

前提

通常,你包含的小部件或自定义表单UI元素需要它们自己的样式和脚本。标准的静态资源连接系统提供了3种连接选项

  • 在包含的小部件或表单元素的模板中包含静态资源,这会导致重复和最终HTML中的静态资源“溅射”
  • 在构造函数模板中包含所有静态资源,这使得控制变得更加困难,并违反了依赖原则
  • 在基本模板中包含所有静态资源,这会导致加载的静态资源不必要地增加大小,并违反了依赖原则

此扩展包提供了一种没有这些缺点的方法

它的工作原理

StaticCollector是一个全局存储。在模板执行期间,脚本、样式和资源在StaticCollector中注册。在模板编译成HTML后,静态资源收集器将静态资源放置在标记的位置

安装

composer require Skrip42/static-collector-bundle

使用方法

  • 只需在基础模板中放置"{% static_place 'script' %}"和"{% static_place 'style' %}"标签,您希望看到包含的脚本和样式的地方
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}PonBase{% endblock %} - PonBase</title>
        <link rel="shortcut icon" href="{{ asset('images/favicon.ico') }}" type="image/x-icon">
        {% static_place 'style' %}
    </head>
    <body>
        ...
        {% static_place 'script' %}
    </body>
</html>
  • 现在您可以在您使用的任何模板中连接静态资源
{% block custom_input_for_example %}
  ...
  {% static 'some_webpack_asset' %}
  {% static 'https://external.com/script.js?may_have=parameters' %}
  {% static 'https://external.com/style.css?may_have=parameters' %}
{% endblock %}

高级

静态类型

您可以指定应放置哪些静态资源(样式、脚本或全部)

    {% static_place 'style' %}
    {% static_place 'script' %}
    {% static_place 'all' %}

静态顺序控制

您可以通过手动指定来定义连接静态资源的顺序

  {% static 'some_important_static' order 0 %}

顺序号必须是任何整数。默认情况下,所有静态资源的顺序号为1000

将静态资源分组

您可以标记静态资源属于某个组

  {% static 'some_static' group 'some_group' %}

  ...

  {% static_place all group 'some_group' %}

默认情况下,所有静态资源都放置在“默认”组中

使用PHP处理静态资源

您可以从PHP代码中连接和获取静态资源

namespace App\Some;

use Skrip42\Bundle\StaticCollectorBunde\StaticCollector;

class SomeClass
{
    public function someMethod(StaticCollector $staticCollector)
    {
        //you can add some static to collector
        $staticCollector->addStatic('webpack_asset_or_external_link');
        //you can get style and script from staticCollector
        $staticCollector->getStyleTags();
        $staticCollector->getScriptTags();
        //you can remove all static from staticCollector
        $staticCollector->clear();
    }
}