Magento 2 - 将静态页面添加到导航答案

【问题标题】：Magento 2 - Add Static page to navigationMagento 2 - 将静态页面添加到导航
【发布时间】：2017-10-14 09:58:17
【问题描述】：

我正在 Magento 2 中的一家商店工作。它基于 Magento Luma 主题。

但现在我有点卡住了 - 我如何将静态 cms 页面与商店类别一起添加到导航中？

【问题讨论】：

【解决方案1】：

请在下面位置的 default.xml 文件中编写代码-

vendor/magento/module-theme/view/frontend/layout

现在用您的页面名称和网址替换静态 Cms 页面名称和网址。

<referenceContainer name="catalog.topnav">
               <block class="Magento\Framework\View\Element\Html\Link\Current" name="your.link">
                    <arguments>
                        <argument name="label" xsi:type="string">Link-name</argument>
                        <argument name="path" xsi:type="string">Link-url</argument>
                    </arguments>
              </block> 
</referenceContainer>

【讨论】：

当我这样做时，“链接名称”上的新样式很奇怪（它在其他链接下方，而不是在链接旁边浮动。如果我添加类“level0”它看起来更好，但添加类到参数列表不起作用）。有什么想法吗？

【解决方案2】：

Magento2 向菜单添加cms 页面链接或Magento2 向菜单添加自定义链接，

首先，创建一个模块。

文件：

app\code\{VendorName}\{ModuleName}\etc\module.xml
app\code\{VendorName}\{ModuleName}\registration.php
app\code\{VendorName}\{ModuleName}\composer.json

第二个：创建di.xml，我们将在其中定义插件

app\code\{VendorName}\{ModuleName}\etc\di.xml

代码是

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Theme\Block\Html\Topmenu">
        <plugin name="add_cms_menu" type="{VendorName}{ModuleName}\Plugin\Topmenu" sortOrder="1" />
    </type>
</config>

第三：创建di.xml，我们将在其中定义插件

app\code\{VendorName}\{ModuleName}\Plugin\Topmenu.php

代码是

<?php 
namespace {VendorName}{ModuleName}\Plugin;
use Magento\Framework\Data\Tree\NodeFactory;
class Topmenu
{
    protected $nodeFactory;
    protected $_storeManager;
    protected $_pageFactory;
    protected $_urlBuilder;

    public function __construct(
        NodeFactory $nodeFactory,
        \Magento\Cms\Model\PageFactory $pageFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\UrlInterface $urlBuilder
    ) {
        $this->nodeFactory = $nodeFactory;
        $this->_pageFactory = $pageFactory;
        $this->_storeManager = $storeManager;
        $this->_urlBuilder = $urlBuilder;
    }
    public function beforeGetHtml(
        \Magento\Theme\Block\Html\Topmenu $subject,
        $outermostClass = '',
        $childrenWrapClass = '',
        $limit = 0
    ) {
        /* Showing  Cms page About us at menu */
        $page = $this->getCmspage('about-us');
        if($page == null){
            return;
        }


        $node = $this->nodeFactory->create(
            [
                'data' => [
                    'name' => $page->getTitle(),
                    'id' => $page->getIdentifier(),
                    'url' =>  $this->_urlBuilder->getUrl(null, ['_direct' => $page->getIdentifier()]),
                    'has_active' => false,
                    'is_active' => false // (expression to determine if menu item is selected or not)
                ],
                'idField' => 'id',
                'tree' => $subject->getMenu()->getTree()
            ]
        );
        $subject->getMenu()->addChild($node);
    }
    protected function getCmspage($identifier){

        $page = $this->_pageFactory->create();
        $pageId = $page->checkIdentifier($identifier, $this->_storeManager->getStore()->getId());

        if (!$pageId) {
            return null;
        }
        $page->setStoreId($this->_storeManager->getStore()->getId());
        if (!$page->load($pageId)) {
            return null;
        }

        if (!$page->getId()) {
            return null;
        }

        return $page;
    }

}

【讨论】：

【解决方案3】：

想要在<header>内添加指向顶部导航的链接
添加指向 CMS 页面、图库的链接

在此处编辑/放置 default.xml：

app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

添加以下代码：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="catalog.topnav">
           <block class="Magento\Framework\View\Element\Html\Link\Current" name="gallery.link">
                <arguments>
                    <argument name="label" xsi:type="string">Gallery</argument>
                    <argument name="path" xsi:type="string">gallery</argument>
                </arguments>
          </block> 
       </referenceContainer>
    </body>
</page>

这会添加一个指向 CMS 页面、图库的链接，并具有以下设置：

Title = Gallery
Url Key = gallery
Link = https://example.com/gallery/

添加以下样式以确保新链接正确对齐：

.navigation .nav.item {
margin: 0 10px 0 0;
display: inline-block;
position: relative;
}

（例如，产品被设置为一个类别）

【讨论】：