Заголовок избранных категорий

[manuel (Manuel Kostka)]

	Сводка	Категории функций на выбранных представлениях.
	Ссылка на репозиторий	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Представление в виде карточек

Представление в виде списка

Настройки

Вы можете переключаться между двумя вышеуказанными макетами или выбрать ни один и задать свои собственные стили. Вы также можете выбрать маршрут и установить точку выхода для компонента.

Шаблон

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

[Zup]

Спасибо, Handy TC.

Думаю, были бы полезны переключатели для отображения только на главной странице, отображения логотипа сайта и отображения описания сайта под логотипом.

[manuel (Manuel Kostka)]

@Zup

Переключатель для отображения только на главной странице

Сейчас оно отображается в глобальных списках (последние/новые/непрочитанные/топ). Я подумывал добавить выпадающий список в настройках, чтобы выбрать, на каких глобальных страницах оно должно показываться. Так что да, это в моём плане работ, когда у меня снова появится на это время!

Какой сценарий использования для логотипа? На глобальных страницах вы ведь практически уже «дома»?

Что меня на самом деле больше всего интересует — это добавить мобильный вид. У меня пока нет идеи для этого, поэтому он просто не отображается на мобильных устройствах. Спасибо, что поделились! Если у вас есть идея на этот счёт — буду рад!

[Zup]

@manuel

Какой будет сценарий использования логотипа?

Персонализация внешнего вида, а в сочетании с кратким описанием — быстрое представление о сообществе для новых посетителей и напоминание для существующих пользователей о миссии сообщества. Размещается над ссылками или слева от них.

Отображение этого по умолчанию на глобальных ссылках, а также опционально по категориям (и страницам тегов?), послужит удобным меню навигации для приоритетных разделов — это будет моим основным предполагаемым использованием. (Кстати, возможность добавлять пользовательские ссылки — не только категории — была бы ещё одной желаемой функцией.)

Лично я считаю, что большинство сайтов на Discourse часто остаются неясными, особенно при первом посещении, и по умолчанию навигация в Discourse может быть запутанной для обычного пользователя. Обычно мои сайты спроектированы так, чтобы приоритет отдавался лишь нескольким разделам (из многих), и предлагаемые дополнения сделают для обычного пользователя совершенно очевидными эти разделы, а также обеспечат лёгкий доступ к ним.

[valsha (KingPin)]

Хороший компонент,
Мы установили «Versatile Banner». Как можно переместить этот компонент ПОД «Versatile Banner»?
Чтобы компонент «Versatile Banner» отображался первым, а затем ваш.
Спасибо.

[manuel (Manuel Kostka)]

Да, оба компонента отображаются в одном и том же outlet. Не знаю, что в таком случае определяет порядок элементов? На моём сайте по умолчанию они показываются под баннером.

Но вы можете управлять порядком с помощью CSS-объявлений:

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

[manuel (Manuel Kostka)]

@Zup

Кстати, возможность добавлять пользовательские ссылки — не только категории — была бы ещё одной желательной функцией.

Звучит как множество пользовательских опций. Я бы не хотел добавлять столько логики в этот компонент.
Создание выделенной навигации, на мой взгляд, больше подходит для использования пользовательского HTML-баннера? Вам понадобятся лишь несколько ссылок с изображениями и заголовками.

@Zup

Я считаю, что большинство сайтов на Discourse часто бывают довольно размытыми, особенно при первом посещении, и по умолчанию навигация в Discourse может сбивать с толку обычного пользователя.

С этим я согласен! Думаю, выделенные баннеры для посетителей и для недавно зарегистрировавшихся пользователей могут быть полезны и создадут гостеприимную атмосферу.

[JammyDodger]

В настройках Versatile Banner есть опция «swap default positioning», если это вам поможет?

swap default positioning

Если активен другой компонент, связанный с баннером, используйте это, чтобы поменять его позицию с позицией Versatile Banner.

[valsha (KingPin)]

Попробуй эту настройку, мне она не помогла

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

Вам нужно изменить настройки категории:

Нажмите на вкладку Images:

…и загрузите логотип категории!

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