README

Fluid 内容：核心元素

是 EXT:css_styled_content 的替代品，100% 由 Fluid 和 Flux Forms 驱动。

它能做什么？

与 EXT:css_styled_content 类似，此扩展为 tt_content 记录添加渲染指令。但与使用 TypoScript 操作渲染不同，每个内容元素类型都分配了一个 Fluid 模板，并且是 完全由 Fluid 渲染的。

我该如何安装它？

1. 禁用扩展 "CSS 样式内容"（css_styled_content）。您不能同时使用 css_styled_content 和 fluidcontent_core！
2. 下载扩展并安装。
3. 复制，或集成到您自己的，从 EXT:fluidcontent_core/Build/AdditionalConfiguration.php 中的 AdditionalConfiguration.php 文件 - 或者使用扩展管理器升级脚本为 fluidcontent_core，它会为您完成此操作。
4. 加载静态 TypoScript 模板，添加定义可以设置在容器 HTML 元素上的 CSS 类名、默认 H 大小等配置选项。

为什么要使用它？

在定制样式的 TYPO3 CMS 网站方面，它没有比这更灵活了。您可以用自己的 Fluid 模板替换任意数量的内置内容元素。您可以选择在各个子页面上使用哪些模板（使用 TypoScript 覆盖视图路径）。您可以使用与 EXT:view 中的类似模板路径覆盖。您可以直接在模板文件中插入 Flux 表单定义，并添加任意数量的字段来控制渲染，而不是使用 FlexForm 或添加 TCA/DB 列表。

您甚至可以将任意数量的这些内置内容元素类型放入 Flux Provider 扩展中，并添加（静态）TypoScript 设置，使此扩展首先使用您的模板路径，然后回退到包含的模板。

它比 css_styled_content 快吗？

是的，快得多。初始测量显示，仅由于缓存页面中大约有 10% 的 TypoScript 需要加载（请注意，TypoScript 实际上也会在缓存页面中加载，并且通常占缓存页面前端加载时间的 50% 以上）。因此，在缓存页面上确实快得多。但是，在生成缓存内容时可能会稍微慢一些，如果您故意禁用缓存，也是如此。您有所得，也有所失。

示例

内置模板文件位于 Resources/Private/Templates/CoreContent - 它们都共享一个布局文件，并使用一个部分模板来渲染共享的头部（相当于 EXT:css_styled_content 中的 lib.stdheader）。各个插件在 ext_localconf.php 中进行配置（每个插件对应一个内容类型，匹配每个可能的 CType 值），并使用一小部分 TypoScript 构建一个基本的 tt_content.* 数组，这是渲染任何内容所必需的。这，以及您已经知道的模板路径定义 - 以及您选择添加并因此在模板中可用的任何自定义设置 - 是本扩展所需要的唯一 TypoScript。视图定义与您从任何 Extbase 插件中了解的完全相同。

本质上，这是一个用于替换 EXT:css_styled_content 基于 TypoScript 渲染的 Extbase 插件，并利用 Flux 使配置您想要用于配置内容外观的精确字段变得极其简单。

这可能是您用过的最简单的扩展之一，一切都是在 Flux、Extbase 和 Fluid 的约定基础上构建的，以提供最大的灵活性。

有三种主要方式可以将您自己的内容元素模板替换为核心内容元素模板。每种都有非常特定的用途 - 作为扩展开发者或集成商，您的责任是选择正确的一种，以确保您的模板集合能够完美集成。

概念

FluidcontentCore 使内容使用具有三个级别，按简单性排序

1. 使用自定义 Fluid 模板替换一个或多个内容元素类型。
2. 提供每个内容元素类型的更多变体，例如来自多个扩展的“文本”元素，例如适配不同的 CSS 框架，可以配置为默认使用。
3. 提供每个内容元素类型变体的附加版本，例如当选择 Twitter Bootstrap 文本元素时，您可能希望提供一个使用 <p class="lead"></p> 并支持 text-warning 等CSS类的版本。

第一种方法 是您从任何 Fluid 环境在 TYPO3 中所了解的方法。

