精选话题

不,不能直接实现。您可以选择类别,但只能用于限制主题的选择。我不想添加更多逻辑来启用此选项。

一种变通方法是使用通配符自动标记所有新主题:

或者使用不同的组件。如果您能更详细地解释您想要实现的外观,也许我可以推荐一个。

感谢您的回复。

如果我将来决定移除该组件,为其添加一个特定的标签将导致长期的冗余。

因此,该组件的最佳逻辑是,如果没有指定标签,则自动选择最新帖子。

万一我将来移除该组件,我将不得不查找所有使用“featured”标签的帖子并取消它们的标签。

您可以非常快速地从主题中移除标签,方法是按标签过滤并使用批量操作选项:

I think it only grabs the ones visible on the screen, so I often scroll down to load them all before applying the bulk action. :+1:

1 个赞

嗯,你也可以直接删除那个标签,它就消失了 :headstone: :upside_down_face:

1 个赞

总体而言:该组件是从官方的 精选图块组件 分叉出来的。我创建它的全部想法和动机是为了拥有一个具有该组件所提供功能的卡片式外观。我认为我不会在原始组件的基础上添加任何更多功能性特性。原因是,就代码维护而言,我希望能够直接遵循官方组件的兼容性修复。

2 个赞

如果有人感兴趣:我们修改了特色卡片组件,允许用户水平滚动浏览所有特色主题(使用的主题来源:最新)。

使用的 CSS 如下:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    -ms-overflow-style: none; /* Hide the scrollbar for MS Edge */
    scrollbar-width: none; /* Hide the scrollbar for Mozilla Firefox */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

.featured-card {
    scroll-snap-align: start;
}

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Hide the scrollbar on Webkit based browsers (Chrome, Safari, etc) */
    -webkit-overflow-scrolling: touch; /* On touch screens the content continues to scroll for a while after finishing the scroll gesture */
}
3 个赞

功能请求。

能否提供一个选项,使其显示在特定的类别页面上?

例如,如果查看休息室,则此处显示精选卡片

显示的图片是类别图片。我正在使用 Air 主题。应用程序显示与该类别相关的精选主题,来自其子类别 Frontier news。

卡片图片推荐的图片尺寸是多少?

太好了,但它不支持 FKB 主题。

如何设置标题的最大字符数?我在卡片上显示了摘要,它超出了带有标题和摘要文本的框。

没有控制最大标题字符数的设置。但是,您可以增加“卡片高度”设置以适应内容。
image

如果您不想每次都进行调整,可以尝试在您的主题或组件中使用此 CSS。
它消除了卡片高度限制,并且您有以下选项:

  • 您更喜欢拉伸卡片
  • 图像最大高度。
  • 最大标题行数
  • 最大摘录行数
.featured-cards-container {
    $stretch_card: "true";
    $max-image-height: 10em;
    $max-title-lines: 3;
    $max-excerpt-lines: 4;
    
    height: inherit; 
    max-height: inherit;
    
    .featured-card {
        @if $stretch_card == "true" {
            height: inherit;
        }
        
        a.card-content .card-details {
            .topic-title {
                -webkit-line-clamp: $max-title-lines;
            }
            
            .topic-excerpt {
                -webkit-line-clamp: $max-excerpt-lines;
            }
        }

        a.card-content .card-image {
            height: #{$max-image-height};
            min-height: #{$max-image-height};
        }
    }
}

希望这有帮助!

1 个赞

谢谢,发布前我actually had your defined height of 350,但我刚试了你的代码,它似乎能适当地调整卡片大小以适应带有摘要的标题。

2 个赞

挖出这个,太有才了!有没有办法也启用手机视图?

不知何故,水平滚动不再起作用了。有人能在桌面和移动设备上使其正常工作吗?

1 个赞

试试这样做:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    scroll-snap-type: x mandatory;
    scroll-padding: 1.25rem;

    /* 使滚动条可见但不可见 */
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;

    /* 或者显示它但很细 */
    // scrollbar-width: thin;
    // scrollbar-color: #91919185 transparent;

    /* 确保滚动条位于容器正下方,而不是最大高度下方。 */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

我不确定在桌面上隐藏滚动条是否是个好主意;访问它可能会令人沮丧。

细而可见(也使背景透明)对我来说看起来不错。你觉得呢?

3 个赞

这在桌面上现在可以用了!但在手机上不行。我已经用 CSS 勉强实现了手机上的水平滚动,但效果不是很理想 :smiley:

我还添加了字体调整,因为标题字体大小对于小屏幕来说太大了

.featured-cards-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
    align-content: flex-start;
    overflow-x: auto;
    max-height: 350px;
}
.featured-cards-container .featured-card {
    min-width: 90%;
    
}


.featured-card a.card-content .card-details .topic-title {
    font-size: var(--font-up-1);
}
3 个赞

有什么方法可以使整个元素可折叠,并复制与 Homepage Feature 组件相同的行为?

“‘显示摘要为空’只发生在我身上吗?”

我已经更新了此组件,并将其存储库移至 GitLab:https://gitlab.com/manuelkostka/discourse/components/featured-topics。

新版本采用了略有不同的设计方法,从主题设置中移除了选择样式选项。相反,它提供了两种基本的布局安排(卡片和列表)以及一个更简洁的模板,用于通过 CSS 添加自定义样式声明。

如果您想继续使用之前的组件,可以在 GitHub - nolosb/discourse-featured-cards 找到它。

3 个赞

这有点离题,但我认为这是一个很棒的方法。我很难不为组件提供大量的设置以实现定制化,而你应该让事情对用户来说简单,但仍然提供一种为高级用法/用户进行定制的方法。

3 个赞

我还没有在此组件上进行此操作,但另一种我喜欢的方法是提供自定义属性作为自定义样式的标准方法。例如,在 Manuel Kostka / Discourse / Components / Extra Banners · GitLab

在组件上,您可以使用自定义属性的占位符和默认的备用值来声明样式:

background: var(--extra-banners-background, var(--secondary));
4 个赞