**本文介绍了以下典型布局定制任**
为了确保稳定性和升级过程中被删除保护您的自定义，不改变外的现成的Magento模块和主题布局。要自定义布局，自定义主题创建扩展和压倒一切的布局文件。
**设置页面布局**
页面布局的用于特定网页的类型的页配置文件中定义
在根节点<page>的layout属性
例如：更改高级搜索页面的布局 从默认的“1列”到“左边2列 怎么做
继承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>
~~~
**载入静态资源（JavaScript中，CSS，字体)**
JavaScript，CSS和其它静态资产在页面<head>头部配置载入。
Magento的商店页面的<head>默认外观被定义为:app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
添加CSS和JavaScript的推荐方法是延长你的自定义主题此文件，并添加资产存在。下面的文件是你必须添加一个文件的样本：
~~~
<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"/> or <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>
~~~
这增加了一个IE条件注释在生成的HTML，像下面的例子：
~~~
<!--[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供应商创建自定义主题。
**删除静态资源（JavaScript中，CSS，字体）**
要删除静态资源 在一个页面<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**
使用下面的示例来创建（声明）容器：
~~~
<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />
~~~
**参考一个container容器**
要更新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</argument>
</arguments>
</block>
</referenceContainer>
~~~
**创建block块**
创建块（声明）使用 <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>
~~~
**参考一个block块**
要更新块使用 <referenceBlock> 指令
例：将图像传递到logo的block。
~~~
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
</arguments>
</referenceBlock>
~~~
**设置由block使用的模板**
要设置一个block的模板，使用<argument>指令。
例如：网页标题栏的变化模板：
~~~
<referenceBlock name="page.main.title">
<arguments>
<argument name="template" xsi:type="string">Namespace_Module::title_new.phtml</argument>
</arguments>
</referenceBlock>
~~~
相对指定给模块的 view/<area>/templates/目录对模板的路径。该对应于<area>用于该布局文件的区域。
**修改block块参数**
要修改块参数，使用<referenceBlock>指令
例如：改变现有的block块参数的值，并添加一个新的argument。
初始块声明：
~~~
...
<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>
...
~~~
**使用block对象方法来设置block属性 **
有访问block对象的方法有两种：
* 使用<argument>指令在<block>和<referenceBlock>中.
* 使用<action>指令, 不建议这种方式，但可用于调用这些方法，这是不重构尚未通过被访问。
例1：使用<argument>设置一个CSS类和使用添加属性的产品页面
扩展布局：
~~~
<referenceBlock name="page.main.title">
<arguments>
<argument name="css_class" xsi:type="string">product</argument>
<argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
</arguments>
</referenceBlock>
~~~
例2：使用<action>设置页面标题
不要使用<action>，如果该方法<block> or <referenceBlock>允许使用<argument>
扩展布局：
~~~
...
<referenceBlock name="page.main.title">
<action method="setPageTitle">
<argument translate="true" name="title" xsi:type="string">Catalog Advanced Search</argument>
</action>
</referenceBlock>
...
~~~
**重新排列元素**
在布局文件，你可以更改页面上的元素顺序。这可以使用以下之一来完成：
<move>标签和指令允许更改元素的顺序和父类。
<block>中的before and after属性：允许父类一方内改变元素的顺序
例如<move>用法：
把库存及SKU的bloks旁边的产品价格产品页面上。
在Magento的blank主题,这些标签位位置如下：
Let’s place the stock availability and SKU blocks after product price block on a product page, and move the review block out of the product-info-price container. To do this, add the extending catalog_product_view.xml in the app/design/frontend/OrangeCo/orange/Magento_Catalog/layout/ directory:
~~~
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
<move element="product.info.review" destination="product.info.main" before="product.info.price"/>
</body>
</page>
~~~
这将使得在产品页面的样子如下：
要了解如何找到您需要定制布局文件，请参阅查找模板，布局和样式。
**删除元素**
Elements are removed using the remove attribute for the <referenceBlock> and <referenceContainer>.
示例：从所有的商店页面中删除比较产品侧边栏块。
~~~
This block is declared in app/code/Magento/Catalog/view/frontend/layout/default.xml:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
...
<referenceContainer name="sidebar.additional">
<block class="Magento\Catalog\Block\Product\Compare\Sidebar" name="catalog.compare.sidebar" template="product/compare/sidebar.phtml"/>
</referenceContainer>
...
</body>
</page>
~~~
要删除block块，添加扩展default.xml中在你的主题：<theme_dir>/Magento_Catalog/layout/default.xml
在这个文件中，引用已增加remove属性的元素：
~~~
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
...
<referenceBlock name="catalog.compare.sidebar" remove="true" />
...
</body>
</page>
**替换元素**
~~~
要替换一个元素，将其删除，并添加一个新的。
- 前端开发
- 前端开发人员指南
- 介绍
- 主题模块路径规则符号
- 主题Themes
- 概括
- 创建主题
- magento主题结构
- 应用和配置管理主题
- 配置图片属性主题
- 主题继承
- 定位模板，布局和样式
- 布局layout
- 布局说明
- 布局文件类型
- 扩展继承布局
- 覆盖布局
- 公共布局任务定制
- 自定义布局图
- 模板Templates
- 模板定制演练
- 模板的基本概念
- 定制的模板插图
- 定制电子邮件模板
- 模板XSS安全
- 层叠样式表（css)
- 载入css
- magento继承修改模板.phtml
- 只修改phtml文字内容
- 在magento的block之前加内容
- PHP开发
- PHP开发人员指南
- 开发路线图
- composer简介
- 常见术语表
- 准备（开发快速启动）
- 组件类型和版本
- 有关组件文件结构
- 路线图制定和包装组件
- 建立
- composer.json文件
- 创建组件文件结构
- 定义你的配置文件
- 注册您的组件
- URN架构验证
- 命名部件
- 组件加载顺序
- 启用或禁用组件
- package包
- 打包组件
- 更新
- 验证
- 测试你的组件
- 加入CLI命令
- 命令命名指南
- 如何添加CLI命令
- 组件开发
- 服务合同
- 公共接口和API
- 服务合约设计模式
- 依赖注入
- 实例化对象与工厂
- 代理
- 代码生成
- EAV和扩展属性
- Magento的插件
- 路由
- 索引
- 配置服务网络的API
- 向后兼容性
- 消息队列
- 在开发过程中清除目录
- magento设置
- magento开发模式设置
- magento安装中文语言包
- 创建一个新的block
- magento后台操作
- 调试-页面phtml所在的目录
- magento添加分类
- 添加属性
- 属性组
- 组合商品
- 配置商品
- 虚拟商品
- 捆绑商品
- 可下载商品
- 商品促销设置
- CMS页面设置
- block使用
- connect使用
- 多店铺
- 联系我们
- paypal设置
- 物流运费
- 网站地图
- 订单处理
- 账号管理
- 网站货币设置
- google分析
- 页面默认设置
- Magento技巧积累
- 常用技巧
- magento2更改商品图片在网站中不同位置的大小
- magento的view里面的default.xml