토픽 소유자의 게시글에 표시되는 저자 배지

개발
1

안녕하세요,

거의 모든 큰 주제에서… OP(질문자)가 답글을 남기면 사용자가 알 수 있도록… OP의 답글에 저자 배지를 표시하는 기능이 정말 유용할 것 같습니다…

CSS로 구현해 보았는데, 이건 코어 기능이나 테마 컴포넌트로 추가될 수도 있을 것 같습니다. :slight_smile:

.topic-owner 클래스를 대상으로 하고 있지만, 더 우아한 방법이 있을 것 같습니다. 아래처럼요 :arrow_down:

감사합니다! :slight_smile:

데스크톱에서는 .names 클래스를 대상으로 합니다

.topic-owner article .row .topic-body .topic-meta-data .names::after {
    content: "저자";
    color: var(--secondary);
    background: var(--secondary-medium);
    padding: 0px 8px;
    border-radius: 8px;
}
// 임베드된 게시물에서 숨기기
.topic-owner article .row .embedded-posts .topic-body .topic-meta-data .names::after {
    content: "";
}

이렇게 보입니다 :arrow_down:

Screen Shot 2020-12-02 at 10.07.49 AM

모바일에서는 .first 클래스를 대상으로 합니다

.topic-owner article .row .topic-body .topic-meta-data .names .first::after {
    content: "저자";
    color: var(--secondary);
    background: var(--secondary-medium);
    margin-left: 4px;
    padding: 0px 8px;
    border-radius: 6px;
}

이렇게 보입니다 :arrow_down:
Screen Shot 2020-12-02 at 10.14.00 AM

실제로 보고 싶으시다면 :arrow_down: 제 사이트에서 주제를 하나 골랐습니다. 유일한 차이점은 저자 라벨이 헝가리어라는 점입니다.

2

정말 멋지네요. 포럼이 공개되어 있나요? 게시물을 편집해서 해당 주제에 대한 링크를 추가할 수 있을까요?

3

안녕하세요 @pfaffman,
링크를 추가했습니다. 감사합니다 :slight_smile:

4

첫 번째 게시글에서는 이 부분을 생략하는 것이 좋을 수 있습니다. 해당 정보는 항상 토픽 생성자에게서 나오기 때문입니다!

CSS 수정:

5

감사해요, 케인! 좋은 지적이네요. 이거 활용할게요 :heart::slightly_smiling_face:

6

소소한 업데이트! :slight_smile:

데스크톱 :arrow_down:

// Topic Owner

.topic-post.topic-owner article:not(#post_1) .row .topic-body .topic-meta-data .names::after {
  content: "Author";
  color: var(--secondary);
  font-weight: bold;
  background: var(--secondary-medium);
  padding: 0px 8px;
  border-radius: 8px;
  line-height: normal;
}

모바일 :arrow_down:

// Topic Owner

.topic-post.topic-owner article:not(#post_1) .row .topic-body .topic-meta-data .names .first:after {
  content: 'Author';
  color: var(--secondary);
  background: var(--secondary-medium);
  margin-left: 4px;
  padding: 0px 8px;
  border-radius: 6px;
  line-height: normal;
}
7

새 테마 컴포넌트와 교차 링크 :partying_face: