사용자 이름 아래에 텍스트를 삽입할 수 있나요?

개발
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 속성이 있군요.

after 의사 요소에 order: 4를 추가하면 해결될 것입니다.

5

그룹 기본 타이틀(Group Default Titles)을 사용하면 이를 구현할 수 있습니다.

그룹에는 사용자 이름 옆에 표시되는 기본 타이틀을 설정할 수 있습니다.

이렇게 하면 각 그룹별로 서로 다른 타이틀을 사용할 수 있습니다.

원하는 경우 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