このコンポーネントを使用すると、ログイン後にユーザーを任意の場所にリダイレクトできるほか、グループ ( /g ) ページにウェルカムバナーを配置できます。
これは両方の部分が独立して構築されているため、好きな場所にリダイレクトすることも、グループページにバナーを配置するためだけに使うこともできます。デフォルトの動作では、新しいユーザーをグループページにリダイレクトし、そこでウェルカムバナーが表示され、コミュニティへの参加を促します。
また、このコンポーネントを使用して、特定のトラストレベル以下のユーザーをログイン時に特定のページにリダイレクトしたり、選択したグループ数未満のグループに参加したユーザーをリダイレクトしたりすることもできます。
First Login Redirect
グループメンバーシップを持たないユーザーをカスタムページにリダイレクトし、カスタマイズ可能なウェルカムバナーを表示するDiscourseテーマコンポーネント。
特徴
スマートリダイレクト - ログイン時にグループメンバーシップを持たないユーザーをカスタムページにリダイレクト
カスタマイズ可能なバナー - グループページにカラフルなウェルカムバナーを表示
完全設定可能 - リダイレクトとバナーを個別に有効/無効にできます
グループベースのロジック - ユーザーがいずれかのグループに参加するとリダイレクトを停止
トラストレベル対応 - バナーの表示をトラストレベルで制限可能
レインボーグラデーション - 目を引く6色グラデーションの背景(ソリッドカラーへの切り替えトグル付き)
モバイル対応 - バナーがモバイル画面に適応
インストール
-
Discourse管理コンソールで、カスタマイズ → テーマ → コンポーネント に移動し、インストール をクリックします。
-
Gitリポジトリから を選択し、以下を貼り付けます。
https://github.com/focallocal/first-login-redirect -
インストール後、コンポーネントをアクティブなテーマに追加します。
動作原理
リダイレクトロジック
- ユーザーがいずれかのグループのメンバーであるかを確認します
- ホームページにアクセスしたタイミングを検出します
- 設定されたURL(デフォルト:
/g)にリダイレクトします - いずれかのグループに参加するとリダイレクトを停止します
- バナーとは独立して無効にできます
ウェルカムバナー
- デフォルトでグループインデックスページ (
/g) に表示されます - トラストレベル設定によって表示が制御されます
- リダイレクトとは独立して無効にできます
- ユーザーがトラストレベル1に達すると自動的に非表示になります
before-groups-indexアウトレットを使用してグループリストの最上部に配置されます
カスタマイズ
テーマ設定(管理パネル)
すべてのカスタマイズは、コードを編集することなくDiscourse管理パネルから実行できます!
- 管理 → カスタマイズ → テーマ に移動します。
- このコンポーネントを含むテーマをクリックします。
- 設定 に移動し、「First Login Redirect」セクションを探します。
利用可能な設定:
リダイレクト設定:
- リダイレクトを有効にする: リダイレクト機能をオン/オフします(デフォルト: true)
- 必要な最小グループ数: リダイレクトが停止するまでに参加する必要があるユーザー作成グループの数(デフォルト: 1)
- 自動グループ(
trust_level_0、everyoneなど)はカウントされません
- 自動グループ(
- リダイレクト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
