片段是插入到富文本编辑器或Markdown 编辑器中，并使用检查器工具进行配置的块。 当此功能可用时，一个插入片段按钮会显示在工具栏中，选择一个片段会将其插入到编辑器中。
片段可以定义为局部文件或组件，使开发者能够定义可重用且可配置的内容片段。使用片段有许多可能的应用场景和示例：
在页面内容中包含片段时，需要 |content Twig 过滤器 来处理和渲染这些片段作为输出的一部分。
{{ blog_html|content }}基于部分的片段提供更简单的功能，并且通常只是 HTML 标记的容器，或在片段中使用 Twig 生成的标记。
要从部分创建片段，在编辑器中打开一个部分，并点击片段按钮。从这里，您可以输入片段代码、名称和描述在部分表单中。
片段属性是可选的，可以在部分设置表单上使用网格控件进行定义。该表具有以下列。
| Column | Description |
|---|---|
| Property Title | specifies the property title, visible to the end user in the snippet inspector popup window. |
| Code | specifies the property code, used for accessing the property values in the partial markup. |
| Type | the property type, available types are string, dropdown and checkbox. |
| Default | the default property value, for checkbox properties use 0 and 1 values. |
| Options | the option list for the dropdown properties (see below). |
属性列表中定义的任何属性都可以在局部 Markdown 中作为普通变量进行访问，例如：
The country name is {{ country }}此外，属性可以使用外部属性值传递给部分组件。
在定义选项时, 列表应采用以下格式: key:Value | key2:Value. 键代表内部选项值, 值代表用户在下拉列表中看到的字符串. 管道符分隔各个选项, 例如: us:US | ca:Canada.
键是可选的, 如果省略 (美国 | 加拿大), 内部选项值将是基于零的整数 (0, 1, ...). 建议始终使用显式选项键. 键只能包含拉丁字母、数字以及字符-和_.
或者，options 属性也可以定义为对一个静态 PHP 类方法的引用（Class::method）。
任何 CMS 组件 都可以使用 registerPageSnippets 方法在 注册文件 中的您的插件类中注册为代码片段。注册代码片段的 API 类似于 注册组件 的 API。该方法应返回一个以类名为键且以别名为值的数组。
public function registerPageSnippets()
{
return [
\RainLab\Weather\Components\Weather::class => 'weather'
];
}相同的组件可以通过
registerPageSnippets和registerComponents进行注册，以便在CMS页面和内容编辑器中使用。
:::
要启用AJAX处理程序的使用，代码片段可以使用AJAX局部模板进行渲染。您可以通过在组件类定义中将snippetAjax设置为true来启用此功能。
public function componentDetails()
{
return [
// ...
'snippetAjax' => true
];
}这些是一些关于代码片段如何使用的实用示例。
以下代码片段显示了来自定制条目记录的博客文章摘要。它包含一个节组件，并使用外部属性值设置来自post_id代码片段属性的查找value。
发布者设置博客文章的 博客文章 ID，并将其博客文章链接作为卡片元素输出。
## partials/snippets/blog-post-reference.htm
[viewBag]
snippetCode = "blogPostReference"
snippetName = "Blog Post Reference"
snippetDescription = "Display a reference to a blog post"
snippetProperties[post_id][title] = "Blog Post ID"
snippetProperties[post_id][type] = "string"
[section post]
handle = "Blog\Post"
identifier = "id"
value = "{{ post_id }}"{% if post is not empty %}
<div class="card shadow-sm">
<div class="card-body">
<h4>{{ post.title }}</h4>
</div>
<div class="card-footer">
<div class="d-flex justify-content-between align-items-center">
<a href="{{ 'blog/post'|page({ slug: post.slug }) }}" class="stretched-link">
{{ post.categories.first.title|default('') }}
</a>
<small class="text-muted">{{ post.published_at_date|date('j M Y') }}</small>
</div>
</div>
</div>
{% else %}
<!-- Post Missing: Unable to Find an Entry -->
{% endif %}以下代码片段将 YouTube 嵌入视频实现为 CMS 局部组件。它包含一种从浏览器 URL 提取 YouTube 代码并将时间字符串转换为秒的方法。
发布者设置视频网址和起始时间片段值，并使用内联框架元素输出标准的 YouTube 嵌入代码。
## partials/snippets/youtube-video.htm
[viewBag]
snippetCode = "youtubeVideo"
snippetName = "YouTube Video"
snippetDescription = "Embed a Youtube Video on the page"
snippetProperties[url][title] = "Video URL"
snippetProperties[url][type] = "string"
snippetProperties[start_at][title] = "Start At"
snippetProperties[start_at][type] = "string"// Converts https://www.youtube.com/watch?v=k_H2zJ7UZfs to k_H2zJ7UZfs
function urlToCode($link = '')
{
$parts = parse_url($link);
if (isset($parts['query'])) {
parse_str($parts['query'], $qs);
if (isset($qs['v'])){
return $qs['v'];
}
elseif (isset($qs['vi'])){
return $qs['vi'];
}
}
if (isset($parts['path'])){
$path = explode('/', trim($parts['path'], '/'));
return $path[count($path)-1];
}
return null;
}
// Converts 15:00 to 900
function timeToSeconds($time = '')
{
$parts = explode(':', $time);
if (count($parts) === 3) {
return $parts[0] * 3600 + $parts[1] * 60 + $parts[2];
}
elseif (count($parts) === 2) {
return $parts[0] * 60 + $parts[1];
}
return $time ?: 0;
}{% if url %}
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/{{ this.urlToCode(url) }}?start={{ this.timeToSeconds(start_at) }}"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
{% else %}
<!-- Video URL Missing -->
{% endif %}以下代码片段展示了一个基本的联系表单，并提供了一种处理提交逻辑的方式，它不包含表单验证和发送电子邮件的代码。
该代码片段没有属性，发布者只需在页面上包含该小部件，它会输出一个带有成功消息的联系表单。snippetAjax 属性设置为 1 以启用 AJAX 处理程序的使用。
## partials/snippets/contact-form.htm
[viewBag]
snippetCode = "contactForm"
snippetName = "Contact Form"
snippetDescription = "Display a contact form"
snippetAjax = 1function onSubmitContact()
{
$this['submitted'] = true;
}{% if not submitted %}
<h3>Tell us what you think!</h3>
<form data-request="onSubmitContact" data-request-update="{ _self: true }">
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<input name="name" type="text" class="form-control">
<label>Name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<input name="email" type="email" class="form-control">
<label>Email Address</label>
</div>
</div>
</div>
<div class="mb-3 form-floating">
<textarea class="form-control h-100"></textarea>
<label>Message</label>
</div>
<div class="form-buttons d-flex pt-2">
<div>
<button type="submit" class="btn btn-primary btn-pill">Submit</button>
</div>
</div>
</form>
{% else %}
<div class="alert alert-success">
Thanks for contacting us!
</div>
{% endif %}