談話におけるカスタマイズ性?

長年Discourseをフォローしてきましたが、コーディングやコマンドラインのセットアップに慣れていないため、移行をためらっていました。しかし、エキサイティングな機能とオープンソースの性質に最終的に説得され、技術に詳しい友人の助けを借りてXenForoから移行しました。

これで、フォーラムをカスタマイズするのが待ちきれません!UI/UXデザイナーとして、たくさんのアイデアがありますが、どこから手をつければよいかわかりません。XenForoでは、私のビジョンに非常に近いテーマを使用し、CSSでマイナーな調整を行っていました。組み込みのテーマオプションでは、投稿の背景やサイドバーの境界線などの特定のUI要素をGUIで調整することもできました。

Discourseでは、カラーパレットオプションがありますが、より詳細なスタイリングのための組み込みコントロールはありますか、それともすべてコードに頼る必要がありますか?どんなガイダンスでも大歓迎です!とはいえ、Discourseの機能には本当に感銘を受けており、その可能性を探求することを楽しみにしています。

「いいね!」 3

ようこそ :slight_smile:

カラーパレット以外は、CSS/SCSS、必要に応じてさらに(JS、HTML)になります。

こちらが参考になるかもしれません。

テーマとコンポーネントを作成できます。コンポーネントは「サブテーマ」のようなもので(スタイルと機能を含めることができます)、どのコンポーネントでも1つ以上のテーマで有効にできます。

テーマとコンポーネントの作成を支援するコマンドラインツールがあり、そちらを確認することをお勧めします。

また、ほとんどのDiscourse HTML要素を一覧表示する特別なページもあり、それらがどのように見えるかの概要を把握し、それに応じてスタイルを作成できます。
ページは Styleguide enabled サイト設定で有効にする必要があります。

例:
https://unicyclist.com/styleguide/molecules/topic-list-item

「いいね!」 7

私には少し気が遠くなるように思えますが、それでも前向きな気持ちです。この素晴らしい返信をありがとうございます。スタイルガイドはきっと役に立つと思います。本当にありがとうございます!

「いいね!」 2

Discourse のインターフェイスから直接 CSS を編集できます。

/admin/customize/themes/ から:


Discourse は SCSS 構文をネイティブでサポートしており、オンザフライでコンパイルされます。

「いいね!」 6

@manuel は、テーマの構築とカスタマイズのためのコーディングを(あまり)必要としないオプションを拡張しています。まずはそこから始めるのが良いでしょう(個人的には、自分で調べる時間ができるまで、あなたの進捗を追いたいと思っています :wink: なので、もしあなたがそれをするなら、ぜひ途中でフィードバックやレポートを提供/投稿してください!!!)。UI/UXオタクである私たちにとって、いくつかの簡略化を革新しているようです。

「いいね!」 4

すべてではありませんが、よりカスタムなデザインを実装するにはコードを書く必要があると思います。推奨される手順は次のとおりです。

  • @Canapin がすでに言及した Theme CLI gem の使い方を学びましょう。これは daunting な最初のステップかもしれませんが、カスタム Discourse テーマ作成を気に入るきっかけになるとしたら、この小さな gem です!デザイナーにとっては魔法の杖のようなものです :sparkles: これがないと、あらゆる段階で摩擦を感じるでしょう。
  • CSS カスタムプロパティを使用してスタイルを実装する練習をしましょう。

この点に関して、ガイドは最新ではないと思います。真に一貫したデザイン トークン システムにはまだ多くの作業が残っていますが、Discourse はすでに長い道のりを歩んでいます!カスタムプロパティがどこでどのように使用されているかを理解することは、Discourse のフロントエンドのベストプラクティスを理解するのに大いに役立ちます。

ブラウザのインスペクターを使用してカスタムプロパティを見つけることができます。または、このリストを見て最初の印象を得てください。カスタムプロパティのドキュメント。サイドバーのような最近のテンプレートは、カスタムプロパティだけでほぼ完全にスタイル設定できます。

  • @denvergeeks が提案したように、Canvas テーマ テンプレートを見てみるのも良いでしょう。これは、コアにはないレイアウト スタイリングのためのカスタムプロパティのセットを追加するものです。
「いいね!」 3

これまでのところ、私はこのアプローチだけを追っていて、ブラウザの検査オプションを使用して調整しています。