组件是使用 October CMS 构建可扩展的现代解决方案的关键特性。每个组件都实现了一些扩展您网站的功能。组件可以在页面上输出 HTML 标记，但这并非必要 - 组件的其他重要功能包括 处理 AJAX 请求、处理表单回传以及处理页面执行周期，这允许将变量注入页面或实现网站安全性。
本文介绍了组件的基础知识，但未解释如何使用 带 AJAX 的组件，开发组件 作为插件的一部分，或 包含的组件 与 October CMS 一起。
组件可以在管理面板的编辑器中找到。您可以通过点击任何打开文档上的“组件”工具栏按钮，将组件添加到您的页面、局部和布局中。如果您使用文本编辑器，可以通过将组件名称添加到模板文件的配置部分，将组件附加到页面或布局。下一个示例演示了如何将一个演示性的 To-Do 组件添加到页面。
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 定义在某个 partial 中，它将使用从 maxItems partial 变量加载的值进行初始化:
{% partial 'my-todo-partial' maxItems='10' %}您可以使用点表示法从外部参数中检索一个深度嵌套的值：
[demoTodo]
maxItems = {{ data.maxItems }}
==
...v-pre
要从 URL 参数加载属性值，请使用 {{ :paramName }} 语法，其中名称以冒号 (:) 开头，例如。
:::
[demoTodo]
maxItems = {{ :maxItems }}
==
...组件所属的页面应该具有相应的 URL 参数 定义。
url = "/todo/:maxItems"在 October 后端您可以使用 Inspector 工具为组件属性分配外部值。在 Inspector 中您无需使用大括号来输入参数名。Inspector 中的每个字段右侧都有一个图标，用于打开外部参数名编辑器。输入参数名例如局部变量的 paramName 或 URL 参数的 :paramName。
组件可以在渲染时设计为使用变量，类似于局部变量，它们可以在组件名称后在{% component %} 标签中指定。指定的变量将显式覆盖组件属性的值，包括外部属性值。
在此示例中，组件的 maxItems 属性在组件渲染时将被设置为 7:
{% component 'demoTodoAlias' maxItems='7' %}组件中的默认标记是样板代码，旨在提供一个简单示例，说明如何使用它。
有两种方式可以自定义组件的默认标记：
覆盖组件局部文件的用途非常有限。在大多数情况下，将组件的局部文件转换为 CMS 局部文件要容易得多，而且这样做几乎没有区别。
作为一个例子，看看像这样渲染的博客组件。
[blog]{% component 'blog' %}上述代码实际上与这样做相同。
[blog]{% partial 'blog::default' %}`
The user provided an empty string as the source text. I must strictly adhere to all the rules, which include not adding or deleting any content, not changing newlines, spaces, or punctuation, and only translating the given text. Since the given text is empty, the output should also be empty.
如果将组件中的 **default.htm** 部分视图复制到主题中作为 **blog-default.htm** 部分视图，则可以用相同方式渲染它。
cmstemplate
[blog]{% partial 'blog-default' %}:::
这里我们可以看到使用 CMS 局部视图定制内容是多么简单，它展示了组件的真正强大之处。主题应该覆盖组件局部视图的情况很少见，这将在下面更详细地介绍。
每个组件都将拥有一个会在\{% component %} 标签被调用时渲染的名为default.htm的入口点局部文件，在以下示例中，我们将假设该组件名为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' %}此过程可以对在组件分部目录中找到的所有其他分部重复执行。
所有组件局部文件都可以使用主题局部文件进行覆盖。当一个组件具有严格的实现，并提供一个选项来配置其标记的特定区域时，这会很有用。
As As an example, if a component called channel uses the title.htm partial.
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 变量。例如，在此布局中，如果 viewBag.activeMenu 的值被设置为 about，则 active 类会被添加到列表项。
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' %}了解更多关于 组件开发 以了解组件片段。