README

这个TYPO3扩展让前端开发者能够在纯Fluid中创建封装的组件。通过定义清晰的接口（API）进行集成，前端开发者可以独立于后端开发者实现组件。目标是创建高度可重用的表现性组件，它们没有副作用，也不负责数据获取。

⬇️ TL;DR? 立即开始 ⬇️

它能做什么？

Fluid模板通常由三个要素组成

模板,
布局，它结构化和包装模板中定义的标记，以及
部分，它们包含可重复使用的标记片段。

此外，ViewHelpers提供基本控制结构，并封装了其他情况下无法实现的复杂渲染和数据操作。它们定义为PHP类。

该扩展为Fluid添加了另一个要素：组件。

组件是什么？

Fluid组件类似于ViewHelpers。主要区别在于它们可以仅用Fluid定义。从某种意义上说，它们与Fluid的部分非常相似，但它们有一些优势

它们通过预定义的参数提供清晰的接口。实现被封装在组件内部。您不需要知道组件内部如何工作，就可以使用它。
使用语义组件名称，您的模板将更加易于阅读。使用原子设计或类似方法，这将变得更加出色。
由于它们利用Fluid的命名空间，因此可以轻松地在不同的TYPO3扩展中使用。无需partialRootPath。

组件看起来像什么？

以下组件实现了简单的预告卡元素

Components/TeaserCard/TeaserCard.html

<fc:component>
    <fc:param name="title" type="string" />
    <fc:param name="link" type="Typolink" />
    <fc:param name="icon" type="string" optional="1" />
    <fc:param name="theme" type="string" optional="1" default="light" />

    <fc:renderer>
        <a href="{link}" class="{component.class} {component.class}-{theme}">
            <h3 class="{component.prefix}title">{title}</h3>
            <f:if condition="{content}">
                <p class="{component.prefix}description"><fc:slot /></p>
            </f:if>

            <f:if condition="{icon}">
                <i class="icon icon-{icon} {component.prefix}icon"></i>
            </f:if>
        </a>
    </fc:renderer>
</fc:component>

在您的模板中使用以下代码以渲染关于TYPO3的预告卡

{namespace my=VENDOR\MyExtension\Components}
<my:teaserCard
    title="TYPO3"
    link="https://typo3.org"
    icon="typo3"
>
    The professional, flexible Content Management System
</my:teaserCard>

结果是以下HTML

<a href="https://typo3.org" class="smsExampleTeaserCard smsExampleTeaserCard-light">
    <h3 class="smsExampleTeaserCard_title">TYPO3</h3>
    <p class="smsExampleTeaserCard_description">The professional, flexible Content Management System</p>

    <i class="icon icon-typo3 smsExampleTeaserCard_icon"></i>
</a>

（改进了缩进以提高可读性）

入门指南

通过TER或composer安装扩展

composer require sitegeist/fluid-components

在您的ext_localconf.php中定义组件命名空间

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['fluid_components']['namespaces']['VENDOR\\MyExtension\\Components'] =
	\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');

对于VENDOR使用自己的供应商名称，对于MyExtension使用扩展名称，对于my_extension使用扩展密钥。

在EXT:my_extension/Resources/Private/Components/中创建您的第一个组件，通过创建包含文件MyComponent.html的目录MyComponent
根据组件看起来像什么？定义并应用您的组件。扩展文档也有助于此。
查看Fluid Styleguide，一个活页风格指南，以及Fluid Components Linter，以改进您组件的质量和可重用性。

如果您有任何问题，需要支持或想讨论TYPO3中的组件，请随时加入#ext-fluid_components。

为什么我应该使用组件？

组件鼓励标记重用和重构。只有组件知道其实现细节。只要接口保持兼容，实现可以更改。
组件可以作为强制执行设计指南的工具。如果组件的实现遵守指南，它们在组件使用的任何地方都会得到尊重。实现这一目标的有用的工具是相应的活文档：Fluid Styleguide。
组件可以规范和改善沟通。前端开发人员和集成人员就明确定义的接口达成一致，而不是争论实现细节。
组件可以减少依赖。前端开发人员可以独立于集成人员和后端开发人员工作。

扩展文档

特性参考

如何操作

作者和赞助商

Ulrich Mathes - [email protected]
Simon Praetorius - [email protected]
所有贡献者

本包的开发和公开发布得到了我的雇主https://sitegeist.de的大力赞助。

sitegeist / fluid-components

维护者

详细信息