Рекомендуемые темы

Нет, не напрямую. Вы можете выбирать категории, но только для ограничения выбора тем. Я бы не хотел добавлять дополнительную логику, чтобы включить эту опцию.

В качестве обходного пути можно автоматически добавлять теги ко всем новым темам, используя подстановочный знак:

Или использовать другой компонент. Если вы сможете немного подробнее описать желаемый внешний вид, возможно, я смогу что-то порекомендовать.

Спасибо за ваш ответ.

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

Поэтому наиболее логичным решением для компонента будет автоматический выбор последних постов, если тег не указан.

В случае, если я когда-нибудь удалю компонент, мне придётся искать все темы с тегом «featured» и удалять этот тег у всех них.

Вы можете очень быстро удалять теги из тем, фильтруя по тегу и используя опции массовых действий:

Похоже, что система захватывает только те темы, которые видны на экране, поэтому я часто прокручиваю страницу вниз, чтобы загрузить все темы, прежде чем применять массовое действие. :+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; /* Скрыть полосу прокрутки для MS Edge */
    scrollbar-width: none; /* Скрыть полосу прокрутки для Mozilla Firefox */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

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

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Скрыть полосу прокрутки в браузерах на движке Webkit (Chrome, Safari и т.д.) */
    -webkit-overflow-scrolling: touch; /* На сенсорных экранах контент продолжает прокручиваться некоторое время после завершения жеста прокрутки */
}
3 лайка

Запрос функции.

Можно ли добавить опцию для отображения этого на странице конкретной категории?

Например, при просмотре раздела «Лобби» карточки с избранным контентом отображаются здесь:

На изображении показано изображение категории. Я использую тему Air. Приложение должно отображать избранные темы, связанные с этой категорией, из её подкатегории «Новости Фронта».

Какой размер изображения рекомендуется для карточки?

Отлично, но он не поддерживает тему FKB

Как установить максимальное количество символов для заголовка? Я отображаю краткое описание на карточке, и оно выходит за пределы рамки вместе с текстом заголовка и краткого описания.

Настройки для ограничения максимального количества символов в заголовке нет. Однако вы можете увеличить параметр cards height, чтобы вместить контент.
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 лайк

Спасибо, у меня перед публикацией уже была установлена высота 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: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.

Новая версия использует немного иной подход к дизайну, исключив опции стиля выбора из настроек темы. Вместо этого она предлагает два базовых варианта макета (Карточки и Список) и более чистый шаблон для добавления пользовательских стилей через CSS.

Если вы хотите продолжить использовать предыдущий компонент, он доступен по адресу GitHub - nolosb/discourse-featured-cards · GitHub.

3 лайка

Это немного не по теме, но я считаю, что это отличный подход. Мне сложно не предлагать миллион настроек для компонента ради кастомизации, когда нужно сделать вещи простыми для пользователя, но при этом оставить возможность для продвинутой настройки опытным пользователям.

3 лайка

Я ещё не реализовал это в данном компоненте, но мне нравится другой подход: использовать пользовательские свойства (custom properties) в качестве стандартного способа настройки стилей. Например, как здесь, на Manuel Kostka / Discourse / Components / Extra Banners · GitLab :

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

background: var(--extra-banners-background, var(--secondary));
4 лайка