西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > magento教程 >

Magento2通用布局定制任务经验

时间:2016-09-14 14:00来源:未知 作者:好模板 点击:
Magento2设置页面布局 特定页面的布局在页面配置文件中被定义,在根page结点的layout属性中。 例如:将Advanced Search页面的布局由一列布局改为带左侧栏的两列布局:app/design/frontend/Vendo

Magento2设置页面布局

特定页面的布局在页面配置文件中被定义,在根<page>结点的layout属性中。

例如:将Advanced Search页面的布局由一列布局改为带左侧栏的两列布局:app/design/frontend/<Vendor>/<theme>/Magento_CatalogSearch/layout/catalogsearch_advanced_index.xml

<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
...
</page>

在<head>里加载静态资源(JavaScript, CSS, fonts)

JavaScript, CSS和其它静态资产在页面配置文件的<head>区域被添加,默认地<head>在app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml中被定义。建议在你自定义的主题中扩展该文件来加载JavaScript, CSS和其它静态资产。下面的文件包含了一些你必须添加的文件的示例:

<theme_dir>/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
    	<css src="css/my-styles.css"/>
    
        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>
		
    	<!-- Add external resources -->
	    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

要添加外部资源时,必须要指明src_type="url"参数。

你可以使用<link src="js/sample.js"/>或<script src="js/sample.js"/>指令来添加本地存储的JavaScript文件到你的主题。

指定资源的路径必须是以下中的一个:

  • <theme_dir>/web
  • <theme_dir>/<Namespace>_<Module>/web

添加条件注释

条件注释意味着针对Internet Explorer给出特殊的指令。你可以给特定版本的Internet Explorer添加CSS文件。以下是一个示例:

<head>
        <css src="css/ie-9.css" ie_condition="IE 9" />
    </head>
</page>

这样就能在生成的HTML中增加一个IE条件注释,如下:

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="<your_store_web_address>/pub/static/frontend/OrangeCo/orange/en_US/css/ie-9.css" />
<![endif]-->

上面例子中的orange是被OrangeCo创建的自定义主题。

移除<head>中的静态资源(JavaScript, CSS, fonts)

要移除页面<head>中的静态资源,按照下面的扩展文件做些类似的修改即可:

app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
        <!-- Remove local resources -->
        <remove src="css/styles-m.css" />
        <remove src="my-js.js"/>
        <remove src="Magento_Catalog::js/compare.js" />
								
	<!-- Remove external resources -->
        <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
        <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
        <remove src="http://fonts.googleapis.com/css?family=Montserrat" /> 
   </head>

注意,如果在初始文件中静态块带有模型路径(例如:Magento_Catalog::js/sample.js),那么在移除时也应指明模型路径。

创建一个容器

使用下面的例子来创建(声明)一个容器

<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />

引用一个容器

要更新一个容器,使用<referenceContainer>指令。

示例:添加链接到页面头部面板

<referenceContainer name="header.panel">
        <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
            <arguments>
                <argument name="css_class" xsi:type="string">header links
            </arguments>
        </block>
</referenceContainer>

创建一个块

块的创建(声明)使用<block>指令。

示例:增加一个产品SKU信息的块

<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
    <arguments>
        <argument name="at_call" xsi:type="string">getSku</argument>
        <argument name="at_code" xsi:type="string">sku</argument>
        <argument name="css_class" xsi:type="string">sku</argument>
    </arguments>
</block>

引用一个块

要更新一个块,使用<referenceBlock>指令。

示例:向logo块传送图片

<referenceBlock name="logo">
        <arguments>
            <argument name="logo_file" xsi:type="string">images/logo.png</argument>
        </arguments>
</referenceBlock>

使用块来设置模板

要设置模板的块,使用<argument>指令来传递。

示例:改变page模板的title块

<referenceBlock name="page.main.title">
        <arguments>
            <argument name="template" xsi:type="string">Namespace_Module::title_new.phtml</argument>
        </arguments>
 </referenceBlock>

模型的路径被指明关系到模型的view/<area>/templates/目录。<area>对应布局文件被使用的地方。

修改块参数

要修改块参数,使用<referenceBlock>指令

示例:改变已存在块中的参数并添加一个新参数。

初始块声明:

...
<block class="Namespace_Module_Block_Type" name="block.example">
    <arguments>
        <argument name="label" xsi:type="string">Block Label</argument>
    </arguments>
</block>
...

扩展布局:

...
<referenceBlock name="block.example">
    <arguments>
        <!-- Modified block argument -->
        <argument name="label" xsi:type="string">New Block Label</argument>
        <!- Newly added block argument -->
        <argument name="custom_label" xsi:type="string">Custom Block Label</argument>
    </arguments>
</referenceBlock> 
...


(责任编辑:好模板)

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容