投稿の告知表示制御

テーマコンポーネント
,
1
:information_source: 概要 通知の種類と経過日数ごとに、投稿通知の表示とスタイルをカスタマイズします
:hammer_and_wrench: リポジトリ GitHub - moin-Jana/post-notice-visibility-control: Customize visibility and style of post notices by type and age
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者の方へ Discourseテーマ利用入門

このテーマコンポーネントをインストール

このコンポーネントを使用すると、各投稿通知（新規ユーザー、復帰ユーザー、公式）が新しい投稿と古い投稿でどのように表示されるかを制御できます。ハイライト表示、表示、非表示を選択でき、それぞれにカスタムハイライトカラーを設定できます。

スクリーンショットは、新しい投稿（左）と古い投稿（右）で、さまざまなタイプがどのように表示されるかの例を示しています。

左側には、赤色の背景を持つ公式通知、緑色の背景を持つ新規ユーザー通知、灰色の背景を持つ復帰ユーザー通知が表示されています。右側では、公式通知は引き続き赤色の背景を持ち、新規ユーザー通知には背景がなく、復帰ユーザー通知は表示されません
左側には、赤色の背景を持つ公式通知、緑色の背景を持つ新規ユーザー通知、灰色の背景を持つ復帰ユーザー通知が表示されています。右側では、公式通知は引き続き赤色の背景を持ち、新規ユーザー通知には背景がなく、復帰ユーザー通知は表示されません1372×746 39.7 KB

設定例1 
"custom_new": "highlighted"
"custom_old": "highlighted"
"custom_highlight_color": "var(--danger-low-mid)"

"new_user_new": "highlighted"
"new_user_old": "visible"
"new_user_highlight_color": "var(--success-low)"

"returning_user_new": "highlighted"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--primary-200)"

左側には、金色の背景を持つ公式通知、背景のない新規ユーザー通知、背景のない復帰ユーザー通知が表示されています。右側では、公式通知には背景がなく、新規ユーザー通知と復帰ユーザー通知は表示されません
左側には、金色の背景を持つ公式通知、背景のない新規ユーザー通知、背景のない復帰ユーザー通知が表示されています。右側では、公式通知には背景がなく、新規ユーザー通知と復帰ユーザー通知は表示されません1372×746 42 KB

設定例2 
"custom_new": "highlighted"
"custom_old": "visible"
"custom_highlight_color": "var(--gold)"

"new_user_new": "visible"
"new_user_old": "hidden"
"new_user_highlight_color": "var(--tertiary-low)"

"returning_user_new": "visible"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--tertiary-low)"

各通知タイプと経過日数（新しい/古い）の組み合わせごとに、通知をハイライト表示、表示（ハイライトなし）、または非表示のいずれかにするかを選択できます。「ハイライト表示」を選択した場合、カスタム背景色をオプションで定義できます。

var(--quaternary-low) のようなカラー変数を使用することをお勧めします。これらの変数はアクティブなカラーパレットのカラーを参照するため、ユーザーが異なるパレット（例：ダークモードとライトモード）を切り替えても自動的に適応します。これにより、ハードコーディングされたカラーよりも柔軟なオプションになります。ほとんどのカラーパレットには数個の基本カラーしか表示されませんが、Discourse はこれらのカラーのシェードも生成するため、それらを使用することもできます。styleguide enabled サイト設定で有効にできる スタイルガイド を使用すると、利用可能な多くのカラー変数を探索できます。または、ブラウザでサイトを検査することもできます。開発者ツールを開き、Styles タブに移動して、一番下までスクロールすると、利用可能なすべてのカラー変数が表示されます。

#EE8888 のような16進数値、rgb(255, 200, 200) のようなRGB値、または red のような名前付きカラーを使用することもできます。

カラーが指定されていない場合、コンポーネントは var(--tertiary-low) をデフォルトとして使用します。コンポーネントのデフォルト設定は、標準の Discourse の動作を再現しているため、設定するまで有効にしても何も変更されません。

投稿通知が「古い」と見なされるまでの日数（日単位）は、old post notice days サイト設定で定義されます。これは、3つの通知タイプすべてに適用されます。
:warning: 重要: 年齢は、通知が追加されたときではなく、投稿が作成されたときのものです。
一時的に値を 0 に設定すると、「古い」状態の通知がどのように表示されるかを簡単にプレビューできます。

「いいね！」 12
2

Discourse の最新バージョンでは、古い投稿通知はレンダリングされなくなったため、CSS でスタイルを設定できなくなりました。その結果、すべての _old 設定は効果がなくなりました。

3

Discourse の最新アップデートにより、コンポーネントが新しい通知と古い通知に異なるスタイルを適用するために使用していた old クラスが削除されました。新しいユーザーと復帰ユーザー向けの投稿通知は、old post notice days 設定後に自動的に削除されるようになりました。一方、公式通知は永続的に表示され、ハイライトされます。

その結果、このコンポーネントはほとんど廃止されました。残されたカスタマイズ オプションは、投稿通知の一般的な色設定に関連するものです。これらは、以下に示すように CSS を介して簡単に調整できます。

.post-notice.custom {
    background-color: var(--danger-low-mid);
}
.post-notice.new-user {
    background-color: var(--success-low);
}
.post-notice.returning-user {
    background-color: var(--primary-200);
}

特定の通知タイプの背景ハイライトを削除したい場合は、background-color: unset; を使用するだけです。

「いいね！」 2