fluid components下载 - fluid components源码下载

fluid components

三方组件

3.8.3 generate placeholder images internal

下载

fluid components

这个 TYPO3 扩展使前端开发人员能够在纯 Fluid 中创建封装组件。通过定义清晰的集成接口（API），前端开发人员可以独立于后端开发人员实现组件。目标是创建高度可重用的演示组件，该组件没有副作用并且不负责数据采集。

长话；博士？立即开始

它有什么作用？

流体模板通常由三种成分组成：

模板，
布局，它构造和包装模板中定义的标记，以及
Partials ，其中包含要在不同模板中重用的标记片段。

此外， ViewHelpers提供基本的控制结构并封装高级渲染和数据操作，否则这些是不可能的。它们被定义为 PHP 类。

该扩展为 Fluid 添加了另一种成分： Components 。

什么是组件？

fluid components与 ViewHelpers 类似。主要区别在于它们只能在 Fluid 中定义。在某种程度上，它们与 Fluid 的偏音非常相似，但它们有一些优点：

它们通过预定义的参数提供清晰的界面。实现被封装在组件中。您无需了解该组件的内部功能即可使用它。
使用语义组件名称，您的模板将变得更具可读性。通过原子设计或类似的方法，这会变得更好。
它们可以轻松地在不同的 TYPO3 扩展中使用，因为它们利用 Fluid 的命名空间。不需要partialRootPath 。

组件是什么样子的？

以下组件实现了一个简单的预告片元素：

组件/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=VENDORMyExtensionComponents}
< 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 。

通过创建包含文件MyComponent.html的目录MyComponent，在EXT:my_extension/Resources/Private/Components/中创建第一个组件
根据组件的外观如何？定义并应用您的组件。扩展文档也很有帮助。
查看流体样式指南（ fluid components的实时样式指南）和fluid components Linter，以提高组件的质量和可重用性。

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

为什么我应该使用组件？

组件鼓励标记重用和重构。只有组件知道其实现细节。只要接口保持兼容，实现就可以改变。
组件可以成为执行设计指南的工具。如果组件的实现遵守这些准则，那么在使用该组件的任何地方都会遵守这些准则。实现这一目标的一个有用工具是相应的生活风格指南：流体风格指南。
组件形式化并改善通信。前端开发人员和集成商就明确定义的接口达成一致，而不是争论实现细节。
组件减少了依赖性。前端开发人员可以独立于集成商和后端开发人员工作。