การดาวน์โหลด commonmark image media queries - commonmark image media queries ดาวน์โหลดซอร์สโค้ดดาวน์โหลด

commonmark image media queries

หมวดหมู่อื่นๆ

Version 1.0.1

ดาวน์โหลด

ข้อความค้นหาสื่อ Commonmark

ส่วนขยาย Commonmark นี้ช่วยให้คุณเพิ่มการสืบค้นสื่อลงในรูปภาพใน markdown ที่แสดง Commonmark

การติดตั้ง

คุณสามารถติดตั้งส่วนขยายนี้ผ่านนักแต่งเพลง:

composer require sven/commonmark-image-media-queries

การใช้งาน

ในการเปิดใช้งานส่วนขยายนี้ก่อนอื่นตรวจสอบให้แน่ใจว่าส่วนขยาย Attributes ที่เปิดใช้งานกับ Commonmark จากนั้นเพิ่มลงในสภาพแวดล้อม Commonmark:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

$ environment -> addExtension ( new ImageMediaQueriesExtension ());

ตอนนี้คุณสามารถเพิ่มแอตทริบิวต์ media ลงในรูปภาพของคุณ:

 ![ from 800px wide ] ( /assets/800.jpg ) {media="(min-width: 800px)"}
![ from 1200px wide ] ( /assets/1200.jpg ) {media="(min-width: 1200px)"}
![ An image ] ( /assets/default.jpg )

สิ่งนี้จะทำให้ html ต่อไปนี้:

 < picture class =" media-query-picture " >
    < source srcset =" /assets/800.jpg " media =" (min-width: 800px) " />
    < source srcset =" /assets/1200.jpg " media =" (min-width: 1200px) " />
    < img src =" /assets/default.jpg " alt =" An image " />
</ picture >

สำคัญ

ภาพ สุดท้าย โดยตรงหลังจากภาพอื่น ๆ อย่างน้อยหนึ่งภาพที่มีแอตทริบิวต์ media จะถูกใช้เป็น "ค่าเริ่มต้น" เสมอและจะแสดงผลเป็นแท็ก <img /> ในองค์ประกอบ <picture> หากภาพสุดท้ายนี้มีแอตทริบิวต์ media เองคุณลักษณะนั้นจะไม่ถูกใช้และถูกถอดออกไป

การจดชวเลข

ส่วนขยายนี้ยังจัดส่งด้วยและช่วยให้คุณเขียนชวเลขของคุณเองสำหรับการสืบค้นสื่อที่ใช้บ่อย คุณสามารถเปิดใช้งานชวเลขในขณะที่ลงทะเบียนส่วนขยายด้วย Commonmark:

 use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;
use Sven  CommonMark  ImageMediaQueries  Shorthands  ColorScheme ;

$ extension = new ImageMediaQueriesExtension ();
$ extension -> addShorthand ( new ColorScheme ());

$ environment -> addExtension ( $ extension );

โทนสี

SvenCommonMarkImageMediaQueriesShorthandsColorScheme Shorthand ช่วยให้คุณใช้ {scheme=dark} บนภาพและขยายออกเป็น (prefers-color-scheme: dark) :

 ![ dark ] ( /assets/dark-settings.jpg ) {scheme=dark}
![ A settings dialog ] ( /assets/settings.jpg )

สิ่งนี้จะทำให้ html ต่อไปนี้:

 < picture class =" media-query-picture " >
    < source srcset =" /assets/dark-settings.jpg " media =" (prefers-color-scheme: dark) " />
    < img src =" /assets/settings.jpg " alt =" An image " />
</ picture >

ความกว้าง

SvenCommonMarkImageMediaQueriesShorthandsWidth Shorthand ให้คุณลักษณะ minw และ maxw เพื่อเพิ่มลงในภาพ ตัวอย่างจากด้านบนสามารถย่อให้สั้นลงไปได้:

 ![ from 800px wide ] ( /assets/800.jpg ) {minw=800px}
![ from 1200px wide ] ( /assets/1200.jpg ) {minw=1200px}
![ An image ] ( /assets/default.jpg )

หลักสูตรนี้ยังทำงานเหมือนกันกับ {maxw=[value]}

การเขียนของคุณเอง

ในการเขียนชวเลขของคุณเองให้ใช้ SvenCommonMarkImageMediaQueriesShorthandsShorthand Interface และส่งคืนคำค้นหาที่จัดทำโดยวิธีการชวเลขจากวิธีการ mediaQueries อินสแตนซ์ใด ๆ ของ {} ในแบบสอบถามจะถูกแทนที่ด้วยค่าของแอตทริบิวต์ HTML

 use Sven  CommonMark  ImageMediaQueries  Shorthands  Shorthand ;

final class AspectRatio implements Shorthand
{
    public function mediaQueries (): iterable
    {
        return [
            ' min-aspect ' => ' (min-aspect-ratio: {}) ' ,
            ' max-aspect ' => ' (max-aspect-ratio: {}) ' ,
        ];
    }
}

หากคุณเพิ่มชวเลขลงในส่วนขยายคุณสามารถใช้แอตทริบิวต์เช่น {min-aspect=8/5} และ {max-aspect=3/2} บนภาพใน markdown ของคุณ

บันทึก

คุณสามารถใช้ SvenCommonMarkImageMediaQueriesShorthandsConfigurationAwareShorthand Interface แทน อินเตอร์เฟส Shorthand ปกติหากคุณต้องการเข้าถึงวัตถุการกำหนดค่า Commonmark

การกำหนดค่า

โดยค่าเริ่มต้นส่วนขยายนี้จะเพิ่มคลาส media-query-picture ลงในองค์ประกอบ <picture> ที่แสดงผล คุณสามารถเปลี่ยนคลาสนี้ในการกำหนดค่า:

 use League  CommonMark  Environment  Environment ;
use Sven  CommonMark  ImageMediaQueries  ImageMediaQueriesExtension ;

$ environment = new Environment ([
    ' image_media_queries ' => [
        ' picture_class ' => ' your-class ' , // Default: 'media-query-picture'.
    ],
]);

$ environment -> addExtension ( new ImageMediaQueriesExtension ());

หมายเหตุ: โปรดจำไว้ว่าองค์ประกอบ <picture> ไม่สามารถจัดสไตล์ได้เพราะมันไม่ได้แสดงผลในเบราว์เซอร์ คุณควรจัดสไตล์องค์ประกอบ <img> แทน ดูหน้า MDN สำหรับข้อมูลเพิ่มเติม

การบริจาค

ยินดีต้อนรับการมีส่วนร่วมทั้งหมด (คำขอดึงปัญหาและคำขอคุณลักษณะ) ยินดีต้อนรับ ตรวจสอบให้แน่ใจว่าได้อ่านผ่านการสนับสนุน MD ก่อน ดูหน้าผู้มีส่วนร่วมสำหรับผู้มีส่วนร่วมทั้งหมด