Magento 2技术问询：如何为前后端所有页面添加侧边栏？

嘿，我来帮你搞定Magento 2里给前后端所有页面添加侧边栏的需求，不管用Luma还是Blank主题都没问题，我给你一步步拆解，还有现成的示例代码可以直接用~

注意：不要直接修改Magento核心主题的文件，最好用自定义主题来实现，避免后续版本升级覆盖你的修改

步骤1：创建自定义主题（如果还没有的话） #

先在app/design/frontend/[你的Vendor]/[你的Theme]目录下搭建主题基础结构，需要两个核心文件：

• theme.xml（主题配置文件）：

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>My Custom Frontend Theme</title>
    <parent>Magento/luma</parent> <!-- 想基于Blank主题就改成Magento/blank -->
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

• registration.php（注册主题）：

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/[你的Vendor]/[你的Theme]',
    __DIR__
);

步骤2：修改全局布局文件添加侧边栏容器 #

在自定义主题的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>
        <!-- 添加左侧侧边栏，before="main"表示放在主内容区之前 -->
        <referenceContainer name="columns">
            <container name="sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" before="main">
                <block class="Magento\Framework\View\Element\Template" name="sidebar.main.content" template="Magento_Theme::sidebar/main.phtml"/>
            </container>
        </referenceContainer>

        <!-- 如果你想要右侧侧边栏，把before="main"改成after="main"即可 -->
        <!--
        <referenceContainer name="columns">
            <container name="sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="main">
                <block class="Magento\Framework\View\Element\Template" name="sidebar.additional.content" template="Magento_Theme::sidebar/additional.phtml"/>
            </container>
        </referenceContainer>
        -->
    </body>
</page>

步骤3：创建侧边栏模板文件 #

在自定义主题的Magento_Theme/templates/sidebar/main.phtml路径下创建模板文件，填充侧边栏的内容：

<div class="sidebar-content">
    <h3>全局前端侧边栏</h3>
    <p>这是所有前端页面都会显示的侧边栏内容</p>
    <ul class="sidebar-menu">
        <li><a href="/">首页</a></li>
        <li><a href="/customer/account/">我的账户</a></li>
        <li><a href="/contact/">联系我们</a></li>
    </ul>
</div>

步骤4：部署静态内容并清理缓存 #

执行以下命令让修改生效：

php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

最后在后台切换到你的自定义主题，刷新前端页面就能看到全局侧边栏了。

后端推荐用自定义模块实现，避免修改Admin核心文件：

步骤1：创建自定义模块（如果还没有的话） #

在app/code/[你的Vendor]/[你的Module]目录下搭建模块结构，需要两个核心文件：

• registration.php（注册模块）：

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[你的Vendor]_[你的Module]',
    __DIR__
);

• etc/module.xml（模块配置文件）：

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[你的Vendor]_[你的Module]" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Backend"/>
        </sequence>
    </module>
</config>

步骤2：创建Admin全局布局文件 #

在模块的view/adminhtml/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>
        <!-- 添加Admin侧边栏容器 -->
        <referenceContainer name="page.wrapper">
            <container name="admin.sidebar" htmlTag="div" htmlClass="admin-sidebar" before="page.main">
                <block class="Magento\Framework\View\Element\Template" name="admin.sidebar.content" template="[你的Vendor]_[你的Module]::sidebar.phtml"/>
            </container>
        </referenceContainer>

        <!-- 调整主内容区宽度，避免和侧边栏重叠 -->
        <referenceContainer name="page.main">
            <arguments>
                <argument name="class" xsi:type="string">page-main-with-sidebar</argument>
            </arguments>
        </referenceContainer>
    </body>
</page>

步骤3：创建Admin侧边栏模板文件 #

在模块的view/adminhtml/templates/sidebar.phtml路径下创建模板文件：

<div class="admin-sidebar-content">
    <h4>全局后端侧边栏</h4>
    <p>这是所有Admin页面都会显示的侧边栏内容</p>
    <div class="sidebar-links">
        <a href="<?php echo $block->getUrl('adminhtml/dashboard/index') ?>">返回仪表盘</a>
        <br>
        <a href="<?php echo $block->getUrl('adminhtml/system_config/edit/section/general') ?>">系统配置</a>
    </div>
</div>

步骤4：添加侧边栏样式（可选） #

为了避免布局错乱，在模块的view/adminhtml/web/css/styles.css路径下添加样式：

.admin-sidebar {
    width: 240px;
    float: left;
    padding: 15px;
    background: #f8f8f8;
    min-height: calc(100vh - 70px);
    border-right: 1px solid #e0e0e0;
}
.page-main-with-sidebar {
    margin-left: 260px;
    width: calc(100% - 260px);
}

步骤5：启用模块并清理缓存 #

执行以下命令让修改生效：

php bin/magento module:enable [你的Vendor]_[你的Module]
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

登录Admin后台后，所有页面都会显示你添加的全局侧边栏了。

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