Tutorial/教程 XF主题列表的网格视图布局

[oksgo]

​

只需将以下代码添加到主题的extra.less模板中即可。

//- Hizli ozelestirme seçenekleri
    @xgt-konu-ap: transparent;
    @xgt-konu-secilmis-ap: rgb(255, 248, 238);
    @xgt-konu-golgesi:  0 1px 4px rgba(0, 0, 0, 0.28);
    @xgt-konu-border: solid 1px rgba(0, 0, 0, 0.01);
    @xgt-konu-radius: 4px;
    @xgt-konu-onemsiz-metin: rgb(171, 171, 171);
    @xgt-konu-goruntule-ikon: '\f3e5';
    @xgt-konu-yanit-ikon: '\f06e';
//- Hizli ozelestirme seçenekleri

[data-template="forum_view"]
{
    @media (min-width: @xf-responsiveWide)
    {
        .structItem.is-mod-selected
        {
            background: @xgt-konu-secilmis-ap;
            opacity: 1;
        }
          
        .structItem-title
        {
            text-overflow: ellipsis !important;
            max-width: 50ch;
            overflow: hidden;
            white-space: nowrap;
        }
 
        .structItem--thread
        {
            background:@xgt-konu-ap;
            border: @xgt-konu-border;
            border-radius: @xgt-konu-radius;
            box-shadow: @xgt-konu-golgesi;               
            box-sizing: border-box;           
            border-collapse: collapse;   
            display: inline-block !important;
            position: relative;
            width: 100%;
            height: auto;
            margin: 9px 0px 0px 6px;
            max-width: 49% !important;
            vertical-align: top;
            overflow: hidden;
        }
      
        .xgt-konu-metalar
        {
            display: block;
            width: auto !important;
            margin-top: -13px;
        }

        .structItem-cell--meta
        {
            float:left;
            .xgt-konu-metalar();
        }

        .structItem-cell--latest
        {
            margin-bottom: 15px;
                float:right;
            .xgt-konu-metalar();
        }

        .structItem-cell--meta > .pairs.pairs--justified > dd
        {
            float: left;
            text-align: right;
            max-width: 100%;
        }
        .structItem-cell--meta dl
        {
            &.pairs.pairs--justified
            {
                float:left;
            }
        }

        .structItem-cell--latest
        {
            margin-bottom: 0px !important;
        }

        .structItem-cell--meta
        {   
            dt
            {
                font-size:0px;
            }

            dd
            {
                margin-left:18px;
                font-size: 12px;
                color: @xgt-konu-onemsiz-metin;
            }
        }

        .structItem-cell--meta .structItem-minor dt:before,
        .structItem-cell--meta dt:before
        {
            color: @xgt-konu-onemsiz-metin;
            font-family: 'Font Awesome 5 Pro';
            font-size: 12px;
            position: absolute;
            margin-left: 0px;
        }

        .structItem-cell--latest
        {
            margin-top: -34px;
        }

        .structItemContainer-group
        {
            &.js-threadList
            {
                margin-bottom: 8px;
            }
        }

        .structItem-cell--main
        {
            .structItem-extraInfo
            {
                float: left;
                margin-left: -8px;       
              
                .iconic
                {
                    position: absolute;
                    right: 10px;
                    top: 5px;
                }
            }
        }

        .structItem-cell
        {
            &.structItem-cell--icon
            {
                &.structItem-cell--iconEnd
                {
                    display: none;
                }
            }
        }

        .structItem-cell--meta
        {
            dt:before
            {
                content: @xgt-konu-goruntule-ikon;
            }
 
            .structItem-minor dt:before
            {
                content: @xgt-konu-yanit-ikon;
            }
        }       
    }
}

 

[ChatGPT-AI]

您好！您所给出的代码是用于在主题的额外CSS模板（extra.less）中实现的功能。这段代码主要用于定制主题列表的网格视图布局样式。

代码中给出了一些变量和样式设置，您可以根据需要进行调整。例如，@xgt-konu-ap指定了帖子的背景颜色，@xgt-konu-border指定了帖子的边框样式，@xgt-konu-radius指定了帖子的边框圆角半径等等。您可以根据自己的需求更改这些值来定制主题列表的网格视图布局的样式。

此外，代码中使用了@media查询来针对不同的屏幕尺寸应用不同的样式。@media (min-width: @xf-responsiveWide)表示当屏幕宽度大于等于@xf-responsiveWide时，应用下面的样式。您也可以根据自己的需求进行调整。

在代码的结构上，首先使用了[data-template="forum_view"]选择器来匹配主题列表的网格视图布局，然后使用了多个选择器和样式设置来定制不同部分的样式，比如帖子容器的样式、元数据的样式、图标的样式等等。

总之，如果您想要使用这段代码来定制您的主题列表的网格视图布局样式，只需将代码添加到主题的extra.less模板中即可。如果您有任何问题或需要进一步的帮助，请随时告诉我。