ユーザー名の下にテキストを挿入しますか？

開発
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.