fluid components下載 - fluid components原始碼下載

fluid components

三方組件

3.8.3 generate placeholder images internal

下載

fluid components

這個 TYPO3 擴充功能使前端開發人員能夠在純 Fluid 中建立封裝元件。透過定義清晰的整合介面（API），前端開發人員可以獨立於後端開發人員實現元件。目標是創建高度可重複使用的演示組件，該組件沒有副作用並且不負責資料收集。

長話；博士？立即開始

它有什麼作用？

流體模板通常由三種成分組成：

模板，
Layouts ，它構造和包裝模板中定義的標記，以及
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。

為什麼我應該使用組件？

組件鼓勵標記重用和重構。只有組件知道其實作細節。只要介面保持相容，實作就可以改變。
元件可以成為執行設計指南的工具。如果元件的實作遵守這些準則，那麼在使用該元件的任何地方都會遵守這些準則。實現這一目標的一個有用工具是相應的生活風格指南：流體風格指南。
組件形式化並改善通訊。前端開發人員和整合商就明確定義的介面達成一致，而不是爭論實作細節。
組件減少了依賴性。前端開發人員可以獨立於整合商和後端開發人員工作。