FKB Pro - тема для соцсетей

Также вы можете обратиться за помощью по адресу:

https://ask.discourse.com

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

Это не работает для кнопки «Добавить тему»

1 лайк

Хм… у меня всё работает нормально при предпросмотре в Theme Creator.

Если вы хотите нацелиться конкретно на кнопку «Создать тему», попробуйте:

button#create-topic {
  // добавьте сюда что-нибудь...
}

После этого обновления, похоже, возникла проблема с этой частью CSS.

При наличии

  • личного сообщения
  • с тегом
  • просмотр без боковой панели

Ширина становится очень маленькой

Причина:

.navigation-topics,
.categories-list,
body[class*="tag-"]:not(.archetype-regular):not(.archetype-banner),
body[class*="category-"]:not(.archetype-regular):not(.archetype-banner):not(.archetype-banner):not(.archetype-private_message) {

в fkb-d-topic-list.scss применяется, хотя этого не должно быть.

Я подозреваю, что здесь не хватает :not(.archetype-private_message).
Однако я задаюсь вопросом, почему вообще так специфично нацеливаются на эти архетипы? Просто пытаются ли они определить, находится ли пользователь на списке тем (в отличие от просмотра темы?)?

2 лайка

Мне очень нравится эта тема, но либо я столкнулся с ошибкой, либо что-то сломал.

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

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

Заголовок:
[Ошибка] Тема вызывает сбой в Discourse 2026.4.0-latest — модуль 'ember-this-fallback/js-component' не найден

Описание:

После обновления Discourse до версии v2026.4.0-latest (коммит 19374472fd) тема FKB Pro вызывает критическую ошибку на стороне клиента, из-за чего форум становится частично неработоспособным. В Discourse отображается оранжевый баннер:

“由于主题/组件有错误,您的站点可能无法正常运行。由 ‘FKB Pro theme’ 引起。”
(Перевод: “Из-за ошибки в теме/компоненте ваш сайт может работать некорректно. Причина: ‘FKB Pro theme’.”)

Первопричина:

Тема (или один из её компонентов) по-прежнему ссылается на модуль ember-this-fallback/js-component, который был удалён из ядра Discourse в последних версиях. Этот модуль служил совместимым полифилом для устаревшего паттерна this-property-fallback в Ember, позволявшего использовать в шаблонах синтаксис {{foo}} вместо {{this.foo}}. Официально Discourse объявил об удалении этого полифила и потребовал от всех тем и плагинов перейти на явные привязки this..


Ошибка из консоли браузера:

Failed to load theme 4 from https://www.sitetalk.net/...
Error: Could not find module 'ember-this-fallback/js-component' imported from (require)

[THEME 4 'FKB Pro theme'] Error: Could not find module 'ember-this-fallback/js-component' imported from (require)
  at vendor.js
  at requireModule (vendor.js)
  at Object.lookup (chunk.js)
  ...
  at reportThemeError (chunk.js)

(Версия Discourse, отображённая в консоли: v2026.4.0-latest, Ember v6.10.1)


Окружение:

Параметр Значение
Версия Discourse v2026.4.0-latest (коммит 19374472fd)
Версия Ember v6.10.1
Тема FKB Pro (установка по умолчанию из этого репозитория)
Воспроизводимость Воспроизводится в 100% случаев после обновления Discourse

Надеемся, что разработчики смогут исправить эту проблему. Спасибо!!!

4 лайка

Здравствуйте! При обновлении Discourse до версии v2026.4.0-latest — Ember v6.10.1 возникла ошибка, из-за которой форум стал недоступен:

client-error-handler.js:109 [THEME 28 ‘FKB Pro theme’] Error: Could not find module ember-this-fallback/this-fallback-helper imported from (require)
at loader.js:247:1
at a (loader.js:258:1)
at requireModule (loader.js:24:1)
at Object.lookup (app.js:36:12)

Прошу помочь исправить эту проблему.

4 лайка

Есть ли какие-либо новости о том, когда это исправят?

Есть ли новости о том, когда это исправят?

У меня есть отчёт, что GitHub - literatecomputing/fkb-pro-theme: FKB Pro is a highly modified, detailed, professional social theme, but still user-friendly. · GitHub работает. Я отправил запрос на слияние.

4 лайка

Привет, Дон,

Прежде всего, тема просто потрясающая! Недавно я развернул FKB Pro для своего локального образовательного сообщества Jiwa.now, и карточный интерфейс выглядит великолепно и очень профессионально.

При тестировании на мобильных устройствах я заметил проблему с UX, касающуюся кликабельных областей на карточках тем. В настоящее время зоны для клика кажутся непоследовательными. Например, пользователи могут нажать на самые края карточки, чтобы открыть тему, но при нажатии на другие пустые области (например, справа от строки с аватаром или в середине подвала) ничего не происходит.

Такое взаимодействие «попадание-промах» вызывает у пользователей путаницу и часто приводит к случайным кликам, когда они просто пытаются пролистать ленту.

:light_bulb: Предложение для будущих обновлений: Было бы улучшением UX, если бы тема по умолчанию уточняла это — делая кликабельными только основной контент (Заголовок, Изображение и Выдержку) для входа в тему, при этом отключая фон карточки, чтобы предотвратить случайные клики при прокрутке.

Пока что, чтобы сделать работу с сенсорным экраном на мобильных устройствах на 100% надежной для моих пользователей, я написал фрагмент CSS, используя подход «белого списка» с pointer-events. Он полностью нейтрализует клик по фону и заново включает клики только на фактических интерактивных элементах.

Решил поделиться этим здесь для всех, кто хочет улучшить свои цели для касаний, и, возможно, это будет полезным ориентиром для разработчиков:

/* Исправление конфликтов кликов/касаний на мобильных карточках (Умный подход белого списка) */

/* 1. Нейтрализовать весь фон карточки, чтобы предотвратить клики при прокрутке */
.topic-list-item {
    pointer-events: none !important;
}

/* 2. Включить все нативные ссылки и кнопки (Аватары, Теги, Заголовки) */
.topic-list-item a,
.topic-list-item button {
    pointer-events: auto !important;
}

/* 3. Включить клики по изображениям */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. Включить всю область статистики подвала */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
    pointer-events: auto !important;
}

