剧透警告：这篇文章的结尾有一个挑战等你来，如果我能得到足够的答案，杂志上将会有一篇关于自定义字段的终极文章。
???❤️

在上一个节目中自定义字段 - 第7集第1部分：一个自定义字段统治所有，我们介绍了Joomla4引入的新自定义字段类型，即子表单。

在实践中，我们甚至只用一个自定义字段就构建了一个完整的轮播图？。

实际上，我们不需要任何扩展，只需使用Joomla核心的功能。特别是只需要一个功能：即备用布局。

换句话说，现在你只需要将一个文件复制粘贴到网站的正确文件夹中就可以拥有相同的轮播图？。

一个小型的GitHub仓库收集了所有这些备用布局

为了使复制粘贴更加方便，我们创建了一个GitHub仓库，收集了所有这些备用布局/覆盖

github.com/woluweb/Custom-Field-of-Type-Subform

这个小GitHub仓库的几个优点

1. 你有语法高亮显示
   (杂志中的<code>目前仅以黑白显示)
2. 你可以轻松地分叉它以适应备用布局的需求
3. 最后但并非最不重要的是，你可以提出改进建议？

仅在文章视图上显示轮播图

在github.com/woluweb/Custom-Field-of-Type-Subform/blob/main/step2-my-carousel-article-view-only.php上查看详细代码

默认情况下（当然，除非你的模板没有预见这一点），Joomla会在文章视图和博客视图上显示自定义字段

• 在文章视图中
• 在博客视图中

然而，在许多情况下，用户不一定希望（所有）自定义字段都显示在博客视图中。

我的简单解决方案有时是使用CSS隐藏它们（使用简单的{display: none}）。

当相关的自定义字段仅是文本或数字时，这已经足够好了，但如果它们是图片、视频或地图等，由于明显的性能原因，您不想先加载然后隐藏它们。

所以，正如我们在前一集中看到的那样，如果您想限制在哪个视图中显示任何自定义字段，只需在您的替代布局/覆盖中添加以下2行即可：

$view = $app->input->getCMD('view', '');
if ('article' !== $view) { return; }

这意味着如果视图不是文章视图，则跳过其余代码（return;）

提醒一下，我们给轮播容器分配了以下ID

$carouselContainerId = 'carousel-field'. $field->id; 

实际上意味着所有轮播图都会使用（相同的）以下容器

<div id="carousel-field4">

其中4是我们自定义字段子表单类型的ID。

在博客视图中也显示轮播图

要显示所有视图中的轮播图，我们只需禁用以下行即可，我们最初添加此行是为了限制轮播图只显示在文章视图中（换句话说，我们在行中添加//将其转换为注释）

// if ('article' !== $view) { return; }

如果我们在一个博客视图中显示轮播图（我们的自定义字段类型为子表单），我们将在同一页面上获得多个轮播图。

仍然按照定义，每个轮播图容器应该有一个唯一的ID，因为否则我们会有JavaScript问题（当访客点击下一个/上一个按钮时，JavaScript代码应该知道它应用于哪个轮播图）。

所以问题是：如何为每个轮播图容器获取一个唯一的ID，因为我们知道自定义字段本身对上下文是无关的（换句话说，我们无法访问文章ID以使其容易唯一）？

侧记：容器ID不应该以数字开头。

以下是我们将得到的截图

解决方案1 - 使用其原始值的哈希为自定义字段提供一个唯一的ID

在github.com/woluweb/Custom-Field-of-Type-Subform/blob/main/step3-my-carousel-article-and-blog-views.php上查看详细代码

此解决方案只需要当前的替代布局：我们简单地基于整个$rawvalue创建一个MD5哈希。

因此，即使两篇文章几乎具有相同的轮播图（例如，具有相同的图片，但在文本或图片数量上略有不同），它们也将具有不同的哈希。

这是一个实用的解决方案，应该可以覆盖99%以上的情况。

现在让我们给轮播容器分配以下ID

$carouselContainerId = 'carousel-field'. $field->id . '-'. md5($rawvalue, false);

实际上，每篇文章都会有一个唯一的容器，类似于以下内容，无论是在文章视图还是在博客视图中

<div id="carousel-field4-e714c3f5e913f8521b854c432145770b">

其中e714c3f5e913f8521b854c432145770b是我们自定义字段子表单类型的原始值的哈希。

解决方案2 - 通过获取相应的文章ID为自定义字段提供一个唯一的ID

在github.com/woluweb/Custom-Field-of-Type-Subform/blob/main/step4-my-carousel-article-and-blog-views-with-article-id.php上查看详细代码

我们没有提到文章ID在我们的替代布局中是不可用的吗？是的，确实如此...但我们在这里找到了一种干净的方法使其可用？

在我们的当前替代布局旁边，我们创建一个覆盖

components/com_fields/layouts/fields/render.php

在

/templates/[template]/html/layouts/com_fields/fields

如之前详细解释的集中所述，覆盖可以通过以下方式完成：

• 手动（例如通过FTP）
• 或简单地通过Joomla的后端

在这个覆盖中，我们将更改

$content = FieldsHelper::render($context, 'field.' . $layout, array('field' => $field));

为

$content = FieldsHelper::render($context, 'field.' . $layout, array('itemid' => $item->id, 'field' => $field));

换句话说，在“字段布局”中，我们将项目ID（在这个例子中是文章ID）在“字段布局”中可用。

请在此处找到修改后的 render.php 文件：https://github.com/woluweb/Custom-Field-of-Type-Subform/blob/main/render.php

因此，我们现在可以这样定义容器ID：

$carouselContainerId = 'carousel-field'. $field->id . '-'. $displayData['itemid'];

实际上，给定文章在文章视图和博客视图中都会有以下容器：

<div id="carousel-field4-41">

其中 41 是相关文章的ID。

重构的备用布局（针对更高级的用户）

如果您想要一个重构后的Solution 1的代码版本，这可能更容易定制，特别是如果您是一个更高级的用户，以下是该版本：

github.com/woluweb/Custom-Field-of-Type-Subform/blob/main/step5-my-carousel.php

我的结论 & 你的挑战

在过去3年里，我为Joomla社区杂志写了9篇关于自定义字段的文章。

所以现在，我可能已经把我所知道的关于自定义字段的一切都告诉你们了？

在这个阶段，让我超级开心的事情是有一篇第10篇也是最后一篇文章，尽可能多地收集自定义字段在实际操作中的例子。

这无疑会为所有Joomla爱好者提供更多灵感？。

提前感谢！