カテゴリバナーの追加方法

サポート
10

これで少なくとも自分では修正できました

4d34f94999cfa96f6578d9b3d6d33707
4d34f94999cfa96f6578d9b3d6d337072284×1940 911 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));
});

これで完了です。

次に、カテゴリのスラッグを変更します。私の例は以下の通りです
2bf89bcdcb2f897364bb984c82d4e343

これで、そのカテゴリは test1 バナーの下に表示されます。

他のすべてのカテゴリは、この例では core CFX.RE バナーの下に表示されます。

余談ですが、私が現在サイトで使用している設定はこちらです
discourse-misc-html-css.zip (2.5 KB)

確認したい場合は、こちらをご覧ください
https://forum.tgacommunity.com/

また、このトピックを「解決済み」にマークしていただけませんか？

これで皆さんのお役に立てれば幸いです。何か質問があれば、こちらまたは PM で気軽に聞いてください。

「いいね！」 4