注目のカテゴリヘッダー

[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)]

テーマコンポーネントをインストールしましたが、メインコンテンツ内に収まらず、場違い（醜い）に見えます。エアテーマを使用しています。
コンポーネントをダークカラーのコンテナ内に表示するには、どこを編集すればよいか教えていただけますか？

このようになります。

このように表示したいです。

[AkaiBukai]

こんにちは。
Discourseとテーマ設定を始めたばかりです。
ここで見られるような、トップにカードのようなものを表示したいです：Secret World Legends - Funcom Forums
このテーマコンポーネントは、その方向性には役立つようです。
インストールして、表示したいカテゴリを選択できましたが、タイトルしか表示されませんでした。
まだ画像を設定していないので、当然のことです。

私の質問（おそらく誰も尋ねていないので、愚かな質問でしょう）は、カテゴリの画像を設定するにはどうすればよいですか？
そして、それらを「アップロード」するにはどうすればよいですか？

どんな助けでも感謝します。

[Heliosurge (Dan DeMontmorency)]

カテゴリを作成するために使用したカテゴリ設定に移動し、画像タブを選択します。

画像をアップロード

[Vasan_Cannane]

Discourse は初めてなので、Featured Categories Header について質問があります。

これを実現しようとしていますが、できません。

数行のコードが提供されています。

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [各アイテムのリンク、ロゴ、名前...]
      }
    }
  }
}

アイテムのリンク、ロゴ、名前をどのように指定できますか？

どなたか明確にしていただけますか？

よろしくお願いします。

[Arkshine]

こんにちは、ようこそ

例のような画像を表示したい場合は、テーマコンポーネントの設定で関連するカテゴリを選択し、それぞれに画像が割り当てられていることを確認する必要があります（カテゴリ設定 → 画像 → カテゴリロゴ画像）。

[Vasan_Cannane]

これは「Featured Categories」テーマコンポーネントの設定ですが、何も見つかりません☹️

[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;
}