Flarumのカテゴリーページの各カテゴリーに背景を追加

2018.07.29 5,134 0

この記事は Flarum 公式フォーラムの投稿を元にしており、CV 7.4.0 で動作を確認済みです。その他のバージョンについては各自でお試しください。

カテゴリーページの各カテゴリーに個別の背景を追加します。これを実現するのは難しくありませんが、問題が一つあります。これを使用すると、タグの説明を使用できなくなります。

以下のファイルを編集します。

PLAINTEXT

vendor/flarum/flarum-ext-tags/js/forum/dist/extensions.js

以下の内容を：

JavaScript

return m(
    'li',
    { className: 'TagTile ' + (tag.color() ? 'colored' : ''),
      style: { backgroundColor: tag.color() } },
    m(
        'a',
        { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
        m(
            'h3',
            { className: 'TagTile-name' },
            tag.name()
        ),
        m(
            'p',
            { className: 'TagTile-description' },
            tag.description()
        ),

次のように変更します：

JavaScript

return m(
    'li',
    { className: 'TagTile ' + (tag.description() ? 'colored' : ''),
      style: { background: tag.description() } },
    m(
        'a',
        { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
        m(
            'h3',
            { className: 'TagTile-name' },
            tag.name()
        ),

その後、管理画面の — 外観設定 — カスタムスタイルに次の内容を追加します：

CSS

.SelectTagListItem-description {
    display: none;
}

使用方法：管理画面の「カテゴリー設定」で、各ノードの説明に次の内容を入力します：

PLAINTEXT

url(http://xxx.com/xxx.jpg)

http://xxx.com/xxx.jpg を、各ノードに設定したい背景画像に置き換えます。

最終的な効果は次の画像のとおりです：

効果画像

Flarumのカテゴリーページの各カテゴリーに背景を追加

コメント

コメントを投稿