如何在Magento 2子主题中添加并应用breadcrumbs.phtml

嘿，这个问题我之前帮不少开发者解决过，其实按照Magento 2的主题模板覆盖规则来操作就很简单，一步步来：

第一步：在子主题中创建对应模板路径 #

首先，你需要匹配原模块模板的路径结构来创建子主题里的目录。原面包屑模板位于 vendor/magento/module-theme/view/frontend/templates/html/breadcrumbs.phtml，所以子主题里的目标路径应该是：

app/design/frontend/[你的Vendor名称]/[你的子主题名称]/Magento_Theme/templates/html/

先手动创建好这个目录结构，然后把vendor目录里的原breadcrumbs.phtml文件复制到这个新目录下。

第二步：修改模板的HTML结构与自定义类 #

打开你复制到子主题的breadcrumbs.phtml文件，按照需求调整HTML结构并添加自定义类。举几个常见的修改例子：

• 给面包屑容器添加自定义类：

<div class="breadcrumbs custom-breadcrumb-container" data-mage-init='{"breadcrumbs": {}}'>

• 给每个面包屑项添加自定义类：

<li class="item custom-breadcrumb-item">
    <a href="<?= $block->escapeUrl($_crumbInfo['link']) ?>" title="<?= $block->escapeHtmlAttr($_crumbInfo['title']) ?>">
        <?= $block->escapeHtml($_crumbInfo['label']) ?>
    </a>
</li>

修改完成后保存文件即可。

第三步：验证生效（无需额外XML配置） #

划重点：只要你的路径完全正确，Magento的主题 fallback机制会自动优先加载子主题里的模板，不需要额外配置XML文件。不过为了确保修改立刻生效，建议执行以下操作：

• 清理Magento缓存：运行命令

bin/magento cache:clean
bin/magento cache:flush

• 刷新前端页面，检查面包屑的HTML结构是否已经更新为你修改后的版本

特殊场景：通过XML指定模板（可选） #

如果因为某些定制需求，你需要明确通过布局XML来指定模板路径，可以在子主题的app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default.xml中添加以下代码：

<body>
    <referenceBlock name="breadcrumbs">
        <action method="setTemplate">
            <argument name="template" xsi:type="string">Magento_Theme::html/breadcrumbs.phtml</argument>
        </action>
    </referenceBlock>
</body>

不过这一步通常是不需要的，只有在模板路径覆盖不生效的特殊情况下才需要尝试。

内容的提问来源于stack exchange，提问作者Kazpilot25