ログインリダイレクトおよび/またはグループページバナーコンポーネント

このコンポーネントを使用すると、ログイン後にユーザーを任意の場所にリダイレクトできるほか、グループ ( /g ) ページにウェルカムバナーを配置できます。

これは両方の部分が独立して構築されているため、好きな場所にリダイレクトすることも、グループページにバナーを配置するためだけに使うこともできます。デフォルトの動作では、新しいユーザーをグループページにリダイレクトし、そこでウェルカムバナーが表示され、コミュニティへの参加を促します。

また、このコンポーネントを使用して、特定のトラストレベル以下のユーザーをログイン時に特定のページにリダイレクトしたり、選択したグループ数未満のグループに参加したユーザーをリダイレクトしたりすることもできます。

First Login Redirect

グループメンバーシップを持たないユーザーをカスタムページにリダイレクトし、カスタマイズ可能なウェルカムバナーを表示するDiscourseテーマコンポーネント。

特徴

  • :counterclockwise_arrows_button: スマートリダイレクト - ログイン時にグループメンバーシップを持たないユーザーをカスタムページにリダイレクト
  • :artist_palette: カスタマイズ可能なバナー - グループページにカラフルなウェルカムバナーを表示
  • :gear: 完全設定可能 - リダイレクトとバナーを個別に有効/無効にできます
  • :bust_in_silhouette: グループベースのロジック - ユーザーがいずれかのグループに参加するとリダイレクトを停止
  • :bullseye: トラストレベル対応 - バナーの表示をトラストレベルで制限可能
  • :rainbow: レインボーグラデーション - 目を引く6色グラデーションの背景(ソリッドカラーへの切り替えトグル付き)
  • :mobile_phone: モバイル対応 - バナーがモバイル画面に適応

インストール

  1. Discourse管理コンソールで、カスタマイズ → テーマ → コンポーネント に移動し、インストール をクリックします。

  2. Gitリポジトリから を選択し、以下を貼り付けます。

    https://github.com/focallocal/first-login-redirect
    
  3. インストール後、コンポーネントをアクティブなテーマに追加します。

動作原理

リダイレクトロジック

  • ユーザーがいずれかのグループのメンバーであるかを確認します
  • ホームページにアクセスしたタイミングを検出します
  • 設定されたURL(デフォルト: /g)にリダイレクトします
  • いずれかのグループに参加するとリダイレクトを停止します
  • バナーとは独立して無効にできます

ウェルカムバナー

  • デフォルトでグループインデックスページ (/g) に表示されます
  • トラストレベル設定によって表示が制御されます
  • リダイレクトとは独立して無効にできます
  • ユーザーがトラストレベル1に達すると自動的に非表示になります
  • before-groups-index アウトレットを使用してグループリストの最上部に配置されます

カスタマイズ

テーマ設定(管理パネル)

すべてのカスタマイズは、コードを編集することなくDiscourse管理パネルから実行できます!

  1. 管理 → カスタマイズ → テーマ に移動します。
  2. このコンポーネントを含むテーマをクリックします。
  3. 設定 に移動し、「First Login Redirect」セクションを探します。

利用可能な設定:

リダイレクト設定:

  • リダイレクトを有効にする: リダイレクト機能をオン/オフします(デフォルト: true)
  • 必要な最小グループ数: リダイレクトが停止するまでに参加する必要があるユーザー作成グループの数(デフォルト: 1)
    • 自動グループ(trust_level_0everyoneなど)はカウントされません
  • リダイレクトURL: グループを持たないユーザーを送信する場所(デフォルト: /g
    • 例: /g (グループ)、/categories/about/latest

バナー設定:

  • バナーを表示: バナーをオン/オフします(デフォルト: true)
  • 最小トラストレベル: バナーを表示するための最小トラストレベル(0-4、デフォルト: 0)
  • 最大トラストレベル: バナーを表示するための最大トラストレベル(0-4、デフォルト: 4)
  • バナーの見出し: メインの大きなテキスト
  • バナーの小見出し: より小さな説明テキスト

タイポグラフィ:

  • 見出しフォントサイズ: メイン見出しのサイズ(デフォルト: 2.5em)
  • 小見出しフォントサイズ: 小見出しのサイズ(デフォルト: 1.25em)
  • テキストシャドウを有効にする: 可読性のためにテキストシャドウを切り替えます
  • テキストグローを有効にする: 外側のグロー効果を切り替えます

色:

  • グラデーションを使用: グラデーションを有効/無効にします(無効の場合、ソリッドカラーを使用します)
  • グラデーションカラー 1-6: グラデーション内の各色をカスタマイズします
    • デフォルト: ピンク → オレンジ → イエロー → グリーン → シアン
    • ソリッドカラーを使用するには、「グラデーションを使用」を OFF にし、カラー1を設定します。

レイアウト:

  • バナーパディング: バナー内部のスペース(デフォルト: 3rem 2rem)
  • ボーダーラディウス: 角の丸み(デフォルト: 12px、正方形の場合は0を使用)

TL0のみ(新規ユーザー)に表示:
最小トラストレベル = 0、最大トラストレベル = 0 に設定します。

管理者以外全員に表示:
最小トラストレベル = 0、最大トラストレベル = 3 に設定します。

ソリッドカラーバナー:
「グラデーションを使用」を OFF にし、カラー1を目的の色(例: オレンジの場合は #FF5722)に設定します。

2色グラデーション:
「グラデーションを使用」を ON にし、カラー1-3を1色、カラー4-6を別の色に設定します。

大きなテキスト:
見出しを 3em、小見出しを 1.5em に設定します。

エフェクトなし:
「テキストシャドウ」と「テキストグロー」の両方を無効にして、フラットなテキストにします。

リダイレクトを無効にする(バナーのみ)

ファイルを削除またはコメントアウトします:
javascripts/discourse/api-initializers/first-login-redirect.js

トラストレベル要件の変更

両方のイニシャライザファイルで、以下を変更します。

currentUser.trust_level === 0

以下に変更します。

currentUser.trust_level <= 1  // TL0 および TL1

技術詳細

  • APIバージョン: 1.8.0(モダンなDiscourse API)
  • コンポーネントタイプ: テンプレートタグ付きのGlimmerコンポーネント
  • プラグインアウトレット: before-groups-index
  • 互換性: Discourse 2.8.0+

トラブルシューティング

Q: リダイレクトが機能しない
A: ブラウザの sessionStorage をクリアし、新しいトラストレベル0のアカウントでテストしてください。

Q: テストでバナーが表示されない
A: /g ルート上にいること、およびTL0ユーザーとしてログインしていること、または管理画面で設定した値を確認してください。エラーについてはブラウザのコンソールを確認してください。

Q: リダイレクトループ
A: sessionStorage のチェックにより、これが防止されるはずです。発生した場合は、ブラウザのキャッシュと sessionStorage をクリアしてください。

ライセンス

MIT — Public Happiness Movement

こんにちは。すでにいくつかのテーマコンポーネントを作成されているようですね。Theme component カテゴリでトピックを作成できるよう、@theme_authors グループに参加をご検討いただけませんか?ありがとうございます。

「いいね!」 1

私はプロジェクトマネージャーですが、AIのおかげでよりタイトなコードでの構築がずっと簡単になっているので、もちろんです。ありがとうございます。