上次我们历经千辛万苦把所有开发准被工作做完了,下来我们就尝试着做一下二次开发吧.二次开发绕不过去的功能就是首页定制了,虽然我千百般不愿意一开始就讲首页定制,这是个大首页整合了太多的magento2框架知识,一开始就学首页定制,会让大家陷入迷茫,但是按照学习的逻辑,首页定制大概又是大家最关心的点,好吧,我只能先抽一部分大家容易明白的来讲,把框架搭起来,然后,在后续课程中一步一步的添加内容.
开始之前,提醒大家,把你千辛万苦安装好的代码和数据库备份一下,免得到时候你改了什么东西,导致页面异常了,然后你还恢复不回去,对于新手,请相信我,这种事常常发生,而且你真的找不到原因.
magento2和我们一般熟悉的php框架不同,不同的地方在于,你很难用常规的调试方法去调试的代码,我曾经在我们公司的线上项目里用xdebug来打印出一个产品详情页的执行trace,你猜有多少行trace记录?有20多万行.所以你不要天真的以为你是个很有经验的phper,你可以根据代码流畅来走通逻辑.如果你觉得20多万行代码也不算很多,我还是可以追下去的,那我告诉你,你还会发现一个问题,magento2的类都是深度嵌套的,能有多深度?如果你在代码里用var_dump来打印一个类,看看这个类的详情,等你在页面输出的时候,你的浏览器页面会一直转圈转到浏览器崩溃,数据太多了...,magento2内部都是传递的类,而不是简单的数组和值.当然在高级课程里我会教给大家一些解决的技巧,但是现在请记住我的话,你把magento当成一个新的语言来学习,开始先学会怎么用,然后经验丰富后根据所学的知识串起来再来深入理解代码流程.否则,就算你是个5年经验的phper,你也会歇菜的.
今天我们讲到的首页定制,你一定会先试着去找控制器,然后看方法,然后看方法调用了那个页面来做view,再打开html,编辑一通就好了是吧.可惜的是,你首先遇到的问题是,你找不到控制器,我们以前讲过magento自己的代码都在vendor下放着,在vendor下的magento中是全部基础代码,打开看看吧,按照本系列的环境是在 /var/ 中
现在你告诉我那个是你理想中的index控制器的index方法呢?所以,这里引入一个概念,magento的前端组织结构,请记住一句话,magento的任何一个页面都可以是多个模块功能组合的页面,也许head在一个模块中定义,而中间的产品又在另外一个模块中定义,统一起来就形成了一个页面,那么magento怎么知道根据什么来把多个页面组合起来呢,答案是layout配置文件,就是布局文件.具体到首页来说就是cms_index_index.xml文件,只要你的模块里有这么个文件,那么magento就会把所有的同名xml文件的内容组合起来形成一个文件,然后你在url输入cms/index/index他就知道要把组合好的页面来展示给你,现在在你浏览器里输入:
看到了吗,是不是和你那个首页的显示内容是一样的?文件命名和url的组合是一一对应的.这个url就是首页的实际地址.你看到的默认首页其实是把url省略的,你要问index一般是默认的地址,那么cms是默认的吗?cms/index/index地址作为首页的默认地址,其实是后台设定里添加的,你要是修改其实也没有问题.在后台登录后,STORES->Configuration->Web->Default Pages->CMS Home Page里进行修改,你现在先看看.等下我会告诉你什么叫Page.
这里还说到了一个概念叫layout,什么是layout,或者叫布局,原来呀,magento把所有的页面分成了三个层次的配置项,第一层为布局,你就可以理解为页面的横向纵向的分区,在布局内是container(容器),在容器内是block(块),在block(块)的里面才是定义的html文件,当然有的块也可以没有html,只是实现一些功能,magento这么做的目的是什么,很简单,复用和修改呀,你可以从任何一个层级来修改页面,或者复用页面,你看吧,灵活和复杂是一个事物的两面,你要灵活免不了代码就会复杂些.magento默认的把每个页面都分成了三大块的布局,header,content和footer,这个定义在一个默认的起始文件里,除非你明确改变,否则magetno都会去找这个文件,但是每个容器里放什么Magento并不知道,它就去找url对应的layout配置文件,每个layout配置文件给具体的某个容器内添加block,block定义就形成了具体的页面.复杂吗?就是这个机制,你记住就好了.以后看代码多了还会添加一些细节的知识.
好了,你现在可能想,那我去看看控制器,ok,没问题,在magento中控制器是一个文件夹,对应了url中的第一个index,方法是一个类,对应了url中的第二个index.前面的cms代表的是模块名,你不用找了,我直接告诉你位置:
/var/
打开看看吧,所有类里面的execute就是默认的入口.一定会调用这个方法.
你看到的$resultPage是一个类,你可以打印一下看看,我提醒你,注意内存.你可能想追一下看看到底调用了那个页面,恭喜你,你给自己找了个高难度的活,现在开始吧.等你放弃的时候,来继续看我下面的讲解.
实际上,页面的渲染,并不由控制器来调用,是框架自动调用的,你的url决定了你的页面需要的配置文件名就是 "cms_index_index",没错,就是"模块名_控制器名_方法名".magento框架来找相同名字的layout文件,这个文件现在有两处,位于
/var/
另外一处位于:
/var/
这个和付款有关,现在还用不上,大家先不管它.
现在打开第一处的cms_index_index.xml,修改一下看看,随便改点什么,复制别的xml粘贴过来也行,然后保存,保存后你需要把cache文件清除,让修改生效.在MYMAGENTO2下运行:
./magento cache:clean
如果这个时候有permission提示,去看看第二节,讲过要赋予magernto文件运行权限的问题.
清除cache后,你看看是不是你的首页就有了改变,错误提示也好,至少说明是这个文件对不对.
但是,你有没有疑惑,为什么这个文件其实是空的.对的,正常的layout文件里有定义的block,但是这里并没有定义.那么没有定义,首页的内容是怎么来的呢?
这就需要引入另外一个概念Widget,Widget是Magento页面后台配置化的一种机制,它可以使得我们在后台动态的调整的页面的内容和布局,简单的页面不需要程序员来动手coding,管理员在后台既可以生成.当然如果你需要页面增加一些动态内容,,你就需要通过Block来扩展你的页面.你看到的首页布局文件为空,就是因为首页的所有内容其实都是通过Widget配置的.我们打开配置页面来看看
登录后台,点击侧边栏菜单的CONTENT,里面ELEMENTS下有三个选项,Pages,Blocks,Widget.
在Pages选项里你可以看到现在已经定义好的一些页面,我们找到Titile为Home Page的这一项.
在右侧下拉框里点击Edit来看看配置内容,在这里你看到content为空,因为内容不是在页面直接配置的.是通过Block来配置的,等下会讲到,你看到"Search Engine Optimization" 里的"URL Key"选项了吗?对这里其实就是配置url的,你如果在这里输入一个test,那么你就可以通过
在侧边栏的CONTENT,然后点击Blocks,找到Title为"Home Page Block"的项
点击右侧下拉框你的Edit,看到了吗?你熟悉的首页内容其实在这里.点击"Show / Hide Editor",可以切换预览和代码模式.
好了,现在为止,你一定疑惑虽然内容在这里,那么这个内容是怎么和Home Page连接起来的呢?现在才终于说到了核心,Magento是通过Widget机制来把page和block连接都一起的,点击CONTENT下的Widgets,你能找到Widget为"Home Page"的项,点击编辑后,你可以在Widget Options里找到设置Block的配置,当前配置正是写满首页内容的Home page Block.这样就把这个Widget和Block关联起来了.
那么,Widget怎么和Home Page页面关联起来的呢?在Storefront Properties选项卡里,最下面有个Layout Updates,在这里选择了当前Widget要注入的页面和注入的页面位置.
到现在为止,我们谈到了很多Magento2前端页面的基本概念,大概你有点蒙.我简单的解释下,Magento大多数情况会对前端页面使用三层配置的结构,布局(layout),容器(container),和块(block),容器你可以理解为页面的大体分区,在每个分区里可以通过布局来进一步的划分为更小的区域,每个区域都可以填入一个或者多个块,块是页面的核心单位,块可以有html,也可以关联php类,你完全可以在块里进行业务处理,实际上,Magento也的确是这么做的.
除此而外,Magento还提供了后台直接添加配置简单页面的方式,可以在后台直接添加编辑页面,当然后台也可以添加Block来引用到不同的页面中,而Widget是页面和block之间的桥梁.首页就是通过这种方式来配置的.
下一节,我们使用后台配置来修改下现有的首页.
