最初の投稿には、機能を説明するコメントとともにGitHubへのリンクがあります。これはまだ実験的な機能であると思われ、試すにはDiscourse Theme CLIコンソールアプリをインストールしてテーマの作成を支援するを使用する必要があります。
「いいね！」 1
Manuelさん、返信ありがとうございます。CLIはすでに使用しています。Gitのドキュメントには、カスタムHTMLの追加方法は記載されていますが、実際のコンポーネントの追加方法については記載されていません。フォーラムにすでにインストールされている検索バナーを追加したいのですが、home.hbsで呼び出すことができますか、それとも使用するために新しいHTML検索バナーを作成する必要がありますか？
では、ホームページに表示するのはどうでしょうか？
「いいね！」 1
はい、それが問題です。ホームページに追加する必要があります。カスタムを1つ追加したので、2つになりました。テーマから1つ削除します。どうもありがとうございました。大変感謝しています。
「いいね！」 1
複数のイテレーションがある場合、後続のイテレーションでは機能し、最初の1回だけフィルターが適用されないと述べたように。そのため、ストアに初期のドライランを追加すると機能します。
これを適切にデバッグする方法はわかりませんが、問題の特定に役立つかもしれません。
「いいね！」 3
キャッシュをウォームアップする必要があるようです。
「いいね！」 2
データの前処理方法に関する問題です。修正案のプルリクエスト（PR）を用意しました: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub
来週初めにマージします。
「いいね！」 5
上記のPRはマージされました。@manuel様、これで問題が解決するはずです。ご報告ありがとうございました！
「いいね！」 2
本日、新しい推奨方法でコンポーネントをルートに追加すると、このテーマ修飾子を使用している場合に機能しないことに気づきました。
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
機能する唯一の方法は javascripts/connectors/custom-homepage/welcome-banner.hbs です。
「いいね！」 4
私には機能しているようです。他にコンポーネントをレンダリングしていますか？1つにしか機能しないという問題があったと思います。または、現在安定版でのみ使用しているためでしょうか。
「いいね！」 3
もう少しテストしてみる必要があります。現時点では、これがなぜうまくいかないのかわかりません。
「いいね！」 2
このコンポーネントをHomepage Blocksコンポーネントと一緒にかなり活用しています。2つの提案があります。
デフォルトクラス
コンポーネントを調整して、常にbodyにhomepageクラスを、href=\"/custom\"を持つサイドバーリンクにactiveクラスを追加するようにしました。これらの機能は、モディファイアのデフォルトとしておそらく利用できるのではないでしょうか？
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href=\"/custom\"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
(当初はサイドバーリンクをデフォルトで追加したかったのですが、インターフェースでそのようなリンクを編集できないのは、私にとって大きな欠点だと感じています。How can I edit sidebar links that are added with api.addCommunitySectionLink? を参照)
スピーディーな初回ペイント
技術的にはどのようにアプローチすればよいかわかりません。しかし、カスタムホームページに着地した場合、通常は限定的なコンテンツ選択が表示されますが、ホームページのFCPを改善し、アプリの他の部分がロードされている間にすでにレンダリングすることは可能でしょうか？これはシングルアプリアーキテクチャの性質を誤解しているのかもしれません。ローディングアニメーションが表示され、その後かなりシンプルなページに着地するのは、少し残念に感じます。そのページ自体はすぐに表示できるはずなのに。
「いいね！」 4
そうかもしれません…よくわかりません。bodyClassヘルパーを使用するだけで、どのコンポーネントテンプレートにもこのクラスを追加するのは比較的簡単です。たとえば、別のテーマでは次のようにしています。
<template>
{{bodyClass "custom-homepage"}}
...
</template>
これはonPageChangeフックと同じことを達成しますが、より信頼性が高くなります。コンポーネントがレンダリングされている間だけ、そのクラスがbodyに設定されます。
コンポーネントに必要なすべてのデータがすでにある場合、はい、アプリの残りの部分とともにレンダリングできない理由はありません。ただし、ほとんどの場合、コンポーネントは追加データを取得するためにリクエストを行う必要があり、それがローディングインジケーターをトリガーします。正直なところ、それをより速くロードする方法は思いつきません。
せっかくなので、この機能にさらに改善を加えました。ごく最近まで、カスタムホームページのクローラービューはカスタマイズできませんでした。現在は、サーバーサイドのHTMLアウトレットを介してカスタマイズできます。DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
「いいね！」 5
以前は管理UIでテーマを編集していましたが、非推奨の警告が表示されるようになったため、代わりにcustom-homepageオプションを検討しています。
この例に従って、<head>とCSSを移行しました。私の試みはこちらにあります。ここまでは順調です。
問題は、検索バーと「Who’s Online」コンポーネントをどのように挿入するかです。
以前の<head>では、コードの好きな場所に{{whos-online}}と{{search-menu}}を追加するだけでよかったのですが、ここではうまくいきません。正しく挿入する方法が見つかりません。
どちらか正しい構文をご存知の方、あるいは正しい方向性を示していただけないでしょうか？
最終的な結果はこちらのようになります（現在は、まもなく非推奨になる以前のコードに戻しています）。
ローカルで少し確認したところ、WhosOnline コンポーネントで問題が発生しましたが、サーバーを再起動したところ問題なく動作しました。ホームページコンポーネントで使用したコードは次のとおりです。
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
ただし、SearchMenu はコアに含まれているため常に存在しますが、<WhosOnline /> はプラグインから提供され、プラグインが有効になっている場合にのみ登録されることに注意してください。
「いいね！」 3
これで「Who’s Online」と「Search Menu」は解決しました！素晴らしいです。あとは、こちらで現在表示されているフィードを取得するための構文を理解する必要があります。
現在は、フィード以外のすべてを非表示にし、ヒーロー、オンライン中のユーザー、検索メニュー、リンクを挿入し、CSSをオーバーライドしてこれらの要素に対してフィードを配置することで表示しています。あまり良い方法ではありません。
カスタムホームページレイアウトを作成できるようになり、すべてのピースを適切な場所に配置できるようになりつつありますが、フィードの取得方法がまだわかりません。Emberで現在のページを検査してみたり、インポート方法を調べるためにdiscourseアプリコンポーネントを確認しましたが、うまくいきませんでした。
何かヒントはありますか？
ホームページにトピック数を限定したトピックリストを表示するには、Featured Lists のようなコンポーネントを使用します。コアリストを挿入すると、無限にロードされるリストが表示されると思います。それがお望みのものかもしれませんね。ただし、それならホームページを別に設けるのではなく、そのトピックリストビューでランディングページを構築する方が良いのではないでしょうか。
また、ホームページのレイアウトを整理するために、私のコンポーネント Homepage Blocks も検討できます。エディターを通じてコンポーネントを追加し、その順序を整理できます。このコンポーネントは、ボディクラス homepage と、より良いレスポンシブスタイリングに使用できる追加のラッパー要素 homepage-blocks も追加します。例えば、ラッパーにグリッドを定義し、幅に応じてレイアウトを調整することで、広い画面ではサイドバーとメインコンテンツを持つレイアウト、より狭い画面ではすべてのコンテンツが積み重ねられた単一行のレイアウトを持つことができます。現在のサイドバー項目は単に縮小されるだけで、一部の幅では理想的ではないかもしれません。
幅に応じてレイアウトが切り替わるホームページグリッドの簡単な例は次のとおりです: https://forum.zolidar.com
「いいね！」 1