الصور

إذا كانت الصورة أعرض من عمود المحتوى الرئيسي، كما يحدث غالبًا على الشاشات الأصغر حجمًا، تحدّ من DevSite عرضها تلقائيًا إلى عرض العمود. ومع ذلك، إذا كانت الصورة تحتوي على السمتَين width وheight، يتم تغيير حجم العرض فقط، ما يؤدي إلى تشويه الصورة. نتيجةً لذلك، لا تضبط height للصورة. وهذا يعني أنّه قد تتم إعادة رسم الصفحة إذا كان تحميل الصورة بطيئًا (ما يؤدي إلى حدوث قفزة)، ولكن هذا أفضل من صورة لا تلائم الشاشة.

يمكنك تطبيق class="screenshot" على صورة لمنحها حدودًا تفصلها عن النص المجاور. ويُستخدَم هذا الإجراء عادةً مع لقطات الشاشة التي تحتوي على خلفية بيضاء وإلا ستضيع في الصفحة. لا تستخدِم هذه الميزة للصور التي لا تحتاج إليها.

تطفو بجانب النص

تحتوي الصورة على اليمين أيضًا على class="attempt-right"، ما يؤدي إلى عرض الصورة على اليمين على الشاشات الكبيرة، ولكنّه يفرض عرض الصورة في الوضع العمودي على الشاشات الأصغر حجمًا والأجهزة اللوحية والأجهزة الأصغر حجمًا، حيث قد يؤدي عرض الصورة على اليمين إلى حدوث مشاكل. يمكنك أيضًا استخدام class="attempt-left". لاستخدام attempt-left وattempt-right معًا، تأكَّد من أنّ عنصر attempt-left يأتي أولاً.

عندما تكون الصور متحركة، يجب ألا تتجاوز% 50 من عرض العمود. وفي حال حدوث ذلك، تتم إعادة قياسها.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

يمكنك استخدام الفئات نفسها لتطفية عناصر أخرى، مثل <figure> يحتوي على صورة وتعليق توضيحي:

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

محو النص العائم

لمنع النص من الالتفاف حول عنصر مُعلوَن عرضه الأصلي، يمكنك إضافة فئة clear إلى العناصر المتأثرة التي تتبع العنصر المُعلوَن.

<p class="clear">Hello world.</p>

مثال على فئة clear

في هذا المثال، تتضمّن الفقرة الثانية فئة clear.

تلتف هذه الفقرة حول الصورة العائمة . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

تحتوي هذه الفقرة على فئة واضحة ولا تلتف حول الصورة العائمة. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

مثال بدون فئة واضحة

في هذا المثال، يتمّ التفاف كلا الفقرتَين حول الصورة المُعلّقة.

تلتف هذه الفقرة حول الصورة العائمة. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

تلتف هذه الفقرة حول الصورة العائمة. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

صور المظهر الداكن

يوفّر DevSite مجموعة صغيرة من أسماء الفئات التي يمكن تطبيقها على الصور لتعديل مظهرها عند تفعيل المظهر الداكن.

تعتيم الصورة

يتم تلقائيًا تعتيم جميع الصور قليلاً في المظهر الداكن باستثناء ملفات SVG.

لإزالة التأثير الداكن التلقائي من صورة عند تفعيل المظهر الداكن، أضِف فئة no-filter إلى الصورة:

<img src="/path/to/image.jpg" class="no-filter" alt="">

قلب صورة

بالنسبة إلى الصور التي تحتوي على لوحة ألوان أحادية اللون سوداء أو داكنة، أضِف فئة invert إلى الصورة لعرضها باللون الأبيض/الفاتح في المظهر الداكن:

<img src="/site-assets/logo-github.png" class="invert" alt="">

بالنسبة إلى صفحة _index.yaml، أضِف invert إلى حقل classname لعنصر صف:

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

صورة منفصلة لخيار المظهر الداكن

إذا كنت تريد تقديم صورة منفصلة لا تظهر إلا عند تفعيل المظهر الداكن، عليك تضمين عنصر <img> الحالي في عنصر <picture> وإضافة عنصر <source> لخيار المظهر الداكن.

في المثال أدناه، هناك ملفان SVG لشعار Google النصي ضمن عنصر <picture>. عند إيقاف المظهر الداكن، يتم عرض ملف الصورة ضمن عنصر <img>، ما يعرض الشعار النصي بألوان علامة Google التجارية الأربعة. عند تفعيل المظهر الداكن، يتم عرض ملف الصورة داخل عنصر <source>، حيث يكون الشعار النصي أبيض بالكامل ولا يتضمّن ألوان العلامة التجارية.

مثال

الرمز

<picture>
  <source
    srcset="/devsite/images/google-dark-theme.svg"
    media="(prefers-color-scheme: dark)"
    class="devsite-dark-theme"
    alt="">
  <img src="/devsite/images/google.svg" alt="">
</picture>

ملاحظات

بما أنّ المظهر الداكن مفعَّل من خلال علامة ميزة، يُرجى ملاحظة ما يلي بشأن سمات العنصر <source>:

يجب أن يتضمّن عنصر <source> فئة devsite-dark-theme، ما يقدّم ربطًا لواجهة DevSite الأمامية لتعديل سمة الوسائط وقيمتها استنادًا إلى خيار المظهر الداكن الذي يختاره المستخدم: light أو dark أو device. يجب أن تتضمّن سمة الوسائط طلب بحث (prefers-color-scheme: dark) في قيمتها. إذا كانت لديك عناصر <source> تتضمّن طلبات بحث media في سمة الوسائط، يمكنك إما إلحاق طلبات البحث الحالية للوسائط بـ (prefers-color-scheme: dark) أو إضافة عنصر <source> جديد تكون قيمة سمة الوسائط فيه (prefers-color-scheme: dark). ستتم إزالة طلب البحث media وقيمته أو استبدالهما استنادًا إلى خيار المظهر الداكن الذي يختارّه المستخدم. على الرغم من أنّ اسم ملف صورة الصيغة المخصّصة للمظهر الداكن في السمة srcset يمكن أن يكون أيّ اسم من الناحية الفنية، إلا أنّه يُنصح بإلحاق -dark-theme باسم ملف الصورة الحالية.