[Magento 2 定制化开发] 之十：顶部导航菜单添加首页链接，及关于我们的链接

Magento 2 顶部的 menu 菜单，默认只会展示产品分类。
如果想添加自定义的导航链接，例如返回首页链接，及 about us 链接。就需要修改主题代码。

这点非常的不人性化。

参考样式

https://breeze.swissupdemo.com/breeze_evolution/

学名

https://breezefront.com/docs/menu

class="navigation-wrapper"

layout

<!-- Move menu right after the logo -->
<move element="navigation.wrapper" destination="header-wrapper" after="logo"/>

<!-- Move menu inside header, after all content -->
<move element="navigation.wrapper" destination="header.container"/>

默认配置：

./theme-frontend-breeze-evolution/Magento_Theme/layout/default.xml:
<move element="navigation.wrapper" destination="header-wrapper" after="logo"/>

topmenu.phtml

# find vendor/swissup/ -name "topmenu.phtml"
# find vendor/magento/ -name "topmenu.phtml"
vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml

https://magento.stackexchange.com/questions/256335/magento-2-how-to-create-home-link-in-category

/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */

$columnsLimit = $block->getColumnsLimit() ?: 0;
$_menuHtml = $block->getHtml('level-top', 'submenu', $columnsLimit)
?>

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <li class="level0 nav-1 category-item first level-top">
                <a href="/" class="level-top"><span>Home</span></a>
        </li>

        <?= /* @noEscape */ $_menuHtml?>
        <?= $block->getChildHtml() ?>

        <li class="level0 nav-1 category-item level-top">
                <a href="/about-us" class="level-top"><span>About us</span></a>
        </li>
        <li class="level0 nav-1 category-item level-top last">
                <a href="/contact" class="level-top"><span>Contact</span></a>
        </li>
    </ul>
</nav>

清空缓存

php bin/magento cache:flush

即可生效

继续阅读 🌳

Magento 2 主题定制化开发系列教程

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式