如何覆盖自定义模块中的 HTML 文件答案

【问题标题】：How to override an HTML file in a custom module如何覆盖自定义模块中的 HTML 文件
【发布时间】：2016-05-25 07:06:02
【问题描述】：

我正在为 magento 2 中的付款方式开发一个自定义模块。目前我正在使用供应商目录中的 cc-form.html 并且该模块工作正常。见下面的路径。

供应商/magento/module-payment/view/frontend/web/template/payment/cc-form.html

有没有办法覆盖 HTML 文件？

【问题讨论】：

标签： magento2

【解决方案1】：

是的，有。您可以在 pub static 中查看静态资产的路径是如何构建的。

工作原理

每个资产都可以通过 itenter code heres “RequireJS ID”从页面访问。它与真实路径相似，但有所不同。

例如文件http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico。

它的真实路径是/app/code/Magento/Theme/view/adminhtml/web/favicon.ico。
它的 RequireJS ID 是Magento_Theme/favicon.ico。这意味着可以通过require("text!Magento_Theme/favicon.ico") 或类似命令访问该文件。

您可以发现 RequireJS ID 由模块名称和有用的路径部分组成（在文件夹 web 之后）。

如何替换文件

所以你有文件
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

在它加载 src 的页面上
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

所以它的RequireJS ID是
Magento_Payment/template/payment/cc-form.html

旁注：UI 组件内部的东西等于Magento_Payment/payment/cc-form。自动添加单词“template”和“.html”。

现在您可以通过 RequireJS config 替换此文件以用于应用程序

var config = {
  "map": {
    "*": {
      "Magento_Payment/template/payment/cc-form.html": 
          "<OwnBrand>_<OwnModule>/template/payment/cc-form.html"
    }
  }
};

此代码 sn-p 您放置在模块的 requirejs-config.js 文件中。就是这样。

【讨论】：

另一个使用注意事项：在我的例子中，模板是一个 admin UI 组件，它包含一个路径图，如下所示：'ui/template': 'Magento_Ui/templates'（参见 Composer-based文件在vendor/magento/module-ui/view/base/requirejs-config.js)。因此，在我的重新映射条目中，目标路径（左侧）必须从 Magento_Ui/template/form/element/media.html 更改为 ui/template/form/element/media.html。