/* 5. Удалить любые перекрывающиеся псевдоэлементы растянутой ссылки */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
    pointer-events: none !important;
    display: none !important;
}

Спасибо!

Леонид

2 лайка

@Don, твоя тема просто отличная, спасибо за то, что поделился этим великолепным шаблоном :high_five:. Это было всего лишь небольшое сообщение с благодарностью, потому что для меня важно это отметить — ведь ты потратил на него часы работы ради удовольствия сообщества!!

3 лайка

Привет, @gilles :waving_hand: Спасибо за тёплые слова! :hugs:
У меня на профиле есть небольшой раздел поддержки, если вы когда-нибудь захотите поддержать мою работу: > ./support --coffee

1 лайк

FKB Pro v2 — Что нового?

Объявление вышло немного с опозданием — версия v2 была выпущена около двух недель назад — но, как говорится, лучше поздно, чем никогда. :slightly_smiling_face:

FKB Pro v2 представляет собой достаточно существенное обновление «под капотом». Хотя общий вид и ощущения остаются привычными, многие части темы были переработаны, оптимизированы и очищены.

:desktop_computer: Улучшенная верстка для десктопа

Список топиков на десктопе теперь использует более гибкую верстку, которая гораздо лучше работает с боковой панелью Discourse и собственной панелью FKB Pro.

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

:triangular_ruler: Лучшая адаптивность

Была проделана большая работа по обработке узких макетов и переполненного контента.

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

Мобильные макеты также были скорректированы, чтобы работать с фактической шириной контейнера, а не полагаться на размеры, основанные на области просмотра (viewport).

:high_voltage: Производительность списка топиков

Список топиков также получил оптимизации производительности.

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

Это особенно полезно для длинных списков топиков.

:locked_with_key: Улучшенное кэширование панели FKB

Панель FKB теперь использует специфичные для пользователя версионные ключи кэша.

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

Кэш также теперь более надежно обрабатывает истечение срока действия и недействительные записи.

:high_voltage: Более быстрая загрузка панели

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

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

:control_knobs: Новое управление состоянием панели

Состояние показа/скрытия панели FKB было перемещено в отдельный сервис состояния.

Это делает поведение более предсказуемым и упрощает поддержку, а также улучшает сам переключатель панели за счет:

  • корректного состояния aria-expanded

  • описательных меток

  • динамических иконок

  • сохраняемого состояния показа/скрытия

:wheelchair_symbol: Улучшение доступности

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

Переключатель панели теперь корректно передает свое состояние вспомогательным технологиям и предоставляет более полезные метки и заголовки.

:mobile_phone: Улучшения для мобильных устройств

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

Целью было сделать так, чтобы FKB Pro вела себя более естественно внутри адаптивной верстки Discourse, а не конфликтовала с ней.

:puzzle_piece: Более модульный код

Значительная часть обновления была посвящена также упрощению поддержки кодовой базы.

Панель FKB была разделена на более мелкие компоненты для таких элементов, как информация о пользователе, статистика, значки и посетители.

Карточки списка топиков также были переструктурированы в отдельные компоненты: заголовок, тело, мета-информация и секция списка.

Это не обязательно меняет то, что видят пользователи, но значительно упрощает будущую разработку.

Кратко

FKB Pro v2 — это не просто визуальное обновление. Это достаточно значительная переписывание нескольких частей темы с акцентом на лучшую адаптивность, производительность, кэширование, доступность и поддерживаемость.

Спасибо всем, кто использует FKB Pro, сообщает о проблемах или предлагает улучшения. :heart:

> ./support --coffee :heart:

2 лайка

У меня проблема с отображением на мобильных устройствах из-за описания. Я пробовал что-то исправить, но у меня не получается. Не знаю, единственны ли я в этом случае.

1 лайк

Мне удалось внести изменения в SCSS для мобильных устройств

/* Принудительно переносим текст описания */
.category-heading__content p,
.category-heading__content span,
.category-heading__content div {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

после этого, возможно, есть и более лучшие варианты :rofl:

Похоже, это проблема на уровне ядра. :thinking: У меня она воспроизводится и с темой по умолчанию.

Однако, на мой взгляд, этот раздел лучше обрабатывать с помощью grid. Что-то вроде:

.category-heading {
  &.--has-logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }

  &__content {
    min-width: 0;

    .badge-category__wrapper {
      max-width: 100%;
    }
  }
}

Это, кажется, более надёжно распределяет доступное пространство, особенно когда название категории длинное.

1 лайк