片段是插入到 富文本编辑器 或 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。
键是可选的，如果省略它 (US | Canada)，内部选项值将是基于零的整数 (0, 1, ...)。建议始终使用显式选项键。键只能包含拉丁字母、数字以及字符 - 和 _。
或者，options 属性也可以定义为对一个静态 PHP 类方法的引用（Class::method）。
任何 CMS 组件 可以使用您的插件类中的 registerPageSnippets 方法在 注册文件 中注册为代码片段。注册代码片段的 API 类似于 注册组件。该方法应该返回一个键为类名且值为别名的数组。
public function registerPageSnippets()
{
return [
\RainLab\Weather\Components\Weather::class => 'weather'
];
}同一个组件可以使用
registerPageSnippets和registerComponents注册，以便在 CMS 页面和内容编辑器中使用。
:::
为了启用 AJAX 处理程序，片段可以通过AJAX 分部进行渲染。您可以通过在组件类定义中将 snippetAjax 设置为 true 来启用此功能。
public function componentDetails()
{
return [
// ...
'snippetAjax' => true
];
}这些是代码片段如何使用的一些实用示例。
以下代码片段显示了来自 tailor 条目记录的博客文章摘要。它包含一个 section 组件，并使用外部属性值从 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 代码并将时间字符串转换为秒.
发布者设置视频 URL和开始时间代码片段值，并使用内联框架元素输出标准的 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 %}