EasyAdmin 添加自定义 Web 资产

Posted 2023-02-16

【中文标题】EasyAdmin 添加自定义 Web 资产

【英文标题】：EasyAdmin Adding Custom Web Assets

【发布时间】：2019-08-03 03:53:47

【问题描述】：

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

【参考方案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 变量）

【讨论】：

其实我几个月前就找到了这个问题的解决方案，但忘记在这里发布了。这篇文章让我想起了这个问题。让我检查一下我的解决方案并与您的答案进行比较。