Flarum 分類頁面分類加入背景

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 替換成你所期望每個節點的背景圖片。

最終效果圖如下:

效果圖

評論

(0)

暫無評論,來說兩句吧

發佈評論

© 2026 一紙忘憂. 保留所有權利.

一紙忘憂的個人網站,關於技術探索與日常生活,記錄 Web 開發、後端與 DevOps 實踐,分享軟體工具、數位體驗,以及程式碼之外的見聞與思考。