トピックオーナーの投稿に著者バッジを表示

開発
1

こんにちは、

ユーザーが OP の返信をすぐに把握できるようにする素晴らしい機能になると思います。OP の返信には「Author」バッジを表示するものです。

CSS で実装しましたが、これはコア機能やテーマコンポーネントとして提供されてもよいかもしれません。:slight_smile:

私は .topic-owner クラスをターゲットにしていますが、もっとエレガントな方法があるはずです。以下のように :arrow_down:

ありがとうございます！:slight_smile:

デスクトップ版では .names クラスをターゲットにしています。

.topic-owner article .row .topic-body .topic-meta-data .names::after {
    content: "Author";
    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: "Author";
    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: 私のサイトからトピックを一つ選んでいます。唯一の変更点は、「Author」ラベルがハンガリー語になっていることです。

「いいね！」 8
2

それはすごく素敵ですね。あなたのフォーラムは公開されていますか？投稿を編集して、そのトピックへのリンクを追加することはできますか？

「いいね！」 2
3

@pfaffman さん、こんにちは。リンクを追加しました。ありがとうございます :slight_smile:

「いいね！」 1
4

最初の投稿ではこれを省略したほうがいいかもしれません。それは常にトピック作成者から来るものだからです！

CSS 編集：

「いいね！」 3
5

Kane さん、ありがとうございます！とても良いご指摘ですね、参考にさせていただきます :heart::slightly_smiling_face:

6

ちょっとした更新です！:slight_smile:

デスクトップ :arrow_down:

// トピックのオーナー

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

モバイル :arrow_down:

// トピックのオーナー

.topic-post.topic-owner article:not(#post_1) .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;
  line-height: normal;
}
「いいね！」 4
7

新しいテーマコンポーネントのクロスリンク :partying_face:

「いいね！」 2