组件是使用 October CMS 构建可扩展的现代化解决方案的关键特性。每个组件都实现了一些扩展您网站的功能。组件可以在页面上输出 HTML 标记, 但这不是必需的 - 组件的其他重要功能包括 处理 AJAX 请求, 处理表单回发和处理页面执行周期, 这允许将变量注入到页面中或实现网站安全。
本文介绍了组件基础知识，但没有解释如何使用 通过 AJAX 使用组件, 开发组件 作为插件的一部分，或该 包含的组件 随附于 October CMS。
组件可以在管理面板的编辑器中找到. 您可以通过在任何打开的文档中点击组件工具栏按钮，将组件添加到您的页面、局部和布局中. 如果您使用文本编辑器，可以通过将其名称添加到模板文件的配置部分，将组件附加到页面或布局. 下一个示例演示了如何将一个演示用的待办事项组件添加到页面.
title = "Components demonstration"
url = "/components"
[demoTodo]
maxItems = 20<!-- HTML Content Here -->这会使用组件部分中定义的属性来初始化组件。许多组件都具有属性，但这并非强制要求。有些属性是必需的，有些属性则具有默认值。如果您不确定组件支持哪些属性，请查阅开发者提供的文档，或使用编辑器管理面板中的检查器。当您在页面或布局组件面板中点击一个组件时，检查器就会打开。
如果两个同名组件同时应用于页面和布局，页面组件将优先。
当您引用一个组件时，它会自动创建一个与组件名称匹配的页面变量（在前面的示例中为 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 参数，也可以是 局部 参数（针对在局部中定义的组件）。对于应从局部变量中加载的值，请使用 {{ paramName }} 语法：
[demoTodo]
maxItems = {{ maxItems }}
==
...假设在上面的例子中，组件 demoTodo 定义在一个分部中，它将使用从 maxItems 分部变量加载的值进行初始化：
{% partial 'my-todo-partial' maxItems='10' %}您可以使用点表示法从外部参数中获取一个深度嵌套的值：
[demoTodo]
maxItems = {{ data.maxItems }}
==
...要从 URL 参数加载属性值，请使用 {{ :paramName }} 语法，其中名称以冒号（:）开头，例如。
[demoTodo]
maxItems = {{ :maxItems }}
==
...组件所属的页面应该定义一个相应的 URL 参数。
url = "/todo/:maxItems"在 October 后端，您可以使用 Inspector 工具为组件属性分配外部值。在 Inspector 中，您无需使用花括号来输入参数名称。Inspector 中的每个字段右侧都有一个图标，用于打开外部参数名称编辑器。将参数名称输入为 paramName 用于局部变量，或 :paramName 用于 URL 参数。
组件可以设计为在渲染时使用变量，类似于分部变量，它们可以在{% component %}标签中的组件名称之后指定。指定的变量将显式覆盖组件属性的值，包括外部属性值。
在此示例中，组件的 maxItems 属性将在组件渲染时被设置为 7：
{% component 'demoTodoAlias' maxItems='7' %}组件中的默认标记是样板代码，旨在提供一个简单的示例说明如何使用它。
有两种方法可以自定义组件的默认标记：
覆盖组件局部视图的用途非常有限。在大多数情况下，将组件的局部视图转换为CMS局部视图要容易得多，并且这样做几乎没有区别。
举例来说，看看一个像这样渲染的博客组件。
[blog]{% component 'blog' %}上面的代码实际上等同于执行此操作。
[blog]{% partial 'blog::default' %}如果你将 default.htm 分部从组件复制到你的主题，作为 blog-default.htm 分部，你可以以相同的方式渲染它。
[blog]{% partial 'blog-default' %}在这里，我们可以看到使用 CMS partials 定制内容非常简单，并且它展示了组件的真正强大之处。主题应该覆盖组件 partials 的情况非常罕见，这将在下面更详细地介绍。
每个组件都将有一个名为 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 'blog-post' %}这个过程可以对所有在组件局部文件目录中找到的其他局部文件重复执行。
所有组件局部文件都可以使用主题局部文件进行覆盖。当组件具有严格的实现时，这很有用，并提供一个选项来配置其标记的特定区域。
例如，如果一个组件名为通道使用了title.htm局部文件。
url = "mypage"
[channel]{% component "channel" %}我们可以通过在主题中创建一个名为partials/channel/title.htm的文件来覆盖局部。
文件路径片段分解如下：
| Segment | Description |
|---|---|
| partials | the theme partials directory |
| channel | the component alias (a partial subdirectory) |
| title.htm | the component partial to override |
部分子目录名称可以自定义为任何名称，只需为该组件分配一个同名别名即可。 例如，通过为 channel 组件分配一个不同的别名 foobar 覆盖目录也会随之改变。
[channel foobar]{% component "foobar" %}现在我们可以通过在我们的主题中创建一个名为 partials/foobar/title.htm 的文件来覆盖 title.htm 分部文件。
viewBag 组件在后端面板中是隐藏的，并且仅供基于文件的编辑使用。它也可以被其他插件用来存储数据。
October CMS 中包含一个名为 viewBag 的特殊组件，它可以在任何页面或布局中使用。它允许临时属性在标记区域内被定义并作为变量轻松访问。一个很好的用法示例是在页面内部定义一个活动菜单项。
title = "About"
url = "/about.html"
layout = "default"
[viewBag]
activeMenu = "about"<p>Page content...</p>任何为组件定义的属性 即可通过 viewBag 变量在页面, 布局, 或局部标记中提供. 例如, 在此布局中 active 类被添加到列表项 如果 viewBag.activeMenu 的值设置为 about.
description = "Default layout"...
<!-- Main navigation -->
<ul>
<li class="{{ viewBag.activeMenu == 'about' ? 'active' }}">About</li>
...
</ul>组件可能会引入 AJAX 处理器 和 局部视图 到主题的生命周期中，使用组件名称作为前缀，并带上两个 :: 符号。例如，所有由组件定义的 AJAX 处理器都可全局使用。
data-request="onMyComponentHandler"然而，如果命名存在冲突，则可以使用完全限定名称。
data-request="componentName::onMyComponentHandler"从组件外部渲染的局部必须使用它们的完全限定名称。
{% partial 'componentName::component-partial' %}阅读更多关于 组件开发 以了解组件片段。