أقوم بإجراء تعديلات بسيطة اعتيادية على عدة أنماط في مكون سمة رئيسي واحد لموقعنا. وهذا يعني أننا لا نحتاج إلى إنشاء نسخة مطابقة أو تعديل الأنماط البعيدة دون القلق من أن تُحذف تعديلاتنا في التحديث التالي. حتى الآن، كانت تعديلاتي شاملة، مثل تغيير زر الإعجاب وما إلى ذلك.
أود معرفة ما إذا كان من الممكن استهداف نمط واحد محدد من مكون السمة دون التأثير على الأنماط الأخرى؟ ربما عبر بعض متغيرات البيانات؟
لا أريد الاضطرار إلى إنشاء مكون سمة منفصل لمثل هذا التعديل البسيط. أعجبني فكرة وجود مكون سمة واحد لتعديلاتي الشاملة.
نعم، يمكنك عادةً الاعتماد على الأولوية داخل CSS. إذا لم تكن معتادًا على CSS، فإن الأمر يختزل إلى: إذا كان لديك مجموعة من الأنماط تستهدف نفس العنصر، فإن النمط الأكثر تحديدًا هو الذي سيفوز.
لذلك، ما ستحتاج إلى البحث عنه هو ما إذا كان العنصر (أو عنصر أب) في المكون الذي تحاول تغييره يحتوي على فئة فريدة في مكان ما… شيء مثل:
من المثال أعلاه، إما .custom-link، أو إذا لم تكن هناك فئة مباشرة على العنصر، يمكنك استخدام العنصر الأب مثل .custom-container a. إذا كان المكون يحتوي على النمط المحدد أصلاً كـ .custom-link، فيمكنك ضمان تجاوزه من خلال استهداف a.custom-link بشكل أكثر تحديدًا.
إذا لم تكن هناك فئة فريدة في أي مكان في المكون، فيجب أن تكون قادرًا أيضًا على استخدام حاوية منفذ الإضافة. عند استخدام منفذ الإضافة في التخصيص، يتم إضافة فئة مخصصة إلى الحاوية. باستخدام مثال تنسيق رابط مرة أخرى، قد يبدو ذلك شيئًا مثل .above-site-header-outlet.brand-header a حيث “brand-header” هو اسم القالب المضاف من المكون.
في أسوأ الحالات، يمكنك أيضًا طلب من الشخص الذي أنشأ المكون إضافة فئة إذا لم تتمكن من العثور على طريقة سهلة لتنسيق ما تحتاجه.
إذا كان هذا صعب المتابعة، فإن تقديم مثال محدد من المكون الذي تحاول تنسيقه سيساعد.
كمثال، لدي حالات مثبتة من “Graceful”. Graceful Theme والذي أدركت الآن أنك نشرته كاستمرار لنمط سابق.
في مكون الثيم الشامل الخاص بي، قمت بأشياء مثل رفع أصول الخلفية، وتغيير زر الإعجاب، وبعض الأشياء الأخرى، لكنني أدركت أنني أرغب في تغيير لون الخلفية في النسخة التي تستخدم لوحة الألوان الداكنة إلى ما أريد دون التأثير على النسخة التي تستخدم لوحة الألوان الفاتحة.
لتكون دقيقًا: هذا:
background-color: $primary-very-low;
الآن، أريد القيام بأكبر قدر ممكن في مكون ثيم واحد لأنه تقنيًا نفس النمط، حتى بدأت هذه الأمور الصغيرة مثل هذه تظهر، وهي ليست تغييرات شاملة. لا أريد الاضطرار إلى إنشاء مكون “داكن” ومكون “فاتح” إذا أمكن.
الهدف هنا هو ترك “Graceful” كما هو باستثناء تعديلات لوحة الألوان، والقيام بكل شيء من مكوننا الخاص، بحيث عندما يقوم أنت أو شخص آخر بدفع تحديث لهم، لا نضطر إلى إعادة تطبيق تعديلاتنا باستمرار.
لاحظت أن Discourse تعتمد بشكل كبير على المتغيرات وهو ما أحببته، وكان قراءة أدلة التنسيقات متعة. لاحظت أشياء مثل [data-topic-id="117"] موجودة، لذا ربما يمكن اقتراح شيء مثل [data-theme-id]؟
@awesomerobot أيضًا، فقط لإزالة أي لبس، لا زلت معتادًا على تسمية القوالب الكاملة بـ “أنماط” لأننا لا نزال في عملية استيراد لوحتنا الكبيرة من لوحة أخرى، ولكن في إشارة إلى النمط، كنت أعني القالب، آسف!