mkdocs glightbox

MkDocs GLightbox

ปลั๊กอิน MkDocs รองรับไลท์บ็อกซ์รูปภาพด้วย GLightbox

GLightbox เป็นไลบรารีไลท์บ็อกซ์ JavaScript ล้วนๆ พร้อมการรองรับมือถือ

การสาธิตสดพร้อม Material สำหรับ MkDocs

การพึ่งพาอาศัยกัน

1. ไฟล์จาวาสคริปต์ GLightbox และไฟล์ CSS
   1. GLightbox==3.2.0

การใช้งาน

1. ติดตั้งปลั๊กอินจาก PyPI

   pip install mkdocs-glightbox

2. เพิ่มปลั๊กอิน glightbox ในส่วนปลั๊กอิน mkdocs.yml ของคุณ:

    plugins :
      - glightbox

3. รูปภาพทั้งหมดจะถูกเพิ่มลงในเอฟเฟกต์ไลท์บ็อกซ์โดยอัตโนมัติ ยกเว้นรูปภาพในแท็กจุดยึดและรูปภาพอิโมจิจากส่วนขยาย pymdown

4. คุณสามารถปรับแต่งปลั๊กอินได้โดยส่งตัวเลือกใน mkdocs.yml:

    plugins :
      - glightbox :
          touchNavigation : true
          loop : false
          effect : zoom
          slide_effect : slide
          width : 100%
          height : auto
          zoomable : true
          draggable : true
          skip_classes :
            - custom-skip-class-name
          auto_caption : false
          caption_position : bottom
          background : white
          shadow : true
          manual : false

   ตัวเลือก	ค่าเริ่มต้น	คำอธิบาย
   สัมผัสการนำทาง	จริง	เปิดหรือปิดระบบนำทางแบบสัมผัส (ปัด)
   วนซ้ำ	เท็จ	ห่วงสไลด์ที่ส่วนท้าย
   ผล	ซูม	ชื่อของเอฟเฟกต์บนไลท์บ็อกซ์ที่เปิดอยู่ (ซูม จาง ไม่มีเลย)
   สไลด์_เอฟเฟกต์	สไลด์	ชื่อของเอฟเฟกต์บนสไลด์ไลท์บ็อกซ์ (เลื่อน ซูม จาง ไม่มีเลย)
   ความกว้าง	อัตโนมัติ	ความกว้างสำหรับองค์ประกอบอินไลน์และ iframe คุณสามารถใช้หน่วยใดก็ได้ เช่น 90% หรือ 100vw สำหรับความกว้างเต็ม
   ความสูง	อัตโนมัติ	ความสูงสำหรับองค์ประกอบอินไลน์และ iframe คุณสามารถใช้หน่วยใดก็ได้ เช่น 90%, 100vh หรืออัตโนมัติ
   ซูมได้	จริง	เปิดหรือปิดภาพที่ซูมได้
   ลากได้	จริง	เปิดหรือปิดใช้งานการลากเมาส์เพื่อเลื่อนไปก่อนหน้าและสไลด์ถัดไป
   ข้าม_คลาส	-	ปิดการใช้งานไลท์บ็อกซ์ของรูปภาพเหล่านั้นที่มีชื่อคลาสที่กำหนดเองโดยเฉพาะ
   auto_caption	เท็จ	เปิดหรือปิดใช้งานการใช้ Alt ของรูปภาพเป็นชื่อคำบรรยายโดยอัตโนมัติ
   คำบรรยายภาพ_ตำแหน่ง	ด้านล่าง	ตำแหน่งคำอธิบายภาพเริ่มต้น (ล่าง, บน, ซ้าย, ขวา)
   พื้นหลัง	สีขาว	CSS พื้นหลังของรูปภาพไลท์บ็อกซ์ พื้นหลังจะแสดงเมื่อภาพมีความโปร่งใส คุณสามารถใช้ค่า CSS ใดก็ได้สำหรับพื้นหลัง เช่น #74b9ff หรือ Gainsboro หรือ none เลย
   เงา	จริง	เปิดหรือปิดใช้เงาของภาพไลท์บ็อกซ์ ปิดใช้งานเมื่อ none พื้นหลังเพื่อป้องกันเงารอบๆ ภาพที่โปร่งใส
   คู่มือ	เท็จ	เมื่อเป็นจริง จะต้องเปิดใช้งานไลท์บ็อกซ์สำหรับแต่ละภาพด้วยตนเองโดยการเพิ่มคลาส on-glb หรือเพิ่ม glightbox: true meta บนเพจ

   ตรวจสอบข้อมูลตัวเลือกเพิ่มเติมเกี่ยวกับ GLightbox Docs

5. เพื่อความยืดหยุ่นที่มากขึ้น:

   1. ปิดใช้งานตามรูปภาพ: ปิดใช้งานไลท์บ็อกซ์สำหรับรูปภาพที่ต้องการ เหมาะสำหรับรูปภาพจำนวนไม่มากที่ไม่ต้องการเอฟเฟกต์ไลท์บ็อกซ์
   2. ปิดใช้งานตามเพจ: ปิดใช้งานไลท์บ็อกซ์สำหรับเพจเฉพาะ เหมาะสำหรับเพจจำนวนไม่มากที่ไม่ต้องการเอฟเฟกต์ไลท์บ็อกซ์
   3. เปิดใช้งานตามภาพ: ปิดการใช้งานไลท์บ็อกซ์สำหรับบางหน้า แต่เปิดใช้งานบางภาพในหน้าเหล่านั้น เหมาะสำหรับรูปภาพจำนวนหนึ่งที่ต้องการเอฟเฟกต์ไลท์บ็อกซ์
   4. ปิดใช้งานทั่วโลกแต่เปิดใช้งานตามรูปภาพหรือเพจ: ปิดใช้งานไลท์บ็อกซ์ทั่วโลก แต่เปิดใช้งานรูปภาพหรือหน้าเว็บเฉพาะ เหมาะสำหรับรูปภาพหรือเพจจำนวนมากที่ไม่ต้องการเอฟเฟกต์ไลท์บ็อกซ์

6. รองรับคำบรรยายภาพไลท์บ็อกซ์ ตรวจสอบรายละเอียดเพิ่มเติมเกี่ยวกับคำบรรยายภาพ

7. รองรับการจัดกลุ่มรูปภาพเป็นแกลเลอรี ตรวจสอบรายละเอียดเพิ่มเติมในแกลเลอรี

บันทึก

หากนี่เป็นครั้งแรกที่คุณใช้คุณสมบัติปลั๊กอิน MkDocs คุณควรทราบว่า MkDocs มีปลั๊กอินเริ่มต้นชื่อ search หากคุณต้องการเก็บคุณลักษณะการค้นหาไว้ คุณต้องเพิ่มปลั๊กอิน search กลับไปยังรายการ plugins

มันทำงานอย่างไร

1. คัดลอกไฟล์สคริปต์ GLightbox ลงในไดเรกทอรี site/assets/javascripts/ และไฟล์ CSS ลงในไดเรกทอรี site/assets/stylesheets/
2. นำเข้าสคริปต์ GLightbox และไฟล์ CSS และเพิ่มโค้ดจาวาสคริปต์ในแต่ละหน้า ยกเว้นหน้าที่ปิดใช้งาน
3. ค้นหาแท็กรูปภาพทั้งหมดและบิดเบี้ยวด้วยแท็กจุดยึดสำหรับรูปภาพที่ไม่รวม GLightbox ด้วยคลาสข้ามหรือบิดเบี้ยวด้วยแท็กจุดยึดแล้ว

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT - ดูรายละเอียดในไฟล์ LICENSE.md