组件 · October Cms 笔记

# 组件组件是可配置的构建元素，可以附加到任何页面，部分或布局。组件是十月的主要特征。每个组件都实现了一些扩展您的网站的功能。组件可以在页面上输出HTML标记，但这不是必需的 - 组件的其他重要功能是处理[AJAX请求](https://www.kancloud.cn/followme/octobercms/1073835#3)，处理表单回发和处理页面执行周期，允许向页面注入变量或实现网站安全性。本文介绍了组件的基础知识，但没有解释如何使用[AJAX组件](https://www.kancloud.cn/followme/octobercms/1073835#3)或将组件作为插件的一部分进行[开发](https://www.kancloud.cn/followme/octobercms/1073835#3)。 > \*\*注意：\*\*在partials中使用组件具有有限的功能，这在[动态partials](https://www.kancloud.cn/followme/octobercms/1073835#3)文章中有更详细的描述。 ## **介绍** 如果使用后端用户界面，则可以通过单击“组件”面板中的组件将组件添加到页面，部分和布局中。如果使用文本编辑器，则可以通过将组件名称添加到模板文件的“[配置”](https://www.kancloud.cn/followme/octobercms/1073835#3)部分来将组件附加到页面或布局。下一个示例演示如何将演示待办事项组件添加到页面： ``` title = "Components demonstration" url = "/components" [demoTodo] maxItems = 20 == ... ``` 这将使用组件部分中定义的属性初始化组件。许多组件都具有属性，但不是必需的。某些属性是必需的，某些属性具有默认值。如果您不确定组件支持哪些属性，请参阅开发人员提供的文档，或使用10月后端的Inspector。单击页面或布局组件面板中的组件时，将打开Inspector。引用组件时，它会自动创建与组件名称匹配的页面变量（`demoTodo`在上一个示例中）。提供HTML标记的组件可以在带有`{% component %}`标记的页面上呈现，如下所示： ``` {% component 'demoTodo' %} ``` > \*\*注意：\*\*如果将两个具有相同名称的组件一起分配给页面和布局，则页面组件将覆盖布局组件的任何属性。 ## **组件别名** 如果有两个插件注册具有相同名称的组件，则可以使用其完全限定的类名称附加组件并为其分配*别名*： ``` [October\Demo\Components\Todo demoTodoAlias] maxItems = 20 ``` 该部分中的第一个参数是类名，第二个参数是附加到页面时将使用的组件别名。如果指定了组件别名，则在引用组件时应在页面代码中的任何位置使用它。请注意，下一个示例引用组件别名： ``` {% component 'demoTodoAlias' %} ``` 别名还允许您通过首先使用短名称和使用别名第二个来在同一页面上定义同一类的多个组件。这使您可以在页面上使用同一组件的多个实例。 ``` [demoTodo todoA] maxItems = 10 [demoTodo todoB] maxItems = 20 ``` ## **使用外部属性值** 默认情况下，属性值在Configuration部分中初始化，其中定义了组件，属性值是静态的，如下所示： ``` [demoTodo] maxItems = 20 == ... ``` 但是，有一种方法可以使用从外部参数加载的值初始化属性 - URL参数或[部分](https://www.kancloud.cn/followme/octobercms/1073835#3)参数（对于在\[partial中\](#3）。使用`{{ paramName }}`应从部分变量加载的值的语法： ``` [demoTodo] maxItems = {{ maxItems }} == ... ``` 假设在上面的示例中，组件**demoTodo**是在partial中定义的，它将使用从**maxItems**部分变量加载的值进行初始化： ``` {% partial 'my-todo-partial' maxItems='10' %} ``` 要从URL参数加载属性值，请使用`{{ :paramName }}`语法，其中名称以冒号（`:`）开头，例如： ``` [demoTodo] maxItems = {{ :maxItems }} == ... ``` 组件所属的页面应该定义相应的[URL参数](https://www.kancloud.cn/followme/octobercms/1073835#3)： ``` url = "/todo/:maxItems" ``` 在10月后端，您可以使用Inspector工具为组件属性分配外部值。在Inspector中，您不需要使用花括号来输入参数名称。检查器中的每个字段右侧都有一个图标，用于打开外部参数名称编辑器。输入`paramName`部分变量或`:paramName`URL参数的参数名称。 ## **将变量传递给组件** 组件可以设计为在呈现时使用变量，类似于[部分变量](https://www.kancloud.cn/followme/octobercms/1073835#3)，可以在`{% component %}`标记中的组件名称之后指定它们。指定的变量将显式覆盖[组件属性](https://www.kancloud.cn/followme/octobercms/1073835#3)的值，包括[外部属性值](https://www.kancloud.cn/followme/octobercms/1073835#3)。在此示例中，组件的**maxItems**属性在**呈现**组件时将设置为*7*： ``` {% component 'demoTodoAlias' maxItems='7' %} ``` > **注意**：渲染时并非所有组件都支持传递变量。 ## **自定义默认标记** 组件提供的标记通常用作组件的使用示例。在某些情况下，您可能希望修改组件的外观和输出。[将默认标记移动到主题部分](https://www.kancloud.cn/followme/octobercms/1073835#3)适合于彻底检查组件。[覆盖组件部分](https://www.kancloud.cn/followme/octobercms/1073835#3)对于要定制的樱桃采摘区域非常有用。 ### **将默认标记移动到部件** 每个组件都可以有一个名为**default.htm**的入口点部分，它在`{% component %}`调用标记时呈现，在下面的示例中，我们假设该组件名为**blogPost**。 ``` url = "blog/post" [blogPost] == {% component "blogPost" %} ``` 输出将从插件目录**components / blogpost / default.htm**呈现。您可以复制此文件中的所有标记，并将其直接粘贴到页面中，或者粘贴到名为**blog-post.htm**的新部分中。 ``` <h1>{{ __SELF__.post.title }}</h1> <p>{{ __SELF__.post.description }}</p> ``` 在标记内部，您可能会注意到对被调用变量的引用`__SELF__`，这是指组件对象，应该替换为页面上使用的组件别名，在本例中它是`blogPost`。 ``` <h1>{{ blogPost.post.title }}</h1> <p>{{ blogPost.post.description }}</p> ``` 这是允许默认组件标记在主题内的任何位置工作所需的唯一更改。现在可以使用主题partial来自定义和呈现组件标记。 ``` {% partial 'blog-post.htm' %} ``` 可以对组件部分目录中找到的所有其他部分重复此过程。 ### **覆盖组件部件** 可以使用主题部分覆盖所有组件部分。如果名为**channel**的组件使用**title.htm**partial。 ``` url = "mypage" [channel] == {% component "channel" %} ``` 我们可以通过在我们的主题中创建一个名为**partials / channel / title.htm**的文件来覆盖partial。文件路径段分解如下：分割描述**partials**主题部分目录**channel**组件别名（部分子目录）**title.htm**部分要覆盖的组件通过简单地为组件分配同名别名，可以将部分子目录名称自定义为任何名称。例如，通过为**通道**组件分配不同的别名**foobar**，还会更改覆盖目录： ``` [channel foobar] == {% component "foobar" %} ``` 现在我们可以通过在我们的主题中创建一个名为**partials / foobar / title.htm**的文件来覆盖**title.htm**partial。 ## **"View Bag" 组件** 10月份包含一个特殊组件`viewBag`，可以在任何页面或布局上使用。它允许在标记区域内轻松定义和访问ad hoc属性作为变量。一个很好的用法示例是在页面内定义活动菜单项： ``` title = "About" url = "/about.html" layout = "default" [viewBag] activeMenu = "about" == <p>Page content...</p> ``` 然后，使用`viewBag`变量在页面，布局或部分标记内部为组件定义的任何属性都可用。例如，在此布局中，如果值设置为**about**，则将**活动**类添加到列表项：`viewBag.activeMenu` ``` description = "Default layout" == [...]  <ul> <li class="{{ viewBag.activeMenu == 'about' ? 'active' }}">About</li> [...] </ul> ``` 复制 > **注意**：viewBag组件隐藏在后端，仅可用于基于文件的编辑。它也可以被其他插件用来存储数据。