如何在Magento 2默认主题中创建自定义导航头部并添加链接、图标与标题？

一、直接修改主题模板（最直观的方式） #

Magento 2 默认头部导航的核心模板位于vendor/magento/module-theme/view/frontend/templates/html/header.phtml，绝对不要直接修改核心文件，按以下步骤继承到自己的主题：

1. 复制上述文件到你的主题目录：app/design/frontend/[你的Vendor名]/[你的Theme名]/Magento_Theme/templates/html/header.phtml
2. 打开复制后的文件，找到导航相关代码块（通常在navigation.sections容器附近），插入自定义内容：
   示例（带图标和标题的链接）：

   <div class="custom-nav-item">
       <a href="/custom-page" class="custom-nav-link">
           <span class="nav-icon"><i class="fa fa-heart"></i></span>
           <span class="nav-title">我的收藏</span>
       </a>
   </div>
   

   注：如果用Font Awesome图标，需先在主题中引入图标库，或改用Magento自带的图标类。
3. 在主题的web/css/source/_extend.less中添加样式，保证和默认导航风格统一：

   .custom-nav-item {
       display: inline-block;
       margin-left: 18px;
       .custom-nav-link {
           display: flex;
           align-items: center;
           color: #222;
           .nav-icon {
               margin-right: 6px;
               font-size: 17px;
           }
           &:hover {
               color: #e2264d;
           }
       }
   }
   

二、用布局XML注入（更规范的Magento开发方式） #

不想修改模板文件的话，可通过布局XML注入自定义块：

1. 在主题目录创建布局文件：app/design/frontend/[你的Vendor名]/[你的Theme名]/Magento_Theme/layout/default.xml
2. 找到<referenceContainer name="header.container">节点，添加自定义块：

   <referenceContainer name="header.container">
       <block class="Magento\Framework\View\Element\Template" name="custom.nav.block" template="Magento_Theme::html/custom-nav.phtml" after="-"/>
   </referenceContainer>
   

3. 创建对应的模板文件app/design/frontend/[你的Vendor名]/[你的Theme名]/Magento_Theme/templates/html/custom-nav.phtml，写入导航内容：

   <div class="custom-nav-wrapper">
       <ul class="custom-nav-list">
           <li>
               <a href="/track-order">
                   <span class="nav-icon"><svg>/* 这里放SVG图标代码 */</svg></span>
                   <span>订单追踪</span>
               </a>
           </li>
           <li>
               <a href="/quick-contact">
                   <span class="nav-icon"><svg>/* 这里放SVG图标代码 */</svg></span>
                   <span>快速联系</span>
               </a>
           </li>
       </ul>
   </div>
   

4. 同样在_extend.less中添加响应式样式，确保移动端显示正常。

三、必做的后续操作 #

• 修改后清除缓存：执行命令bin/magento cache:clean和bin/magento cache:flush
• 若开启了静态文件部署，需重新部署：bin/magento setup:static-content:deploy -f
• 自定义动态内容（如登录后显示专属链接）：需创建自定义模块，继承Magento\Framework\View\Element\Template类处理逻辑，再通过布局XML引用该类。

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