第二种方法 可以通过查看扩展 fluidbootstraptheme 仅向 TYPO3 的已内置内容元素中添加附加内容元素来解释。这允许添加标准内容元素的附加变体，而无需替换标准元素。

第三种方法 可以被视为为添加的每个变体进行版本控制的方式：例如，在做出更改时将现有元素复制到旧模板中，尝试新版本的内容而不替换当前版本，或者简单地将内容元素的某个变体分成多个专业的“渲染版本”，如上面 Twitter Bootstrap 扩展示例中所示。

更详细的描述将在这几章中给出。

概念：覆盖和替代

用例：强制覆盖现有模板以始终使用您的模板

这是现在极为人们所熟知的“替换所有”或“替换几个”策略 - 足够说明的是，您可以配置 FluidcontentCore 使用替代的 templateRootPath 等，并且当您这样做时，每个模板文件都必须存在于这个其他路径中。或者，不太为人所知但希望您熟悉的是，例如 EXT:view 和 EXT:fluidpages 实现的“覆盖”方法，允许您替换一个（或任何数量的）模板文件，而无需替换所有文件。

您可以使用此概念创建一个完全新的“核心内容”包，该包使用您的自定义模板进行渲染。当您不想复制所有模板文件时，可以使用“覆盖”。

概念：变体

用例：扩展xyz希望包含一个替代的“文本”或其他类型的核心内容元素，编辑人员可以使用，除了在TypoScript中配置的默认或覆盖模板路径中存在的核心元素。

请注意“除了”这部分。这就是为什么这个概念被称为“变体”而不是“替代”。当您不希望替换现有模板，而是提供替代（变体）模板时，请使用此概念，这些模板也可以使用。通过模板路径覆盖或覆盖，您会得到一个“变体”（您覆盖或覆盖的那个）。使用这个概念，您会得到两个“变体” - 基本的一个（可能被覆盖或覆盖）和您添加的一个。

变体概念简单来说就是您可以添加任意数量的每种内容类型的变体，每个变体由扩展提供。为了通知FluidcontentCore您的变体，请添加以下代码

// ext_tables.php
$GLOBALS['TYPO3_CONF_VARS']['FluidTYPO3.FluidcontentCore']['variants']['text'][] = 'myextensionkey';
$GLOBALS['TYPO3_CONF_VARS']['FluidTYPO3.FluidcontentCore']['variants']['image'][] = 'myextensionkey';

或者如果您的扩展使用命名空间并且包含供应商名称

// ext_tables.php
$GLOBALS['TYPO3_CONF_VARS']['FluidTYPO3.FluidcontentCore']['variants']['text'][] = 'VendorName.ExtensionName';
$GLOBALS['TYPO3_CONF_VARS']['FluidTYPO3.FluidcontentCore']['variants']['image'][] = 'VendorName.ExtensionName';

在显示时，变体选择框将默认在以下位置查找LLL标签

EXT:myextensionkey/Resources/Private/Language/locallang.xlf:fluidcontent_core.variantLabel

或者您可以通过稍作扩展的注册来手动选择标签和变体的可选图标

$GLOBALS['TYPO3_CONF_VARS']['FluidTYPO3.FluidcontentCore']['variants']['text'][] = array(
	
	'myextensionkey',
	// the first array member must be the extension key, with or without vendor as required
	
	'LLL:EXT:myextensionkey/Resources/Private/Language/locallang.xlf:my_custom_label',
	// a complete LLL file-and-label reference pointing to the label you want
	
	ExtensionManagementUtility::extRelPath('myextensionkey') . 'icon.png'
	// or another file name, or a path (NB: siteroot-relative!) - or NULL for no icon.
);

然后创建模板文件

<!-- EXT:myextensionkey/Resource/Private/Templates/CoreContent/Text.html -->
The text: {record.bodytext}

<!-- EXT:myextensionkey/Resource/Private/Templates/CoreContent/Image.html -->
My custom images:
<!-- some custom rendering of images -->

这将创建两个变体的text和image CType内容元素：始终存在的第一个选项，称为“标准”，意味着“不用了，请使用在任何模板路径中配置的默认类型”，以及您新添加的变体 - 它将由它所属的扩展密钥识别。

