تحميل fluid components - تحميل fluid components كود المصدر

fluid components

مكونات الطرف الثالث

3.8.3 generate placeholder images internal

تنزيل

fluid components

تضع امتدادات TYPO3 مطوري الواجهة الأمامية في وضع يسمح لهم بإنشاء مكونات مغلفة في سائل خالص. من خلال تحديد واجهة واضحة (API) للتكامل، يمكن لمطوري الواجهة الأمامية تنفيذ مكونات مستقلة عن مطوري الواجهة الخلفية. الهدف هو إنشاء مكونات عرض تقديمي قابلة لإعادة الاستخدام بدرجة كبيرة وليس لها أي آثار جانبية وليست مسؤولة عن الحصول على البيانات.

ليرة تركية؟ ابدأ على الفور

ماذا يفعل؟

تتكون قوالب السوائل عادة من ثلاثة مكونات:

قوالب ،
التخطيطات ، التي تنظم وتغلف العلامات المحددة في القالب، و
الأجزاء ، التي تحتوي على مقتطفات ترميزية يمكن إعادة استخدامها في قوالب مختلفة.

بالإضافة إلى ذلك، يوفر ViewHelpers هياكل التحكم الأساسية ويغلف العرض المتقدم ومعالجة البيانات التي لم يكن من الممكن تحقيقها بطريقة أخرى. يتم تعريفها على أنها فئات PHP.

يضيف الامتداد مكونًا آخر إلى Fluid: Components .

ما هي المكونات؟

تشبه fluid components ViewHelpers. والفرق الرئيسي هو أنه يمكن تعريفها فقط في السوائل. بطريقة ما، فهي تشبه إلى حد كبير الأجزاء الجزئية للسوائل، ولكن لديها بعض المزايا:

أنها توفر واجهة واضحة عبر معلمات محددة مسبقًا. يتم تغليف التنفيذ في المكون. لا تحتاج إلى معرفة ما يفعله المكون داخليًا لتتمكن من استخدامه.
باستخدام أسماء المكونات الدلالية، تصبح قوالبك أكثر قابلية للقراءة . وهذا يتحسن مع التصميم الذري أو الأساليب المماثلة.
يمكن استخدامها بسهولة عبر امتدادات TYPO3 المختلفة لأنها تستخدم مساحات أسماء Fluid. لا حاجة إلى مسار جذر جزئي .

كيف تبدو المكونات؟

يقوم المكون التالي بتنفيذ عنصر بطاقة تشويقية بسيط:

المكونات/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_components.

لماذا يجب علي استخدام المكونات؟

تشجع المكونات على إعادة استخدام العلامات وإعادة البناء . فقط المكون يعرف تفاصيل التنفيذ الخاصة به. وطالما ظلت الواجهة متوافقة، يمكن أن يتغير التنفيذ.
يمكن أن تكون المكونات أداة لفرض إرشادات التصميم . إذا كان تنفيذ المكون يحترم الإرشادات، فسيتم احترامها في كل مكان يتم فيه استخدام المكون. هناك أداة مفيدة لتحقيق ذلك وهي دليل أسلوب المعيشة المقابل: Fluid Styleguide.
المكونات تضفي الطابع الرسمي على التواصل وتحسنه . يتفق مطورو الواجهة الأمامية والمتكاملون على واجهة محددة بوضوح بدلاً من مناقشة تفاصيل التنفيذ.
مكونات تقلل التبعيات . يمكن لمطوري الواجهة الأمامية العمل بشكل مستقل عن المتكاملين ومطوري الواجهة الخلفية.