manuel
2024 年 4 月 4 日午後 9:43
1
新しいカスタムホームページ機能を試しています: https://github.com/discourse/discourse/pull/26291
@pmusaraj コンポーネントを追加する最善の方法は何でしょうか？
カスタムホームページモディファイアを追加すると、discovery.custom ルートが有効になり、custom-homepage アウトレットでレンダリングされるデフォルトの情報アラートが表示されます。
アウトレットにコンポーネントを追加すると、それが代わりにレンダリングされます。
しかし、複数のコンポーネントを追加するとエラーが発生します。
ただし、他のアウトレットにはコンポーネントを追加できます。プラグインアウトレットが表示されたビューを次に示します。
それで、新しいアウトレットはどのように機能すべきか疑問に思っています。
ある意味では、アウトレットは必要ないかもしれません。他の利用可能なアウトレットを使用し、コンポーネントを discovery.custom ルートに限定できます。
ただし、少なくとも 1 つのコンポーネントをアウトレットに配置する必要があるようです。そうしないと、デフォルトのアラートがレンダリングされるのでしょうか？空のテンプレートをそこに配置しても機能しません。
一方で、アウトレットに複数のコンポーネントを追加できれば、ルートロジックをまったく持つ必要がなくなります。コンポーネントはアウトレットが他のルートで利用できないため、ホームページにのみ表示されるのでしょうか？
「いいね！」 4
それは驚くことではありませんか？
単一のテンプレートファイルをここに配置し、それを使用してコンポーネントフォルダ内のコンポーネントを参照してください（コンポーネントはいくつでも持つことができます）。
<MyFirstComponent />
<MySecondComponent />
<MyThirdComponent />
または、好きなように…このフォルダには1つのテンプレートだけを置いておけばよいのです。
「いいね！」 1
manuel
2024 年 4 月 4 日午後 9:55
3
Robert:
それは驚くことではありませんか？
上記スクリーンショットのように、他のアウトレットでも動作するからだと思っていました。
ああ、すみません、おっしゃる通りです。通常、1つのテーマコンポーネントに複数のテンプレートファイルを公開することは、アウトレットでは合法のようです（テーマコンポーネントやプラグイン全体での競合を処理し、すべてがレンダリングされることは認識していました）。興味深いですね。
しかし、なぜそうしたいのかと思いますか？レイアウトの制御が少なくなるのではないでしょうか？
1つのテンプレートは、必要な数のサブコンポーネントを使用して、一度に全体のレイアウトを構成することを強制しますか？
ただし、動作は一貫していないようです…
manuel
2024 年 4 月 4 日午後 10:23
6
カスタムホームページを構築する場合、既存の複数のコンポーネントをレンダリングできるようにしたいと考えています。そして、前述のように、これは他の利用可能なアウトレットを使用し、コンポーネントをカスタムホームページルートに限定した場合にすでに機能しています。
特定のカスタムホームページアウトレットに1つのコンポーネントしか追加できず、デフォルトのyieldを無効にするためにもう1つ追加する必要がある場合、これは実際にはレイアウトの制御を制限することになります。
しかし、なぜそれらのコンポーネントすべてを1つのテンプレートで参照できないのですか？
ああ、それらは異なるテーマコンポーネントから来ているからですか？
ここでは話がかみ合っていなかったと思います。
私が「すべての（Ember）コンポーネントをComponentsフォルダーに入れる」と言うとき、それはまさにそのことを意味しますが、1つの_Theme_ Component内に入れるということです。
この核心は単純に「なぜこのアウトレットは異なる動作をするのか？」ということだと思います。異なるテーマコンポーネントを組み合わせようとしていることは理解しています。
manuel
2024 年 4 月 4 日午後 10:31
8
Robert:
テーマコンポーネントが異なるからですか？
はい、その通りです。上記のプレーンテキストテンプレートは例として使用しただけです。例えば、Featured Lists を使用しています。そして、これらの設定でアウトレットにレンダリングできます。
しかし、同じように別のものをレンダリングしようとすると、複数のコネクタのエラーが発生します。
「いいね！」 2
pmusaraj
2024 年 4 月 5 日午後 6:13
9
テストしていただき、またご質問いただきありがとうございます、@manuel様 。
私もこの答えを知りませんでしたが、調べて大体わかりました。最近、昨年のこのPRで、従来のプラグインアウトレットとラッパープラグインアウトレットを区別するようになりました: DEV: Allow PluginOutlets to 'wrap' a core implementation by davidtaylorhq · Pull Request #23110 · discourse/discourse · GitHub
ラッパープラグインアウトレットはコネクタが1つしか許可されないもので、その他は複数許可されます。例として、現在のコアプラグインアウトレットコードは以下のようになります。
<PluginOutlet @name="custom-homepage">
{{#if this.currentUser.admin}}
<p class="alert alert-info">
{{i18n "custom_homepage.admin_message"}}
</p>
{{/if}}
</PluginOutlet>
そして、これはコネクタが1つしか許可されません。しかし、コアのアウトレットコードを以下のように変更すると:
<PluginOutlet @name="custom-homepage" />
複数のコネクタテンプレートを問題なく許可できます。この変更をコアのこの特定のアウトレットに対して行うこともできますが、この違いはより一般的です。開発者にとっては少し分かりにくいと感じていることは、あなたの指摘の通りです。
また、複数のコネクタには順序の問題があることにも注意してください。私の知る限り、順序を決定するメカニズムはありません。
いずれにしても、最善のアプローチは@merefieldが提案したことだと思います：1つのテンプレートを使用し、そこからEmberコンポーネントを参照することです。
デフォルトのアラートは管理者のみに表示されます。
「いいね！」 6
manuel
2024 年 4 月 5 日午後 10:20
10
説明ありがとうございます！
さらに試してみましたが、これは本当に新鮮で、使うのが楽しいです！
レイアウトには既存のコンポーネントを3つ使用しました。カスタムホームページを作成する際には、これが一般的なアプローチになると予想されます。ラッパーのアウトレットにはそのうちの1つしか追加できなかったため、ここにプレーンなアウトレットがあれば、より役立つのではないかと思います。
「いいね！」 6
manuel
2024 年 4 月 12 日午前 10:03
11
別の観察事項: /custom URL を使用してサイドバーにリンクを配置しました。
カスタムルートにいるときにハイライトされません。
サイドバーのハイライトのロジックが正しく理解できているなら、ルート URL / にいるときにもハイライトされるはずです。
「いいね！」 3
pmusaraj
2024 年 4 月 12 日午後 2:35
12
Featured Lists コンポーネントを簡単に確認した後、問題がより明確になりました。1 つのオプションは、そのコンポーネントをリファクタリングして、すべてのリストを 1 つの Ember コンポーネントに出力させることです。その後、そのコンポーネントをプラグインラッパーアウトレットに追加できます。
別のオプションは、カスタムホームページテンプレートに 2 番目のプラグインアウトレットを追加することです。たとえば、 <PluginOutlet @name="below-custom-homepage" /> のようなものです。
正直なところ、この custom-homepage アウトレットを管理者向けのメッセージとともに保持している理由はあまりないかもしれません。その警告はあまり役に立ちません…
Manuel Kostka:
カスタムルートにあるときにハイライトされません。
はい、それは難しい場合があります。私のローカルテストでは、/custom は正常に機能しませんでした。/ を使用する方が適切にルーティングされます。しかし、それでもハイライトされません。
「いいね！」 2
manuel
2024 年 4 月 12 日午後 4:25
13
それは一般的な問題のようです。私も / を使用すると、ランディングページとして設定された他のルートもハイライトされません。
はい、警告の表示方法を変えることも想像できます。ラッパーアウトレットの主な利点は、コアコードを条件付きで提供したり、カスタムコードをレンダリングしたりできることのようです。しかし、その情報メッセージについては、そのようなケースはまずないでしょう。
誤解があるようです。コンポーネントはすでにすべてのリストを1つのラッパーコンポーネントでラップし、任意の指定されたアウトレットにレンダリングしています。
したがって、現在のカスタムホームページのアウトレットにコンポーネントを問題なく追加できます。
私の仮説では、カスタムホームページを構築するために、複数のスタンドアロンテーマコンポーネントをこのように使用することが一般的なアプローチになるだろうということです。すべてを1つのテーマでゼロから構築するのではなく。
別のアウトレットを追加したり、アウトレットのセットアップを変更したりすることを検討していただけるなら、これまでの使用感からさらにフィードバックを提供できます。ただし、その詳細については折りたたんでおきます
アウトレットは main-outlet 要素内にレンダリングされることに気づきました。これらの要素の全体的な構造は次のようになります。
main-outlet ラッパー
sidebar-wrapper
main-outlet
デザイナーとしては、このアウトレットを使用してカスタムホームページ上のアイテムを配置する際には、それほど柔軟ではありません。上記のデザインでは、より多くのコンポーネントを配置できるだけでなく、コンポーネントが main-outlet 要素内にネストされないため、before-main-outlet アウトレットを使用しました。
main-outlet ラッパー
sidebar-wrapper
コンポーネント: 検索バナー
コンポーネント: おすすめトピック
コンポーネント: おすすめリスト
main-outlet
利点は、 main-outlet ラッパー全体の幅にわたって要素を配置できることであり、 main-outlet 要素内だけに限定されないことです。例として、現在の custom-homepage アウトレットでコンポーネントの1つをレンダリングすると、 main-outlet 要素内にネストされてレンダリングされます。
カスタムデザインにとって最も柔軟性があるのは、次の場所に配置されたプラグインアウトレットだと考えられます。
main-outlet ラッパーの直接の子として ( before-main-outlet アウトレットと同様)
ラッピング div 内
そのラッピング div は、追加されたすべてのコンポーネントをバンドルし、簡単な順序付けを可能にします。そのような構造は次のようになります。
main-outlet ラッパー
sidebar-wrapper
custom-homepage-wrapper
コンポーネント: 検索バナー
コンポーネント: おすすめトピック
コンポーネント: おすすめリスト
main-outlet
これがデザイナーとしての私のフィードバックです。カスタムホームページ機能の一般的な用途として、どの程度適合するかは、あなたが決定することになるでしょう。
「いいね！」 3
おそらく、このページはユーザーには表示されるが「Googlebot」には表示されず、インデックスに登録されないという意味で「表面的」なのでしょうか？
pmusaraj
2024 年 4 月 24 日午後 3:30
16
はい、クローラービューについてはトップメニューのみを出力するようにしました。このルートでテーマが何を出力するかは、Railsアプリからはわかりません。
@manuel 、ここでいただいた提案について考えています。近いうちに時間を取って変更をいくつかテストします。しばらくお待ちください。
「いいね！」 6
manuel
2024 年 6 月 6 日午後 8:22
19
発生した問題：カスタムホームページにHomepage Feature コンポーネント を表示したいと考えていました。しかし、このルートではトピックがフィルタリングされません。コンポーネントは画像を持つ最近のトピックをすべて表示するだけです。
コンポーネントのコードは次のとおりです。
const topicList = await this.store.findFiltered("topicList", {
filter: "latest",
params: {
tags: [`${settings.featured_tag}`],
order: sortOrder,
}
カスタムホームページでは、params が適用されていないようです。それ以外の場合は正常に動作します。なぜこれが起こるのかわかりませんか？
編集：Featured Lists コンポーネント でも同じ方法を使用しています。カスタムホームページでこのコンポーネントを使用すると、フィルタは適用されません。ただし、最初のリストでのみ…複数ある場合、後続のリストはすべて正しくフィルタリングされます。
「いいね！」 3
pmusaraj
2024 年 6 月 7 日午後 2:56
21
興味深いですね。なぜそうなるのか分かりませんが、topicList ストアにディスカバリー ルートに関連付けられたロジックがあるのかもしれません。カスタムホームページはディスカバリー ルートではありません。
パラメータを持つ同じコンポーネントは、たとえば管理ルートやユーザー プロファイル ルートでは正常に動作しますか? 確認していただけますか？
@tynaut も同様の問題に遭遇したので、ここに対処すべき点がある可能性があります。
「いいね！」 1
manuel
2024 年 6 月 7 日午後 3:32
22
Featured Lists コンポーネントを試しましたが、コンポーネントをどこにでも表示する設定が既にあります。これには管理者ルートは含まれませんが、他のすべてのルート（静的ページ、ユーザープロフィールなど）で試しましたが、カスタムホームページを除くすべてで機能するようです。
もう1つの奇妙な点は、前述のように、最初のリストのみがフィルタリングされないことです。たとえば、ここで2つのリストをフィルタリングします。1つはタグのフィーチャー用、もう1つは一般カテゴリ用です。他のすべてのルートでは、リストは次のように表示されます。
カスタムホームページルートでのみ、次のように表示されます。
したがって、最初のリストはタグでフィルタリングされなくなりますが、2番目のリストはカテゴリでフィルタリングされます。リストの順序を切り替えると、最初のリストはカテゴリでフィルタリングされませんが、2番目のリストはタグでフィルタリングされます。
「いいね！」 2
pmusaraj
2024 年 6 月 7 日午後 6:06
23
Featured Homepage コンポーネントでこれを適切に再現するのは少し難しいことがわかりました。他の条件が多すぎます。
ただし、単純化したコンポーネントで簡単に再現できます。ここにサンプルリポジトリにプッシュしました: GitHub - pmusaraj/discourse-sample-custom-homepage
そこにある sample-list コンポーネントは featured タグが付いたトピックのみを取得するはずですが、そうではありません (私の場合、最初の 3 つのトピックを取得します)。そのテーマの about.json ファイルから custom_homepage モディファイアを削除すると、正しいトピックが取得されます。
ストアサービスに詳しい人を見つけて確認してもらいます。ありがとう！
「いいね！」 1
pinder99
2024 年 6 月 8 日午前 8:43
27
こんにちは
新しいカスタムホームページにコンポーネント（検索バナーまたはフォーラムに既にインストールされているカスタムコンポーネント）を home.hbs ファイルに追加して表示する方法を説明していただけますか？
よろしくお願いします。
