空气主题

主题
,
327

如何在主题列表中添加“查看次数”列

我绝不是开发者或程序员。我花了好几个小时使用 Google Chrome 的“检查元素”功能来玩弄 CSS 代码。我设法让“查看次数”列正确显示，并且还根据我的喜好调整了每个列的大小。您可以随意调整下面 CSS 代码中的宽度。我还添加了代码注释，以便您轻松区分哪个代码对应哪个列。对于每一列，都有两个区域（标题和行）。这些宽度需要匹配。

希望这对大家有帮助：@daming @bksubhuti @eddy2

说明

1. 创建一个新组件。

2. 复制此 CSS

请使用下面更新的 CSS，而不是 @jordan.vidrine 上面提供的代码。

选项 A) 仅为桌面版添加“查看次数”列（推荐）

  • 将 CSS 代码添加到“桌面”选项卡中。

选项 B) 为桌面版和移动版都添加“查看次数”列。

  • 将 CSS 代码添加到“通用”选项卡中。

选项 C) 仅为移动版添加“查看次数”列。

  • 将 CSS 代码添加到“移动版”选项卡中。

注意：如果您选择了选项 B 或 C……

在移动设备上，回复数、查看次数和活动这三列会占用过多空间并且显得拥挤。如果您需要在移动设备上显示，我建议移除这三列中的一列。您可以通过在下面 CSS 代码的标题和行区域中为要隐藏的列添加 display: none 来实现。

/* [主题] */

    /* 主题标题 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* 主题行 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [回复数] */

    /* 回复数标题 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* 回复数行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [查看次数] */

    /* 查看次数标题 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* 查看次数行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [活动] */

    /* 活动标题 */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* 活动行 */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine 如果您对我的 CSS 代码有任何修改建议，请告诉我。我不太确定我在做什么……但它确实有效 lol。

6 个赞