ดาวน์โหลด fluid components - fluid components ดาวน์โหลดซอร์สโค้ด

fluid components

ส่วนประกอบของบุคคลที่สาม

3.8.3 generate placeholder images internal

ดาวน์โหลด

fluid components

ส่วนขยาย TYPO3 นี้ทำให้นักพัฒนาส่วนหน้าสามารถสร้างส่วนประกอบที่ห่อหุ้มใน Fluid ล้วนๆ ด้วยการกำหนดอินเทอร์เฟซที่ชัดเจน (API) สำหรับการบูรณาการ นักพัฒนาส่วนหน้าสามารถใช้ส่วนประกอบที่เป็นอิสระจากนักพัฒนาแบ็กเอนด์ได้ เป้าหมายคือการสร้างองค์ประกอบการนำเสนอที่สามารถนำมาใช้ซ้ำได้สูง ซึ่งไม่มีผลข้างเคียง และไม่รับผิดชอบต่อการรับข้อมูล

TL;DR? เริ่มต้นได้ทันที

มันทำอะไร?

เทมเพลตแบบไหลมักประกอบด้วยองค์ประกอบ 3 อย่างดังนี้

เทมเพลต ,
เค้าโครง ซึ่งจัดโครงสร้างและล้อมมาร์กอัปที่กำหนดไว้ในเทมเพลต และ
บางส่วน ซึ่งมีตัวอย่างมาร์กอัปเพื่อนำมาใช้ซ้ำในเทมเพลตต่างๆ

นอกจากนี้ ViewHelpers ยังมีโครงสร้างการควบคุมขั้นพื้นฐานและสรุปการเรนเดอร์ขั้นสูงและการจัดการข้อมูลที่อาจเป็นไปไม่ได้ พวกเขาถูกกำหนดให้เป็นคลาส PHP

ส่วนขยายเพิ่มส่วนผสมอื่นให้กับ Fluid: Components

ส่วนประกอบคืออะไร?

fluid components จะคล้ายกับ ViewHelpers ข้อแตกต่างที่สำคัญคือสามารถกำหนดได้เฉพาะในฟลูอิดเท่านั้น ในทางหนึ่ง พวกมันค่อนข้างคล้ายกับบางส่วนของของไหล แต่มีข้อดีบางประการ:

มี อินเทอร์เฟซที่ชัดเจน ผ่านพารามิเตอร์ที่กำหนดไว้ล่วงหน้า การใช้งานถูกห่อหุ้มไว้ในส่วนประกอบ คุณไม่จำเป็นต้องรู้ว่าส่วนประกอบทำอะไรภายในจึงจะสามารถใช้งานได้
ด้วยชื่อองค์ประกอบเชิงความหมาย เทมเพลตของคุณจึง สามารถอ่านได้ ง่ายขึ้น สิ่งนี้จะดียิ่งขึ้นไปอีกด้วยการออกแบบอะตอมมิกหรือแนวทางที่คล้ายกัน
สามารถใช้งานได้กับส่วนขยาย 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 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
ส่วนประกอบต่างๆ เป็นระเบียบและปรับปรุงการสื่อสาร นักพัฒนาส่วนหน้าและผู้รวมระบบเห็นด้วยกับอินเทอร์เฟซที่กำหนดไว้อย่างชัดเจน แทนที่จะถกเถียงรายละเอียดการใช้งาน
ส่วนประกอบ ลดการพึ่งพา นักพัฒนาส่วนหน้าสามารถทำงานโดยอิสระจากผู้รวมระบบและนักพัฒนาแบ็กเอนด์

เอกสารเพิ่มเติม

การอ้างอิงคุณสมบัติ

การอ้างอิง ViewHelper
โครงสร้างข้อมูล
- ลิงค์และ Typolink
- ไฟล์และรูปภาพ
- การแปล
- การนำทาง
- วันที่และเวลา
- สล็อต
คำนำหน้าส่วนประกอบ
การตั้งค่าส่วนประกอบ

วิธีการ