EasyAdmin 添加自定义 Web 资产

Question

我正在尝试为我的项目添加谷歌地图搜索功能，我为此找到了一个非常好的反应代码 (https://github.com/ubilabs/react-geosuggest)，但我无法将它添加到我的管理面板。 问题是我无法将自定义 javascript 文件添加到 easyadmin。 在文档中它说我们可以添加自定义网络资产，如下所示

- '/bundles/user/js/admin4.js'
- 'bundles/app/js/admin5.js'

但我不明白应该将我的自定义 javascript 文件放在哪个文件夹中。在 easyadminbundle 示例中，有一个自定义 demo.css 位于 /src/Resources/public/stylesheets 文件夹下；我尝试了类似的方法，但没有成功。

然后我尝试使用 webpack encore 添加此自定义 javascript 文件，但随后我看到我的 webpack 资产未在 easyadmin 中加载。

所以我被卡住了，我希望你能帮助我了解如何添加我的自定义 javascript。

Answer 1

在特定页面中添加自定义网络资产

根据documentation：

添加模板选项（全局或仅对某些实体）以定义用于渲染界面各个部分的 Twig 模板的路径

# config/packages/easy_admin.yaml
easy_admin:
    design:
        # these custom templates are applied to all entities
        templates:
            edit: 'admin/custom_edit_form.html.twig'
    entities:
        Customer:
            # ...
            # these custom templates are only applied to this entity and
            # they override any global template defined in 'design.templates'
            templates:
                edit: 'admin/customer/edit.html.twig'
                new: 'admin/customizations/customer_new.html.twig'

这些文件位于templates 文件夹中。

然后扩展easyadmin的默认模板：

{# templates/admin/new.html.twig #}
{% extends '@EasyAdmin/default/new.html.twig' %}

{% block head_custom_stylesheets %}
    {# ... customize the stylesheets with webpack-encore or rel element #}

{% block body_custom_javascript %}
    {# ... customize the javascripts with webpack-encore or script ... #}
{% endblock %}

在那里，您可以像在模板的其余部分中一样访问所有内容（例如，使用全局 twig 变量）