ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 前端模板开发教程 : ***** **最佳入门:** https://docs.magento.com/user-guide/cms/widget-new-products-list.html ![](https://img.kancloud.cn/76/64/7664262641d7d8c5c08266035dd786be_950x388.png) ***** **前端设计的理论:** 参考[Magento 2 – Alan Storm](https://alanstorm.com/category/magento-2/), 这是行业内大牛写的教程:《No Frills Magento Layout》,线上看:https://kdocs.cn/l/ckbQR4GYAc9o [金山文档] No Frills Magento Layout.pdf > 有助于理解magento模板机制: > XML ,layout,container, block, widget, page 等概念。 ***** **国内资料推荐:** https://www.kancloud.cn/zouhongzhao/magento2-in-action/629747 ![](https://img.kancloud.cn/7e/ef/7eeff123bb64ac28cd76d039b5760c75_720x460.png) 页面布局: https://bbs.mallol.cn/question/magento2-general-layout-design-description/ ***** ***** ### **安装主题:** 安装方法参考:https://www.kancloud.cn/zouhongzhao/magento2-in-action/672702 大致流程如下: > If you are using Magento 2.4.x then you need to extract **solwin-freego-theme-2.4.x.zip**file.4. Copy the **app** and the **pub** folder and paste it into your magento ROOT directory. > 5. Run upgrade command as specified: **php bin/magento setup:upgrade** > 6. Run deploy command as specified: > For Magento 2.0.x and 2.1.x:**php bin/magento setup:static-content:deploy** > For Magnento 2.2.x, Magento 2.3.x and Magento 2.4.x:**php bin/magento setup:static-content:deploy -f** > 7. Clear the cache either from the admin panel or command line **php bin/magento cache:clean** **这里推荐2个简单模板入门:** 代码和样式设计都不错的免费主题,比较适合二次开发,代码简洁易懂。参考: 1,https://www.solwininfotech.com/documents/magento2/freego/#pages_configuration 2,https://www.hiddentechies.com/documentation/magento2/bizkick/#customization ***** ***** ### **注意性能:** You might be surprised, but your website theme can also significantly slow down your website, especially if it has a lot of widgets, sliders and custom blocks. Just imagine how much time it will take to load all of them. 很多时候magento卡慢,是因为我们自己写的模板的性能问题。 ***** ***** # 解读模范主题: 1,**老邹模板**:https://gitee.com/zouhongzhao/magento2-action-theme-demo 介绍了引入内容的几种形式,通用的代码注入,必读代码。 ***** 2,**solwininfotech模板**,强烈推荐学习: https://www.solwininfotech.com/documents/magento2/freego/#pages_configuration demo地址: http://magedemo.solwininfotech.com/magento2/freego/theme/ a,全部取用覆盖原来模板的方法,简单直接高效。 b,cpanel作为控制面板,容易定制配置。 ***** **3, bizkick模板:** bizkick是纯模板,是solwininfotech模板的简单版,没有插件的。 https://www.hiddentechies.com/documentation/magento2/bizkick/#customization ![](https://img.kancloud.cn/5c/39/5c39d3bb6ca0eb67155dc1c3665fdeb2_1592x451.png) ***** ## 前端模板内容主要是什么形式: **1,管理后台配置形式(复杂)** a,新建page,插入widget内容 b,自定义页面layout模板 c,自定义 product_widget的 样式 ![](https://img.kancloud.cn/ab/99/ab99dee5a07e818b1a893bcffe026df6_947x261.png) [Using Layout Updates | Magento 2.3 User Guide](https://docs.magento.com/user-guide/v2.3/design/layout-update-place-block.html) [How to add Custom Layout Update in Magento 2.3.4+ - Olegnax](https://olegnax.com/documentation/magento-2/how-to-add-custom-layout-update-in-magento-2-3-4/) ***** **2,代码模板形式 【推荐】** a, 内容直接写在代码, block+template ![](https://img.kancloud.cn/29/1b/291bed6a23c4a4d56f639ace42941645_1432x544.png) b, 自定义页面layout模板 c, 自定义 product list 的循环和样式 ![](https://img.kancloud.cn/de/2f/de2fda072951578c94c4c7a67d41050c_1639x832.png) ***** ### 3,Widgets小插件(很少用) : 写好block , 模板,后台可配置选项,注入到 update layout 各种位置。作用:例如自定义内容注入页面,跟踪埋点注入等。 https://docs.magento.com/user-guide/cms/widget-static-block.html [Custom widget | Adobe Commerce Developer Guide (magento.com)](https://devdocs.magento.com/guides/v2.4/ext-best-practices/tutorials/custom-widget.html) ***** # 案例演示: 首页内容:后台编辑器自定义 block Widget: ![](https://img.kancloud.cn/bd/7e/bd7e9f0f63c1283485e213d15ac37cab_1583x1053.png) 自定义内容块有 **block_id 类的静态内容** , {{widget type="Magento\\Cms\\Block\\Widget\\Block" template="widget/static\_block/default.phtml" block\_id="home\_banner"}} 静态内容在管理后台修改: ### List of default FreeGo home page static block name * Home banner Block * Home Advertisement 1 * Home Advertisement 2 * Home Blogs * Home Testimonials * Home Brands * Footer Our services * Footer Theme Features ***** **product_widget类的动态内容**: {{widget type="Magento\\Catalog\\Block\\Product\\Widget\\NewWidget" display\_type="new\_products" show\_pager="1" products\_per\_page="5" products\_count="10" template="product/widget/new/content/new\_grid.phtml" cache\_lifetime="20" page\_var\_name="allproduct"}} ![](https://img.kancloud.cn/ef/46/ef4650c5419f1f97dad02c755c9f7b72_1590x746.png) ***** ***** **header 和 footer 内容 管理后台配置化**: ![](https://img.kancloud.cn/a1/1b/a11b49cfd19b73e4cb731b9573b7cef6_1083x978.png) 后台配置选项option: 在 插件的system.xml 配置 则可。 ~~~ //配置好,模板可以调用: $scopeConfig = $objectManager->create('Magento\Framework\App\Config\ScopeConfigInterface'); $categoryId = $scopeConfig->getValue('demo/abc/key',\Magento\Store\Model\ScopeInterface::SCOPE_STORE); ~~~ ***** **自定义product widget 模板(选)**: ![](https://img.kancloud.cn/89/94/8994fd39ed68e9e7e5b07aa1e5159090_1139x626.png) \Catalog\etc\widget.xml 配置模块模板,自定义样式: *****