カテゴリのユニークな配色

開発
1

こんにちは。

古いフォーラムを Discourse に移行しており、元のサイトにはカテゴリごとに独自のテーマ（ヘッダーロゴを含む）がありました。

現在の解決策は、次のようなテーマコンポーネントです。

CSS:

body.category-target-category{
///#hexcodes をお好みのカラー値に置き換えてください
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///必要に応じて、すべてのカラー値について続行してください
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() =>{
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

現在、color_definitions.scss で言及されているすべての可能なカラー値をリストアップしてオーバーライドする必要があります。このファイルの値を生成すると思われるのは foundation/color_transformations.scss で、これは foundation/colors.scss に見られる値から生成されます。管理メニューまたはテーマコンポーネントの about.json を介して、ルートカラーテーマの値をオーバーライドできることは知っていますが、これらの変更はサイト全体で行われると考えています。

color_definitions.scss の 100 以上の変数をすべてリストアップする以外に、特定のカテゴリをカスタマイズするより効率的な方法はありますか？たとえば、foundation/colors.scss ファイルをテーマコンポーネントで変更できますか？

ご協力ありがとうございます！

「いいね！」 1
2

Hi @Rhababo :wave: Metaへようこそ :slight_smile:

Discourseのテーマや開発に携わったことがない場合は、まずはこちらのリソースから始めることをお勧めします。

また、例えば、CSSコードを使用して、特定のカテゴリのロゴやヘッダーの色、さらにはアイコンの色を変更することもできます。以下はその例です。

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

新しいテーマを作成するだけで、コードを追加してロゴをアセットとしてアップロードできます。<category-slug> は、ブラウザのURLフィールドに表示される小文字のカテゴリ名です（親カテゴリとサブカテゴリは「-」で区切ります。例：「parentcategory-subcategory」）。

また、以下のような様々な Theme component も検索できます。

「いいね！」 3
3

リリー、ご協力とリソースをありがとうございました！

ロゴのCSSの指示は本当に感謝しています。私のぎこちないスクリプトよりもはるかに洗練されています。

あなたの解決策は私のユースケースに間違いなく役立つでしょう。ただし、すべての要素を選択して直接色をコーディングするのは面倒に思えました。Discourseがcolors.scssにある約12個の基本色からカラーパレットを生成するために使用するメカニズムを活用する方法があるかどうか疑問に思っています。そうするには、テーマコンポーネントではなくプラグインが必要になるかもしれませんが、それは別の日までの課題です。

ありがとう！

「いいね！」 2