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。
解决方案
在特定页面中添加自定义 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 变量)
推荐阅读
- php - 如果在 WooCommerce 中有应用的优惠券,则自定义结帐字段
- ios - Agora iOS 视频未在网页上显示
- c - (int)0 是否与 '==' 的空指针相同?
- php - 使用消息无效块类型获取 Mage_Core_Exception:Mage_Zeon_Manufacturer_Block_Home
- asp.net - 应用 Razorpay 支付网关无法获取表单响应 asp.net 4.7.2
- python - Python程序实现反幻方
- python - 理解分类报告:与混淆矩阵的差异
- c# - MassTransit,除非消息在公共库中,否则不会激活消费者
- python - 使用多索引重新索引并创建空日期
- imagemagick - 居中右对齐文本的框