[Magento 2 定制化开发] 之八：增加底部页脚 footer 的显示

想在空荡荡的 Magento 自建电商网站的页面中，增加底部页脚 footer 的显示。类似：

配置文档

参考官方的文档：

https://breezefront.com/docs/footer

主题默认配置

cd vendor/swissup/theme-frontend-breeze-evolution
grep footer -r .

./Magento_Theme/layout/default.xml:
<referenceContainer name="footer" remove="true"/>

注释掉 remove 那行，就能看到页脚 footer 部分了。

footer 的子模块

• top
  
• middle (默认开启的)
  
• bottom
  
• news letter (footer 上方的订阅邮件部分)
  

如何设置内容呢

<referenceContainer name="footer-middle">
	<block class="Magento\Cms\Block\Block" name="footer_content" before="-">
		<arguments>
			<argument name="block_id" xsi:type="string">footer_content</argument>
		</arguments>
	</block>
</referenceContainer>

搜索

# grep footer_content -r .

./etc/marketplace/commands/cms_block.xml:
<item name="title">footer_content</item>

./etc/marketplace/commands/cms_block.xml:
<item name="identifier">footer_content</item>

看看里面的内容：

<item>
    <item name="title">footer_content</item>
    <item name="identifier">footer_content</item>
    <item name="content" helper="Swissup\Marketplace\Installer\Helper\Renderer::render">
        <param name="path" type="path">content/cms_block/footer_content.html</param>
    </item>
</item>

搜索文件

> find . -name "footer_content.html"
./etc/marketplace/content/cms_block/footer_content.html

里面的代码没有可读性，也不是界面上展示的内容。

自定义 footer

更合理的方案是，在 magento admin 管理后台新建一个自定义区域。

Content - Blocks 新建一个 block，最好用 HTML 直接写。

然后记住 id，黏贴到对应的 layout 配置中。

参考官方的 footer HTML 代码

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

<div class="pagebuilder-column" data-content-type="column">
	<div data-content-type="html">
		<div class="h6">Support</div>
		<ul class="unstyled">
		  <li><a href="" title="Contact us">Contact us</a></li>
		  <li><a href="" title="Store location">Store location</a></li>
		  <li><a href="" title="Privacy policy">Privacy policy</a></li>
		  <li><a href="" title="Terms of use">Terms of use</a></li>
		</ul>
	</div>
</div>

从代码的组织看，应该也是用的后台的 pagebuilder 实现的：

• 外层使用 column
  
• 内层使用 html 写链接
  

这样兼顾了布局的便利性，已经代码开发修改的效率。不谋而合。

Page Builder 编辑

• 第一次用 Page Builder 觉得不顺手，不如直接写代码；
  
• 第二次使用，我发现其实拖拖拉拉挺方便的。特别是 row / column / header 的拖拽布局非常高效。
  

保存之后，即可生效。无需手动清空缓存。好评。

需要注意的是，需要点击右上角的取消全屏按钮，才能看到保存按钮。算是体验上的一点不友好的地方。

去掉底部的链接

默认的主题下，有个 5 个链接。

• Privacy and Cookie Policy
  
• Search Terms
  
• Advanced Search
  
• Orders and Returns
  
• Contact Us
  

修改主题的 layout/default.xml 文件。

例如：

vendor/swissup/theme-frontend-breeze-evolution/Magento_Theme/layout/default.xml

增加一行配置，去掉 footer_links

<referenceBlock name="footer_links" remove="true"/>

参考

• 网站文件资料 https://breezefront.com/docs/
  
• 网站模板 https://breeze.swissupdemo.com/breeze_evolution/
  

继续阅读 🌳

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

关于作者 🌱

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