从那时起，在编辑text或image元素时选择变体，FluidcontentCore将渲染您扩展中的变体模板，而不是在TypoScript中配置的默认模板位置存在的模板。

注意：更改此示例中为myextensionkey设置的模板RootPath等TypoScript，将使FluidcontentCore在该其他位置查找属于您的变体的模板文件！

您不能为您的变体选择自定义模板文件名或自定义位置 - 它们必须位于CoreContent模板文件夹中，并且必须按照覆盖的CType使用大驼峰命名法命名：Text.html、Image.html、Uploads.html等。

注意：模板文件必须存在，否则您的变体将被忽略！

概念：版本

用例：您已经提供了一个元素的“变体”，但现在您应该提供更多元素的“版本”，有两个目的：1）使您能够在一个内容元素中测试新的元素设计，以及/或2）创建只有当您的“变体”类型被选中时才能选择的逻辑版本。

由于此概念仅适用于您使用变体时，您必须首先为所需类型的每个元素注册一个变体

// ext_tables.php
$GLOBALS['TYPO3_CONF_VARS']['FluidTYPO3.FluidcontentCore']['variants']['text'][] = 'myextensionkey';

或者如果您的扩展使用命名空间并且包含供应商名称

// ext_tables.php
$GLOBALS['TYPO3_CONF_VARS']['FluidTYPO3.FluidcontentCore']['variants']['text'][] = 'VendorName.ExtensionName';

<!-- EXT:myextensionkey/Resource/Private/Templates/CoreContent/Text.html -->
The basic version: {record.bodytext}

然后，为了提供更多“文本”内容元素的版本

<!-- EXT:myextensionkey/Resource/Private/Templates/CoreContent/Text/Truncated.html -->
The shortened version: {record.bodytext -> f:format.crop(maxCharacters: 100)}

<!-- EXT:myextensionkey/Resource/Private/Templates/CoreContent/Text/Raw.html -->
The raw version: {record.bodytext -> f:format.raw()}

等等。当然，这些都是非常基本的例子 - 目的不是记录每个可能的用例，而是激励您使用这些概念来实现您的特定目标。请记住：您甚至可以将Flux表单字段放入部分模板中，并从所有版本中简单地渲染这些字段，以便版本共享一个或多个Flux表单字段。同样，这适用于Flux表单表等。

注意：尽管与“版本”启用相同的行为，但在大多数情况下，也可以通过Flux表单设置（如选择器）在渲染裁剪、原始、HTML格式化等文本之间进行切换，然后在模板本身中使用条件 - 然而，使用“版本”可以使您在模板复杂度上节省很多，并允许包括仅在选中该特定版本时才会接触到的旧元素。就像静态TypoScript css_styled_content使用的不同版本，以提供易于兼容性。

内置内容元素类型

• Header.html
• Text.html
• Image.html
• Bullets.html
• Uploads.html
• Table.html
• Media.html
• Menu.html
• Shortcut.html
• Div.html
• Html.html (是的，html-dot-html，就是这样...)
• Default.html

关于Textpic（带图片的文本）内容类型的特别说明

正如您可能已经注意到的，没有为TYPO3核心内容类型 Textpic（带图片的文本）提供模板。原因很简单，但也很主观：这个特定的内容元素类型需要大量的设置和渲染指令来满足最常见的使用案例。这在CSSStyledContent提供的TypoScript设置中也很明显 - 管理图片和文本位置和流程的设置如此庞大，以至于在大多数网站上，您只使用了一小部分设置。

因此，决定 根本不为此内容类型提供任何模板，以避免CSSStyledContent中不可避免的复杂性爆炸。

我们的替代建议是创建控制结构的大容器元素，然后在其中插入常规的 Text 和 Image 元素。结果是有更多元素，但类型之间的分离更加清晰（这在例如网站搜索与内容类型维度的上下文中非常有用）。当然，您还可以再进一步，创建自己的自定义元素，这些元素使用您自己的自定义字段来定义您以完全自定义的方式渲染的文本和图片。

未来改进计划

1. 完成基本模板集，以实现回退质量的渲染
2. 引入资产配置集成（可能利用LESS/SASS来获取Flux表单值以用于编译CSS）
3. 试图征服世界。就像每晚一样，Pinky。