カスタムホームページを作成しました。方法は以下の通りです。
a) ランディングページに .custom-homepage クラスを追加しました。これにより、カスタム CSS を使用して、その特定のページで非表示にしたいコンテンツや調整したいコンテンツを簡単にターゲットにできます。
b) デフォルトテーマのカスタム HTML の head ファイルに新しいコンポーネントを直接追加しました。
以下のようになります。
<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-main-container", "custom-homepage", {
setupComponent(args, component) {
var topMenuRoutes =
component.siteSettings.top_menu.split('|')
.map(function(route) {return '/' + route});
// 'top_menu' 設定で最初にリストされたページがホームページです
var homeRoute = topMenuRoutes[0];
// ページが変更されるたびにコードを呼び出します
api.onPageChange((url) => {
// ホームページかどうかを確認します
if (url === "/" || url === homeRoute ){
// ホームページの場合は、HTMLタグに 'custom-homepage' クラスを追加します
// そして 'displayCustomHomepage' を true に設定します
document.querySelector("html").classList.add("custom-homepage");
component.set("displayCustomHomepage", true);
} else {
// ホームページでない場合は、クラスを削除します
// そして `displayCustomHomepage` を false に設定します
document.querySelector("html").classList.remove("custom-homepage");
component.set("displayCustomHomepage", false);
}
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/custom-homepage">
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper mask-polygon">
<div class="custom-welcome-banner">
<h1 class="welcome-header-text">Välkommen till Sveriges idéburna byggrörelse</h1>
<p>Här kan du se färdiga och planerade projekt, hitta kunskap, få råd - och få kontakt med andra som bygger och bor ihop över hela landet.</p>
</div>
</div>
{{whos-online}}
{{search-menu}}
<div class="two-column-layout">
<div>
(ここに地図画像の独自のコードがあります。省略します)
</div>
<WANTED DIV>
(ここにフィードを配置したいです。例えば {{categories-topic- list topics=latest filter=“latest” limit=“10” … }} のようなもの)
</WANTED DIV>
</div>
{{/if}}
</script>
これまでのところ順調です。ページは以下のようになります。
問題は、現在のフィードを制御できないことです。これは単にデフォルトのフィードであり、カスタム CSS で幅と位置を大まかに調整して、左側の地図のスペースを確保しています。例えば、現在は無限に表示されます。最新の 10 件の投稿のみを表示したいのです。
私の質問は以下の通りです。
- 現在のフィードを非表示にするには、どのクラスを非表示にすればよいですか？
- 独自のコードで最新の投稿を追加するための正しい構文は何ですか？上記のコードの ‘WANTED DIV’ セクションを参照してください。
ライブサイト: https://bygg.boihop.co/
この件について、ご協力いただければ幸いです。