Загрузка 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. ЧастичныйRootPath не требуется.

Как выглядят компоненты?

Следующий компонент реализует простой элемент карточки-тизера:

Компоненты/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 .

Создайте свой первый компонент в EXT:my_extension/Resources/Private/Components/, создав каталог MyComponent, содержащий файл MyComponent.html.
Определите и примените свой компонент в соответствии с разделом «Как выглядят компоненты?». Расширенная документация также может быть полезна.
Ознакомьтесь с Fluid Styleguide, актуальным руководством по стилю для fluid components и fluid components Linter, чтобы улучшить качество и возможность повторного использования ваших компонентов.

Если у вас есть какие-либо вопросы, вам нужна поддержка или вы хотите обсудить компоненты TYPO3, присоединяйтесь к #ext-fluid_comComponents.

Почему мне следует использовать компоненты?

Компоненты поощряют повторное использование и рефакторинг разметки . Только компонент знает детали своей реализации. Пока интерфейс остается совместимым, реализация может меняться.
Компоненты могут быть инструментом для обеспечения соблюдения рекомендаций по проектированию . Если реализация компонента соответствует рекомендациям, они соблюдаются везде, где используется компонент. Полезным инструментом для достижения этой цели является соответствующее руководство по стилю жизни: Fluid Styleguide.
Компоненты формализуют и улучшают общение . Разработчики внешнего интерфейса и интеграторы договариваются о четко определенном интерфейсе, а не обсуждают детали реализации.
Компоненты уменьшают зависимости . Разработчики внешнего интерфейса могут работать независимо от интеграторов и разработчиков серверной части.

Расширенная документация

Ссылки на функции

Справочник по ViewHelper
Структуры данных
- Ссылки и Тайполинк
- Файлы и изображения
- Переводы
- Навигация
- ДатаВремя
- Слоты
Префиксы компонентов
Настройки компонента

инструкции