تغيير طريقة فصل قوائم العلامات

قوائم العلامات حول المواضيع في Discourse مفصولة بفواصل بشكل افتراضي. هذا لا يتغير، ولكن كيفية تنفيذه وكيفية تغييره قد تغيرت:

في السابق، استخدمنا عنصرًا زائفًا من CSS pseudo element لإضافة الفواصل، وهو ليس مثاليًا لأن المحتوى ليس متاحًا تقنيًا كجزء من المستند - لا يمكن لقارئات الشاشة الوصول إليه، ولا يمكن تحديده، ولا يمكن لمحركات الزحف على الويب رؤيتها…

هذا التغيير الذي تم دمجه اليوم ينقل فواصل العلامات إلى HTML مناسب: FEATURE: customizable tag separator with value transformer in proper HTML by awesomerobot · Pull Request #31674 · discourse/discourse · GitHub

بالنسبة لمعظم المواقع، لن يغير هذا أي شيء واضح، ولكن إذا قمت سابقًا بإزالة فاصل العلامات أو تغييره، فستحتاج إلى استخدام محول قيم بدلاً من CSS.

هذه عملية بسيطة جدًا باستخدام JS، على سبيل المثال إذا كنت تريد إزالة الفاصلة تمامًا:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.registerValueTransformer("tag-separator", () => "");
});

أو إذا كنت تريد استخدام فاصل عمودي |

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.registerValueTransformer("tag-separator", () => "|");
});

بالاقتران مع القليل من CSS:

.discourse-tags__tag-separator {
  margin-inline: 0.25em;
}

أخبرنا إذا واجهت أي مشاكل مع هذا التغيير!

8 إعجابات

نرى فاصلتين متكررتين:

ربما تأتي إحداهما من كود HTML الجديد والأخرى من CSS الخاص بالمظهر المخصص (الكود القديم).

الأول (HTML) قابل للتحديد بالفعل، بينما الثاني (CSS) غير قابل للتحديد.

بعد هذا التغيير، يجب إصلاح جميع المظاهر المخصصة، على ما يبدو؟

إعجابَين (2)

مما أراه في منتداك، يتعلق الأمر بـ Multilingual Plugin 🌐 .

لا يزال يستخدم الطريقة القديمة مع عناصر CSS الزائفة.
يمكن إزالة هذا الـ CSS.

إعجابَين (2)

واو! شكراً على تشخيصك السريع!

إعجاب واحد (1)

{“translation”: “مرحبًا Arcshine،\n\nأود أن أجرّب تثبيت الإضافة متعددة اللغات وعندما حاولت استخدامها ظهرت علامات الاقتباس المزدوجة. عندما أحاول تعطيل الإضافة، تتحول لغتي إلى الإنجليزية (وبذلك تختفي علامات الاقتباس المزدوجة). وعند تفعيلها مرة أخرى، تعود إلى لغتي.\n\nهل تعتقد أنه يجب أن أزيل الإضافة إذا لم أكن بحاجة إليها حالياً، وإذا كان الأمر كذلك، لماذا تبدو اللغة الآن باللغة الإنجليزية؟ الحقل ‘اللغة الافتراضية’ يكون فارغًا عند تعطيل إضافة اللغات المتعددة.\n\nإذا لم تؤثر الإضافة على الموقع بأي شكل، ربما يمكنني الاحتفاظ بها ومحاولة إصلاح مشكلة علامات الاقتباس المزدوجة.\n\nتحياتي، أولي\n\nتعديل: لقد أصلحت المشكلة عن طريق إزالة الإضافة”}

يبدو أن الفاصل مخفي افتراضيًا عندما يكون نمط العلامة هو “box” أو “bullet”:

.discourse-tags .box + .discourse-tags__tag-separator, 
.discourse-tags .bullet + .discourse-tags__tag-separator {
  display: none;

ومع ذلك، يتم تجاوز هذا في قائمة الجوال بإعلان أكثر تحديدًا. لذلك، يظهر الفاصل على الجوال:

إعجابَين (2)