mkdocs glightbox

مكدوكس جلايتبوكس

يدعم البرنامج المساعد MkDocs العرض المبسط للصور مع GLightbox.

GLightbox عبارة عن مكتبة Lightbox خالصة لجافا سكريبت مع دعم للهواتف المحمولة.

عرض توضيحي مباشر باستخدام مادة MkDocs.

التبعية

1. ملف جافا سكريبت GLightbox وملف CSS
   1. جلايتبوكس==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

   خيار	تقصير	وصف
   touchNavigation	حقيقي	تمكين أو تعطيل التنقل باللمس (التمرير).
   حلقة	خطأ شنيع	حلقة الشرائح في النهاية.
   تأثير	تكبير	اسم التأثير على Lightbox مفتوح. (التكبير، التلاشي، لا شيء)
   Slide_effect	شريحة	اسم التأثير على شريحة العرض المبسط. (الشريحة، التكبير/التصغير، التلاشي، لا شيء)
   عرض	آلي	عرض العناصر المضمنة وإطارات iframe. يمكنك استخدام أي وحدة على سبيل المثال 90% أو 100 فولت واط للعرض الكامل.
   ارتفاع	آلي	ارتفاع العناصر المضمنة وإطارات iframe. يمكنك استخدام أي وحدة، على سبيل المثال 90%، 100vh أو تلقائي.
   قابل للتكبير	حقيقي	تمكين أو تعطيل الصور القابلة للتكبير.
   قابلة للسحب	حقيقي	تمكين أو تعطيل السحب بالماوس للانتقال إلى الشريحة السابقة والتالية.
   Skip_classes	[ ]	قم بتعطيل العرض المبسط لتلك الصورة باسم فئة مخصصة محددة.
   auto_caption	خطأ شنيع	تمكين أو تعطيل استخدام الصورة بالكامل كعنوان للتسمية التوضيحية تلقائيًا.
   caption_position	قاع	موضع التسميات التوضيحية الافتراضي. (أسفل، أعلى، يسار، يمين)
   خلفية	أبيض	خلفية 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 للحصول على التفاصيل.