时间戳

首页 > 解决方案 > EasyAdmin 添加自定义 Web 资产

reactjs - EasyAdmin 添加自定义 Web 资产

问题描述

我正在尝试为我的项目添加谷歌地图搜索功能，我为此找到了一个非常好的反应代码（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。

标签： reactjssymfonywebpackeasyadmin

解决方案

在特定页面中添加自定义 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 %}

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

推荐阅读