そのようなことを実現するにはどうすればよいでしょうか？
カテゴリに画像を追加すると、すべてが縮小されて見苦しくなってしまいます。
カスタムプラグインなどはありますか？
Have a look at Category Banners. It is a theme component that you can install on your site to add a banner to your categories. The “Additional CSS styling” section at the bottom of the topic gives details about how to set a background image for the banner.
From the looks of it it seems like thats a banner for the category, i need one that shows the section, to explain myself better…
https://forum.fivem.net/categories
thats what i want
This will require some custom work. Have a look at the theme guide if you want to do it yourself or create a topic in the marketplace category if you want to hire someone to do it for you.
これが彼らが使っているものですが、動作させることができません
discourse-misc-html-css (2).zip (2.5 KB)
CSS と Head タブの両方で、編集すべきリンクやアイテムが多数ありますが、対応されましたか？
これが現在 FiveM で使用されているカスタム CSS です。これは管理チームから送られてきたものですが、どうすれば動作させることができるのか見当がつかません。
discourse-misc-html-css (2).zip (2.5 KB)
実は、この件についてしばらく取り組んでいて、まあまあ動くようになりました
Pic
正直なところ、とてもよく動いています
ただ、トップ部分で何らかの理由でカテゴリが一部重複して表示されてしまいます
これをどう直せばいいでしょうか？カテゴリの重複をなくす方法はありますか？
私の設定ファイルは以下です
discourse-misc-html-css.zip (2.5 KB)
これで少なくとも自分では修正できました
まず、このファイルをダウンロードしてください
discourse-misc-html-css (2).zip (2.5 KB)
もし、このファイルをサイトに追加する方法がわからない場合は、まずこちらのガイドを確認してください
次に、Misc/HTML+CSS の「Common」セクションを開き、CSS でいくつかの設定を調整します。
まず、以下の行をコピーしてください
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
次に、バナーに表示したい名前を変更します。
私の例では、test1 を使用します
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
これで CSS セクションは完了です。
次に、 セクションに移動します。
そして、以下の部分までスクロールします
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
<div class="category-thing fivem"> という名前のセクションを見つけます。
次に、以下をコピーします
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
これを自分の設定に合わせて変更します。私の例では test1 を使用しました。
同じように以下のように変更します
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
次に、以下までスクロールします
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
そして、以下を見つけます
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
これを自分の設定に合わせて変更します。私の例では fivem を test1 に変更しました。
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
さらに下にスクロールして、以下のセクションを見つけます
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
ここで、先ほど作成したカテゴリフラグを追加します。これを追加するのは、以下のような重複カテゴリの問題を防ぐためです
私の例では test1 を追加します
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
次に下にスクロールして、以下の名前のセクションを見つけます
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
ここで fivem を希望の名前に変更します。私の例では test1 に変更します。
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
これで完了です。
次に、カテゴリのスラッグを変更します。私の例は以下の通りです
これで、そのカテゴリは test1 バナーの下に表示されます。
他のすべてのカテゴリは、この例では core CFX.RE バナーの下に表示されます。
余談ですが、私が現在サイトで使用している設定はこちらです
discourse-misc-html-css.zip (2.5 KB)
確認したい場合は、こちらをご覧ください
https://forum.tgacommunity.com/
また、このトピックを「解決済み」にマークしていただけませんか？
これで皆さんのお役に立てれば幸いです。何か質問があれば、こちらまたは PM で気軽に聞いてください。
皆さん、こんにちは。@manuel がこのコードを拡張し、自分のフォーラムで簡単に使用できるようにするテーマコンポーネントを作成しました。
しかし、どちらの方法でも機能し、どのように行うかはあなた次第です。そして、どちらの方法でも同じ結果が得られます。