أنا جديد جدًا في CSS وما شابه، لذا أعتذر إذا كان ما يلي بدائيًا بشكل لا يصدق أو مطولًا.
سؤالي هو: كيف يمكن تحديد وإزالة عناصر “ember” عبر CSS؟ أفترض أن ذلك يتم عبر إضافة “display:none”.
كمثال عشوائي، لنفترض أنني أردت إزالة زر الإشارات المرجعية الموجود في أسفل المواضيع. عند البحث عن العنصر في وحدة تحكم Chrome، يمكنني رؤية CSS الخاص بجميع أزرار تذييل المواضيع بشكل عام، لكن ليس الزر المحدد، لذا لو أضفت “display:none”، فسيتم تطبيقه على جميع الأزرار بدلاً من الزر الواحد فقط.
أنا متأكد تقريبًا من أنه من الممكن إزالة عنصر واحد فقط، وأن هذا سينطبق على عناصر ember الأخرى، والتي تكون معظمها مجمعة بشكل مشابه، حيث تمكنت سابقًا من حذف عناصر ember أخرى (خاصة زر التبرير في شريط المهام للمؤلف) وإن كان ذلك بمساعدة مستخدمين آخرين في هذا المنتدى.
ومع ذلك، كيف يمكن تحديد وسم CSS المحدد الذي يمكن إضافة “display:none” إليه؟
مرة أخرى، أعتذر إذا كان هذا بدائيًا بشكل مفرط أو مطولًا.
عذراً إذا قدمت مثالاً سيئاً، حيث لم أكن أعرف أن هناك خياراً خارج CSS. لقد اخترت عنصراً عشوائياً من Ember.
أعتقد أن مثالاً أفضل سيكون في صفحة المستخدم. الحقيقة هي أنني أبحث عن كيفية تحديد ما يمكن وضعه في CSS (مشابهًا للمناقشة المذكورة في موضوع “MD Composer Extras” الذي أشرت إليه أعلاه)، بحيث يمكنك نظرياً إيقاف عنصر Ember عن الظهور.
مثال أفضل سيكون الشريط الجانبي في قسم النشاط ضمن الملف الشخصي. насколько أعرف، لا يوجد خيار محدد لهذا في الإعدادات، بل يتطلب استخدام CSS.
ما تبحث عنه يُعرف بـ “محدد CSS” (أو ببساطة “المحدد” للاختصار). تُستخدم محددات CSS لـ “البحث” (أو تحديد، بطبيعة الحال) عنصر DOM الذي ترغب في تنسيقه.
على سبيل المثال، من المكان الذي أكتب منه الآن، سأبحث عن المحدد الخاص باسم مستخدمك في محرر الرسائل (كمثال فقط).
ما نفعله هو وضع الماوس فوق العنصر (اسم المستخدم b481 الخاص بك في المحرر)، ثم نضغط بزر الماوس الأيمن لتظهر قائمة منبثقة تحتوي على عنصر القائمة “فحص” (Inspect).
إذا اخترت ذلك ونسخت المحدد، فستحصل في هذا المثال على:
#ember433 > span > a
هذا ليس محددًا جيدًا حقًا لأن #ember433 يتم تعيينه بواسطة Ember، ولكن يمكنك تحريك الماوس فوق العناصر في وحدة التحكم، وسيتم تمييزها في كل من الصفحة المستهدفة ووحدة التحكم. الخبر السار هو أننا اقتربنا من الهدف بسرعة وسهولة.
يمكنك بعد ذلك العثور على العنصر الذي ترغب في إخفائه، وفي هذا المثال، يمكنك النقر بزر الماوس الأيمن مرة أخرى على العنصر (هذا المثال) واختبار ذلك عن طريق اختيار “إضافة سمة” (add attribute) من القائمة أسفل الماوس لاختبار محددنا.
فيمكننا إضافته إلى موضوعنا (theme) وسيتم إخفاء ذلك العنصر.
في هذه الحالة، يجب عليك التحقق مما إذا كان هناك أكثر من عنصر واحد في الصفحة يحمل نفس المحدد، كما يجب أن تتأكد من أن المحدد الذي اخترته لن يكون جشعًا في تحديد عناصر في صفحات أخرى قد لا ترغب في إخفائها.
كلما كان المحدد أكثر تحديدًا، كان ذلك أفضل.
على سبيل المثال، في هذه الحالة، يمكننا جعله أكثر تحديدًا عن طريق تحديد أن محددنا هو عنصر تابع لعنصر أب، في هذه الحالة (لم يتم اختباره):
يمكنك أن ترى أننا أصبحنا أكثر تحديدًا؛ وفي هذه المرحلة، يجب أن تكون لديك فكرة جيدة عن كيفية البحث عن العناصر التي ترغب في تعديلها.
استمتع بالبحث!
ملاحظة أخيرة:
يمكنك استخدام JavaScript وjQuery لتحديد العناصر، لكنني وجدت أنه في تطبيقات الصفحة الواحدة (SPA) مثل Discourse/Ember، تعمل محددات CSS بشكل جيد، على الأقل بالنسبة لي. أميل إلى استخدام محددات JavaScript فقط عندما أحتاج إلى التنقل في DOM بطريقة “معقدة” (وهو ما يمكن أن يكون ممتعًا أيضًا).
نعم، لقد ذكرت ذلك بالفعل @b481، ألا تختار محددًا (selector) يعتمد على الفئات والمعرفات التي تُعيّنها Ember.
يجب أن تستخدم محددًا ليس فئة أو معرفًا تُعيّنه Ember. لقد شرحت لك كيفية القيام بذلك في ردي السابق.
ملاحظة جانبية: علماً بأنك في هذا الأسلوب (كما ذكرت أعلاه) لا تقوم بـ “حذف” هذه العناصر من DOM، بل تقوم فقط بـ “إخفائها”، لكن هذا موضوع نناقشه في وقت آخر
يرجى استخدام محدد لا يتم تعيينه تلقائيًا بواسطة Ember.
أتمنى أن يكون هذا مفيدًا.
ملاحظة:
إذا كنت تحاول إخفاء (في مثالك) زر الإشارات المرجعية في أسفل الموضوع، هل جربت:
#topic-footer-button-bookmark
{
display:none;
}
آسف، لكن بناءً على منشوراتك، لا أعرف بالضبط أي عنصر في DOM (في المثال أو الفعلي) ترغب في إخفائه.
هل يعلم أحد كيفية حذف خيار “اقتباس المنشور بالكامل” فقط دون حذف الخيار الموجود على اليسار؟ كلاهما يشارك نفس CSS ونفس div الأب، لذا لم أجد طريقة للتخلص من أحدهما دون الآخر.
