100%

CMS 页面小部件

介绍

页面小部件 在布局中是可重用的. 也可作为 ajax的更新部分.

页面小部件放在主题下的 /partials 目录中:

<p>This is a partial</p>

页面小部件的 配置部分 是可选的:

description = "Demo partial"
==
<p>This is a partial</p>

小面小部件也可包含组件 的配置.



改进 重译

渲染部分

{% partial "partial-name" %} 生成一小部分内容. 这个标签需要一个不带有文件扩展名的参数. 请记住，如果从子目录中引用partial，则应指定子目录名称 . {% partial %} 可以用在page, layout or another partial. 例如:

<div class="sidebar">
    {% partial "sidebar-contacts" %}
</div>

传递变量

您会发现通常需要将变量传递给外部代码的部分变量。这使得partial更有用。例如，您可以使用partial呈现博客帖子列表。如果您可以将帖子集合传递给partial，则可以在博客存档页面，博客类别页面等上使用相同的部分。您可以通过在partial名称后面指定变量来将变量传递给partial 例如:

<div class="sidebar">
    {% partial "blog-posts" posts=posts %}
</div>

传递新变量:

<div class="sidebar">
    {% partial "sidebar-contacts" city="Vancouver" country="Canada" %}
</div>

在部分内部，可以像任何其他标记变量一样访问变量:

<p>Country: {{ country }}, city: {{ city }}.</p>



改进 重译

Dynamic partials

可在 页面 了解详情.

小部件生命周期

onStart 在组件之前执行，onEnd 在组件之后执行，:

==
function onStart()
{
    $this['hello'] = "Hello world!";
}
==
<h3>{{ hello }}</h3>

Life cycle limitations

由于它们是在后期实例化的，因此在呈现页面的过程中，某些限制适用于部分的生命周期。它们不遵循标准执行过程，如布局执行生命周期中所述。应注意以下限制：

  • AJAX事件未注册，将无法正常运行。
  • 生命周期函数不能返回任何值
  • 在呈现部分时将发生常规POST表单处理。

通常，partials中的组件使用是为基本组件设计的，这些组件在没有太多处理的情况下呈现简单标记，例如Like或Tweet按钮



改进 重译

Octobercms交流群