摘要：概述，此处称为布局。布局中的配置区域是可选的，支持和。这里称为占位符，可以允许页面将内容注入到布局中。占位符在布局模板中用标签定义。动态布局和一样，可以使用任何特性。函数在页面呈现后执行。
Layout
概述
Layout，此处称为布局。定义了一个页面框架，即页面上的所有的重复的内容，例如header部分和footer部分。Layout通常包含HTML标签、HEAD标签、TITLE标签和BODY标签。
位置：安装的主题的目录，layout子目录中。
扩展名：htm
Layout中输出内容应该使用page标签进行页面内容输出。{% page %}；最近简单的方式：
{% page %}
Page与Layout关系，Page可以使用不同的Layout，Layout也可以通过Page来引用多个page页面。但是，他们之间建立联系的是Page中的设置，然后Layout中的{% page %}才能正确的引用这个page，才可以通过Page的URL结合Layout布局把页面显示出来。
要为一个Page使用Layout，Page的Configuration Section部分必须引用Layout文件名称（不带扩展名）。请记住，如果从子目录引用Layout，则应指定子目录名称。使用default.htm的Layout的示例页面模板：
url = "/" layout = "default" ==Hello, world!
当请求该页面时，其内容与Layout合并，或者更确切地说 - Layout的{% page %}标签被页面内容替换。前面的示例会生成以下标记：
Hello, world!
请注意，您可以在Layout中渲染部件。这使您可以在不同的Layout之间共享常用元素。例如，您可以有一个输出网站CSS和JavaScript链接的部件。这种方法简化了资源的管理。 如果你想添加一个JavaScript引用，你应该修改一个小部件，而不是编辑所有的Layout。
布局中的配置区域是可选的，支持name和description。
description = "Basic layout example"
==
{% page %}
Placeholders
Placeholders这里称为【占位符】，可以允许页面将内容注入到布局中。占位符在布局模板中用{% placeholder %}标签定义。下面的例子显示了一个在HTML HEAD部分中定义了一个叫head的【占位符】的Layout模板。
{% placeholder head %}
...
页面可以使用{% put %}和{% endput %}标签将内容注入【占位符】。以下示例演示了一个简单的页面模板，它将CSS链接注入前一示例中定义的叫head占位符。
url = "/my-page"
layout = "default"
==
{% put head %}
{% endput %}
The page content goes here.
动态布局
和Page一样，Layout可以使用任何Twig特性。
布局的执行生命周期
布局中的PHP代码部分，可以定义页面周期函数：
onInit当所有组件被初始化并且在处理AJAX请求之前，该函数被执行。
onStart功能在页面处理开始时执行。
onBeforePageStart函数在Layout组件运行后执行，但在页面的onStart函数执行之前执行。
onEnd函数在页面呈现后执行。
处理程序执行的顺序如下：
Layout onInit() function.
Page onInit() function.
Layout onStart() function.
Layout components onRun() method.
Layout onBeforePageStart() function.
Page onStart() function.
Page components onRun() method.
Page onEnd() function.
Layout onEnd() function.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/28825.html
摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。 前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...
摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。 前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...
摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。 前言 三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...
摘要：解决的问题圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 解决的问题 圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局 圣杯布局dom结构： 圣杯布局 ...
阅读 3126·2021-10-08 10:04
阅读 1038·2021-09-30 09:48
阅读 3427·2021-09-22 10:53
阅读 1629·2021-09-10 11:22
阅读 1660·2021-09-06 15:00
阅读 2122·2019-08-30 15:56
阅读 685·2019-08-30 15:53
阅读 2219·2019-08-30 13:04
