您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

Ｍagento2轻松制作模板-teddy(Taxable)

发布时间：2023-07-07 14:13:56编辑：雪饮阅读（）

词汇
Marketplace        市场；商场
Extensive        广阔的；广泛的
Markup            涨价；利润
XML                可扩展标示语言（Extensive Markup Language）
cascading        （水）倾泻
style            款式，样式
sheet            （用布）盖上
CSS                层叠样式表（cascading style sheet）
amazon            亚马逊；古希腊女战士
Popular            受大众喜爱的，受欢迎的
Most            （数量上）最多
Featured        有……特色
Extensions        扩展，扩张
Testimonials    证明信；纪念品
Affiliate        附属机构，分支机构
Training        训练，培训
Frontend        前端
Security        保护措施，安全工作
Assertion        断言，明确肯定
SAML            安全声明标记语言（Security Assertion Markup Language）
VERTEX            顶点；[昆] 头顶
Tax                税金；重负
specification    规格，规范
Specifications    规格（specification 的复数形式）
Tech            技校，技术学院
TOTAL            总数；合计
Taxable            应纳税的；可征税的

任务
1、尝试删除块
首先就是从今天开始我们的任务是以magento2.1.1为基础，上次安装magento2.1.1后的成功信息输出如：
    Success
    Please keep this information for your records:

    Magento Admin Info:

    Username:
    xy211
    Email:
    213532186@qq.com
    Password:
    ******
    Your Store Address:
    http://www.magento2211.com/
    Magento Admin Address:
    http://www.magento2211.com/admin_xbgruo/
    Be sure to bookmark your unique URL and record it offline.
    Encryption Key:
    e5b6eb400753d96df41e8aa9fda6f3ff
    Database Info:

    Database Name:
    magento2.1.1
    Username:
    root
    Password:
    ******
    For security, remove write permissions from these directories: 'D:/phpstudy_pro/WWW/www.magento2211.com/app/etc'
可以利用这个信息登录到magento2.1.1后台管理系统。
那么我们今天这里所谓的删除块，其实不是直接删除代码了，而是通过xml布局文件中的代码来删除代码。
首先我们需要营造一个container中有多个block，而另外一个地方referenceContainer下刚才这个container，然后在referenceContainer中删除container中的block。
那么我们这里默认的app\code\Magento\Theme\view\frontend\page_layout\1column.xml中有一个container名为header.container，其被app\code\Magento\Theme\view\frontend\layout\default.xml中referenceContainer。
而app\code\Magento\Theme\view\frontend\page_layout\1column.xml中的名为header.container的container只是一个单标签闭合。
那么我们就可以将referenceContainer中的内容直接拷贝过来，形成一个非单标签，然后你会referenceContainer里面清空。
那么此时你刷新首页会发现，logo那个位置的logo图片还在的。（我这里今天目的就是以删除logo所在block为例）。虽然之前说过，当block是同一个block的时候会替换，但是有时候就是有一种需求，就是直接删除某个block，而不是
单纯的替换某个block。
所以改造后的app\code\Magento\Theme\view\frontend\page_layout\1column.xml中的名为header.container的container如：
<container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content">
     <container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-">
        <container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
            <block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
                <arguments>
                    <argument name="target" xsi:type="string">contentarea</argument>
                    <argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
                </arguments>
            </block>
            <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
            <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>
        </container>
    </container>
    <container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
        <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
            <arguments>
                <argument name="logo_img_width" xsi:type="number">189</argument>
                <argument name="logo_img_height" xsi:type="number">64</argument>
            </arguments>
        </block>
    </container>
</container>
那么app\code\Magento\Theme\view\frontend\layout\default.xml中名为header.container的referenceContainer如：
<referenceContainer name="header.container">
           
</referenceContainer>
算啦，上面的思路错了，全部先还原回去。
其实最简单的就是app\code\Magento\Theme\view\frontend\layout\default.xml中名为header-wrapper的container中定义了名为logo的block。
那么在app\code\Magento\Search\view\frontend\layout\default.xml中名为header-wrapper的referenceContainer就是引用了首页的那个logo模块。
也就是说你顶部搜索产品的地方搜索的结果页面的logo也是调用app\code\Magento\Theme\view\frontend\layout\default.xml中名为header-wrapper的container中定义了名为logo的block。（毕竟这里只是referenceContainer，没有定义同名block，就不会覆盖掉）
那么我这里就可以在这个app\code\Magento\Search\view\frontend\layout\default.xml中名为header-wrapper的referenceContainer中比如写成这样：
<referenceContainer name="header-wrapper">
    <referenceBlock name="logo" remove="true" />
    <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml" />
</referenceContainer>
那么这里<referenceBlock name="logo" remove="true" />
这句就干掉了左上角那个logo.
再纠正一个错误,其实app\code\Magento\Search\view\frontend\layout\default.xml这个的作用不仅在搜索结果页,首页也会影响到,应该是将顶部搜索这个东西全局调用了吧.
那么如果要覆写app\code\Magento\Search\view\frontend\layout\default.xml,则可以覆写到如app\design\frontend\Magento\luma2\Magento_Search\layout\default.xml文件路径

2、通过布局添加div和样式
以app\code\Magento\Theme\view\frontend\layout\default.xml为例,我在名为header-wrapper的container同级下面再增加一个container
 <container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
    <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
        <arguments>
            <argument name="logo_img_width" xsi:type="number">189</argument>
            <argument name="logo_img_height" xsi:type="number">64</argument>
        </arguments>
    </block>
</container>


  <container name="header-wrapper1" htmlTag="div" htmlClass="yangshi001">
    <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
        <arguments>
            <argument name="logo_img_width" xsi:type="number">189</argument>
            <argument name="logo_img_height" xsi:type="number">64</argument>
        </arguments>
    </block>
</container>

那么这里htmlClass为yangshi001的这个container好像是会影响到上面的这个htmlClass为header content的.
这里发现如果下面这个代码在上面那个代码的前面,下面这个代码就没有作用了,可能内部有什么优先级吧.这里暂时不理会,这里就说表现出来的效果是什么吧.
就是在页面中和class为header content的元素是同级的,并在class为header content的元素下面,并且元素名为div,元素的class为yangshi001,然后里面包含的就是这里调用的这个logo.
然后如果是要覆写app\code\Magento\Theme\view\frontend\layout\default.xml,则可以覆写到如:app\design\frontend\Magento\luma2\Magento_Theme\layout\default.xml路径上.