Вставить текст под именем пользователя?

Разработка
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