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

مطور
1

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

usernamebelow
usernamebelow453×121 23.6 KB

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

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

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

إعجاب واحد (1)
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 إعجابات
3

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

4

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

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

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

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

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

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

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

إعجابَين (2)
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

إعجابَين (2)
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.