إدراج النص أدناه اسم المستخدم؟

مطور
1

هل هناك أي طريقة لإدراج سطر نص أسفل أسماء المستخدمين؟ مثاليًا، أود أن يظهر هذا تحت اسم كل مستخدم.

usernamebelow
usernamebelow453×121 23.6 KB

ورقة الأنماط المتتالية (CSS) التي استخدمتها لتحقيق ذلك هي:

.username::after {
    content: 'website.com';
    font-size: 14px;
}

لكن من الواضح أنني أرغب في أن يظهر هذا أسفل. شكرًا!

2

هل سينجح هذا معك؟

image
image1536×266 36.8 KB

.topic-meta-data .names {
  flex-wrap: wrap;
}

.names::after {
  display: block;
  content: "hello world";
  font-size: 14px;
  width: 100%;
  flex: 1 0 100%;
  order: 4;
}

تعديل: تمت إضافة خاصية order للجوال

3

شكراً لك! إنه يعمل بشكل مثالي على سطح المكتب، ولكن لسبب ما يظهر فوق اسم المستخدم على الهاتف المحمول.

4

أوه. مثير للاهتمام. لديهم خاصية order إضافية على الهاتف المحمول.

يمكنك إضافة order: 4 إلى العنصر الزائف after وسيؤدي ذلك إلى إصلاحه.

5

يمكنك تحقيق ذلك باستخدام عناوين المجموعات الافتراضية.

يمكن للمجموعات أن تحتوي على عناوين افتراضية تظهر بجوار اسم المستخدم.

بهذه الطريقة، يمكنك الحصول على عنوان مختلف لكل مجموعة.

يمكنك تنسيق هذه العناوين باستخدام CSS لتبدو أسفل اسم المستخدم إذا اخترت ذلك.

6

يعمل بشكل مثالي، شكرًا لك!

7

يمكنك أيضًا استخدام واجهة برمجة التطبيقات (API) إذا كنت بحاجة إلى تعديل المحتوى برمجيًا (للتحقق من المستخدم، أو المنشور، وما إلى ذلك).

على سبيل المثال:

api.decorateWidget("poster-name:after", (dec) => {
    // "dec.attrs" للوصول إلى سمات المنشور
    return dec.h("div", "meta.discourse.org");
  });

.topic-meta-data .trigger-user-card {
    flex-direction: column;
    align-items: flex-start;
}

image