精选类别标题

[manuel (Manuel Kostka)]

	Summary	Feature categories on select views.
	Repository Link	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Cards view

List view

Settings

You can switch between the two above layouts or choose none and declare your own styles. You can also pick a route and set an outlet for the component.

Template

.featured-categories {
  &__container {
  }
  &__heading {
  }
  &__list-container {
  }
  &__category-container {
  }
  &__category-link {
    .category-logo {}
    .category-name {}
    .category-description {}
}

[Zup]

Handy TC, thank you.

A toggle to display only on homepage, display site logo, and display site description under logo would be desirable additions I imagine.

[manuel (Manuel Kostka)]

@Zup

A toggle to display only on homepage

Right now it shows on global lists (latest/new/unread/top). I was thinking of adding a drop-down to settings to select the global pages it should show. So, yes, on my roadmap when I have time for this again!

What would be the use case for having the logo? On the global pages you’re almost “home” anyways?

What I’d actually be most interested in adding is a mobile view. I didn’t have an idea for that so far, so it’s just not shown on mobile. Thanks for sharing If you’d have an idea for that!

[Zup]

@manuel

What would be the use case for having the logo?

Personalized aesthetics, and combined with a short description, would be quick insight about a community for new visitors, and serve as a reminder for existing users about the mission of the community. Positioned above or left of the links.

Displaying this on global links by default, as well as optionally per category (and tag pages?), would serve as a convenient navigation menu for prioritized areas - this would be my primary intended use. (By the way, the ability to include custom links - not only categories - would be another desirable feature.)

Personally, I find that most Discourse sites tend to be on the vague side especially upon initial visit, and by default I think Discourse navigation can be confusing for the average user. Generally my sites are designed to prioritize only a few areas (of many), and these proposed additions would make it very clear to the average user what those areas are, as well as easy to access.

[valsha (KingPin)]

Good component,
We have installed Versatile Banner, how can we move this component UNDER Versatile Banner?
So that the component Versatile Banner is shown first and then yours.
Thank you.

[manuel (Manuel Kostka)]

Yes, both components are rendered on the same outlet. I don’t know what causes the order of elements in that case? On my site it shows under the banner by default…

But you should be able to target the order with CSS declarations:

.below-site-header-outlet.categories-header {
  order: -1 !important;
}
.below-site-header-outlet.banner-themes {
  order: -2 !important ;
}

[manuel (Manuel Kostka)]

@Zup

By the way, the ability to include custom links - not only categories - would be another desirable feature

This sounds like many custom options though. I wouldn’t want to add that much logic to this component.
Building a featured navigation sounds more like a use case for a custom html banner to me? You’d just need some links with images and titles.

@Zup

I find that most Discourse sites tend to be on the vague side especially upon initial visit, and by default I think Discourse navigation can be confusing for the average user.

I agree with that! I think dedicated banners for visitors and for newly-signed-up users can be helpful and welcoming.

[JammyDodger]

There’s a ‘swap default positioning’ in the Versatile Banner settings, if that’s any good to you?

swap default positioning

If there is another banner-related component active, use this to swap its position with the Versatile Banner

[valsha (KingPin)]

Try this setting, it didn’t help me

[Rhod (Rodolfo)]

我安装了一个主题组件，但它不适合放在主内容中，看起来格格不入（很难看），我使用的是 air-theme。
您能帮我看看在哪里可以让该组件出现在深色容器内吗？

它看起来像这样：

我希望它看起来像这样：

[AkaiBukai]

你好，
我刚开始接触 discourse 和主题化。
我想在顶部添加一些卡片，就像您在这里看到的那样：Secret World Legends - Funcom Forums
这个主题组件似乎有助于实现这一目标。
我已经安装了它，并且能够选择我想要显示的类别，但我只得到了标题。
这是有道理的，因为我还没有设置任何图片。

我的问题（这可能是一个愚蠢的问题，因为还没有人问过）是如何设置类别的图片？
以及如何“上传”它们？

感谢您的任何帮助。

[Heliosurge (Dan DeMontmorency)]

转到您用于创建类别的“类别设置”，然后选择“图像”选项卡。

上传图片

[Vasan_Cannane]

您好，我是 Discourse 新手，关于“特色分类标题”我有一个问题。

我正在尝试实现这个效果，但无法做到。

他们提供了一些代码：

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [每个项目的链接、徽标、名称...]
      }
    }
  }
}

我该如何指定项目的链接、徽标和名称？

有人能解释一下吗？

谢谢。

[Arkshine]

您好，欢迎

如果您想显示示例中的图片，则需要在主题组件设置中选择相关类别，并确保每个类别都已分配图片（类别设置 → 图片 → 类别徽标图片）

[Vasan_Cannane]

这是“精选类别”主题组件的设置，但我找不到任何东西

[Arkshine]

您需要编辑您的类别设置：

点击“图像”选项卡：

…然后上传一张类别徽标图像！

[Vasan_Cannane]

我有一行产品，如何将产品分成多列？

[Arkshine]

这样吗？

如果是这样，请尝试使用此 CSS。将其添加到您的主题 CSS 或组件中。

在其中，您可以看到可以控制的变量。
您可以选择列数、元素之间的间隙以及每个元素的宽度。
元素会自动堆叠。

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 6;
    --ch-gap: 2.5em;
    --ch-width: 110px;

    display: grid !important;

    grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
    gap: var(--ch-gap) !important;

    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}

[Vasan_Cannane]

谢谢你的帮助。

我能再请求你帮个忙吗？

这就是我想要达到的效果。

你能帮帮我吗？

[Arkshine]

试试这样的方法：

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 4;
    --ch-gap-row: 2em;
    --ch-gap-col: 6em;
    --ch-width: 120px;
    
    & > div {
        width: var(--ch-width);
    }
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}