EasyAdmin添加自定义网络资产

Question

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

- '/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

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

根据文档的说法：

添加模板选项(全局或仅对某些实体)，以定义用于呈现接口每个部分的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 %}

在那里，您可以像以前一样在模板的其余部分访问所有内容(例如，使用全局小枝变量)。