fluid components 다운로드 - fluid components 소스 코드 다운로드

fluid components

타사 구성 요소

3.8.3 generate placeholder images internal

다운로드

fluid components

이 TYPO3 확장을 사용하면 프런트엔드 개발자가 순수 Fluid에서 캡슐화된 구성 요소를 만들 수 있습니다. 통합을 위한 명확한 인터페이스(API)를 정의함으로써 프런트엔드 개발자는 백엔드 개발자와 독립적으로 구성요소를 구현할 수 있습니다. 목표는 부작용이 없고 데이터 수집에 대한 책임이 없는 재사용 가능성이 높은 프레젠테이션 구성 요소를 만드는 것입니다.

TL, DR? 지금 바로 시작하세요

그것은 무엇을 합니까?

유체 템플릿은 일반적으로 다음 세 가지 구성 요소로 구성됩니다.

템플릿 ,
템플릿에 정의된 마크업을 구조화하고 래핑하는 레이아웃
Partials - 다른 템플릿에서 재사용할 마크업 조각이 포함되어 있습니다.

또한 ViewHelpers는 기본 제어 구조를 제공하고 다른 방법으로는 불가능했던 고급 렌더링 및 데이터 조작을 캡슐화합니다. 이는 PHP 클래스로 정의됩니다.

확장 기능은 Fluid: Components 에 또 다른 성분을 추가합니다.

구성요소란 무엇입니까?

fluid components ViewHelpers와 유사합니다. 주요 차이점은 Fluid에서만 정의할 수 있다는 것입니다. 어떤 면에서는 Fluid의 부분과 매우 유사하지만 몇 가지 장점이 있습니다.

사전 정의된 매개변수를 통해 명확한 인터페이스를 제공합니다. 구현은 구성 요소에 캡슐화됩니다. 구성 요소를 사용하기 위해 구성 요소가 내부적으로 수행하는 작업을 알 필요는 없습니다.
의미 체계 구성 요소 이름을 사용하면 템플릿의 가독성이 높아집니다. 이는 원자 설계 또는 유사한 접근 방식을 통해 더욱 향상됩니다.
Fluid의 네임스페이스를 활용하기 때문에 다양한 TYPO3 확장에서 쉽게 사용할 수 있습니다. 부분 루트 경로가 필요하지 않습니다.

구성품은 어떻게 생겼나요?

다음 구성요소는 간단한 티저 카드 요소를 구현합니다.

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=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 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 Styleguide와 구성 요소의 품질과 재사용성을 향상시키는 fluid components Linter를 확인하세요.

질문이 있거나 지원이 필요하거나 TYPO3의 구성 요소에 대해 논의하고 싶다면 언제든지 #ext-fluid_comComponents에 가입하세요.

왜 컴포넌트를 사용해야 합니까?

구성 요소는 마크업 재사용과 리팩토링을 장려합니다. 구성 요소만이 구현 세부 사항을 알고 있습니다. 인터페이스가 호환되는 한 구현은 변경될 수 있습니다.
구성 요소는 디자인 지침을 적용 하는 도구가 될 수 있습니다. 구성 요소의 구현이 지침을 준수하는 경우 해당 구성 요소가 사용되는 모든 곳에서 지침이 준수됩니다. 이를 달성하는 데 유용한 도구는 해당 생활 스타일 가이드인 Fluid Styleguide입니다.
구성요소는 의사소통을 공식화하고 향상시킵니다 . 프런트엔드 개발자와 통합자는 구현 세부 사항에 대해 토론하는 대신 명확하게 정의된 인터페이스에 동의합니다.
구성 요소는 종속성을 줄입니다 . 프런트엔드 개발자는 통합업체 및 백엔드 개발자와 독립적으로 작업할 수 있습니다.