Don
1
こんにちは 
以前、このテーマコンポーネントのコンセプトとして Development トピック を作成しましたが、現在は Customization > Theme component として使用可能な状態になりました。
本番環境で使用する前に必ずテストしてください。
コンポーネントに関する詳細情報: F NAV - Theme component concept
テーマコンポーネントについて。この機能について多くの投稿を読み、Discourse のモバイル用タブバー をより動的にし、通知などの処理機能を追加できれば素晴らしいと考えました。F NAV はそれ以上の機能を提供します…
ヘッダー
ハンバーガーメニュー、ユーザーメニュー、検索、チャットを非表示にし、デフォルトのユーザーメニューのプロフィールタブの内容を含むプロフィール（アバター）メニューボタンを追加します。
設定
ログアウト項目の前にカスタム項目を追加できる設定も含まれています。
3つのフィールドがあり、簡単にカスタム項目を追加できます。
デフォルトのヘッダーアイコンの表示/非表示に関するいくつかの設定があります。これは、特定のタブを F NAV に配置したくない場合にヘッダーに表示したい場合に便利です。
タブ
異なる関数をタブに関連付けることができます。これらの関数により、各タブは動的に変更されます。
このような変更には以下が含まれます:
関数
home
- トピックルートでホームタブのアイコンを左矢印に切り替え、戻る機能を追加します
- 新しいまたは未読のトピックインジケータードットを追加します
hamburger (ハンバーガーメニューを開く)
multi
multi tab
チャットが有効になっていない場合、またはユーザーがユーザー設定でオフにしている場合、マルチタブは自動的にメッセージタブに切り替わります。
通知バブルは、緊急度に応じて変化します。
マルチタブの緊急通知は緑色で、以下のように表示されます。
展開済み
個人メッセージは常に緑色ですが、チャットは元の通り青色になる場合があります（例：未読のチャンネルメッセージ通知）。
展開済み
単一の通知
message
- 通知付きのメッセージボタンを追加し、クリックするとメッセージモーダルが開き、クイック確認ができます
chat
notificationToRoute
notificationMenu
search
- コンテキストベースの
/search ページにリダイレクトします
設定
設定はできるだけシンプルに作成しました。
4つのフィールドが含まれます。
- name: 設定内でタブを識別しやすくするためのものです。
- icon: タブにアイコンを追加します。注意: 関数を選択した場合、この設定で上書きできないアイコンがある場合があります。
- destination: カスタムタブの宛先を追加します。注意: 宛先を処理する関数を選択した場合、空のままにしておくことができます。コンポーネントは
/my/... の宛先を自動的に /u/username/... に変換するため、タブのアクティブ状態を正しく追加できます。
- function: タブに関数を選択します。
管理者はタブの作成/削除/変更を簡単に行い、関数の一つから選択するか、カスタム宛先をタブに追加できます。
関数
例として、トピック作成タブを追加すると、以下のように表示されます。
クレジット: Discourse のモバイル用タブバー および F NAV - テーマコンポーネントのコンセプト トピックでのフィードバックを提供してくれたすべての方々に感謝します。
「いいね！」 22
Canapin
(Coin-coin le Canapin)
2
これは素晴らしいですし、デフォルトの動作であるべきです。これにより、携帯電話の画面の奥上部まで届こうとして親指が痛くなるのを防ぐことができます。
目立つ「オンライン」トグルはあまり好きではありません。ほとんどの人はこの設定を頻繁に変更する必要がないと思うからです。おそらく、ほとんどのユーザーはオンラインプレゼンスを一度きりでオプトアウトするので、このオプションが存在し続けることへの絶え間ないリマインダーは不要だと思います。
多くの非常に便利なナビゲーション変更テーマコンポーネントを作成したようですね。いくつか使用したいのですが、長期的にこれらすべてをどの程度維持するつもりですか？信頼性を確保するために、official のテーマコンポーネントのみを使用する傾向があります。
元のタブバーの公式テーマコンポーネントが見当たらなかったので、確認してみます。
「いいね！」 7
ozkn
(Mathx)
3
コンポーネントありがとうございます、@don。長い間ここにいて、本当に素晴らしい仕事をしています。
「いいね！」 3
Don
5
ありがとうございます。FKBテーマに関するものです。テーマを更新します。
「いいね！」 3
Don
6
「いいね！」 3
ozkn
(Mathx)
7
@donさん、画像のようにfa-regularアイコンを使用するにはどうすればよいですか？ Fontawesome 6に切り替えた後、その方法に関する情報が見つかりませんでした。
「いいね！」 3
Don
8
こんにちは 
far-bell で動作するはずです。タブがアクティブなときに通常からソリッドに変更する予定でしたが、確認してみます。しかし、私の記憶が正しければ、家のアイコンは無料版にソリッドしかありません。
「いいね！」 1
ozkn
(Mathx)
9
ありがとうございます。問題が解決しました。@Don
「いいね！」 1
Jagster
(Jakke Flemming)
10
トピックを開いたときにバックボタンに変わるホームアイコンについて。スワイプで戻れるようにできませんか（Hubのホーム画面に戻るときのように 
）。ユーザーから、ロゴまで手を伸ばさなければならないと不満が出ています（ファーストワールド問題、わかっています 
）。
「いいね！」 2
Don
11
これをどこに配置するか考えているのですが、関数に追加できると思います。これは単一のタブにすることができ、DiscourseHubにのみ表示されるナビゲーションに追加できます。
「いいね！」 1
Jagster
(Jakke Flemming)
12
実はDiscourseHubはスワイプダウンで問題なく動作します。ただ、それに気づかなかっただけです。
ホーム/バックボタンの質問は、他の人に説明しなければならないので、より大きな問題です。
「いいね！」 3
Don
13
バックボタンは、トピック間のナビゲーションを容易にするために、トピックでのみアクティブになります。これは、オフにできるホーム機能から来ており、これによりホームの宛先が維持されます。
設定はまだ並べ替えることができず、既存の選択がある場合はクリアできませんが、新しい機能 none を追加しました。これは、機能フィールドを空のままにした場合と同じ動作になります。これにより、ナビゲーションタブ全体を再作成する必要がなくなります。
バックボタンを無効にして、どこでもホームを維持したい場合は、次のようになります。
「いいね！」 3
Heliosurge
(Dan DeMontmorency)
14
いつものように素晴らしいです。テーマクリエイターでの簡単なプレビューから同意せざるを得ません。これは、クラシックモバイルと改善されたモバイルのトグルを備えたコアパッケージに含めるべきです。
これにより、長いバナーサイトロゴのようなものが開かれるのを見ることができます。ヘッダーのローカルセレクターなどのオプションがよりクリーンになり、さらに多くのことができます。いつものように、ドン、とてもとても素晴らしいです！
「いいね！」 3
MihirR
(Mihir)
16
鉛筆アイコンとナビゲーションのトピックがナビゲーションバーと一緒に折りたたまれています。
「いいね！」 1
CAX.DO
18
ドンさん、こんにちは。素晴らしいお仕事、ありがとうございます。気に入っています。
質問があります。ハンバーガーメニューまたは通知をクリックした後、さらに操作する必要がない場合があります。この場合、記事リストに戻る必要があります。しかし、ハンバーガーメニューまたは通知を閉じるには、空白のページをクリックするしかありません。これにより、誤ってアバターや返信をクリックしてしまう可能性があります。
別の簡単な例として、チャットページにいてホームページに戻る必要がある場合、左上隅にある戻るボタンをクリックする必要がありますが、これは実際にはモバイルデバイスではユーザーフレンドリーではありません。
そこで、メニューバーを常に一番上に表示することは可能でしょうか？
私の説明が理解されることを願っています。
「いいね！」 2
Don
19
こんにちは、マックスさん
問題のスクリーンショット/画面録画をいくつか作成していただけますか？
/chat ではナビゲーションを非表示にし、デフォルトの チャットヘッダーを使用しています。ナビゲーションをチャットに表示することが、さまざまなブラウザで問題を引き起こす可能性があるため、それだけの価値があるかどうかはわかりませんが、確認します。
「いいね！」 1
CAX.DO
20
ドンさん、こんにちは:smiley:
お返事ありがとうございます。
以下のスクリーンショットを参照してください。最初の2つのスクリーンショットは、ハンバーガーメニューまたは通知を閉じたい場合、黄色い領域をクリックすることしかできないことを意味します。問題は、記事やアバターを誤ってクリックしやすいことです。
3番目のスクリーンショットは、チャットインターフェースを終了するには、左上隅の戻るボタンをクリックする必要があることを意味します。
「いいね！」 1
Don
21
説明をありがとうございます 
ええ、わかります。ここで発生している問題はコンポーネントではなく、デバイスで「視差効果を減らす」設定が有効になっている場合のコアな問題です。お使いのデバイスで有効になっていますか？
「視差効果を減らす」がオフの場合、「header-cloak」（メニューの後ろの暗い領域）がクリック操作をブロックします。
デバイスで有効にすると、ユーザーのクリックをブロックしなくなります。
この場合、スワイプジェスチャーでメニューを安全に閉じることができます。
この問題については、どこかにトピックがあったと思います
それはデフォルトのチャットヘッダーです。
そこにナビゲーションを有効にできるか確認します。
「いいね！」 3
