Компонент темы заголовков категорий Discourse

Вот PR для поддержки логотипов категорий в тёмном режиме:

Меня это тоже немного беспокоило. Небольшой пользовательский CSS решает проблему:

// заставить ссылку «Читать далее» в заголовках категорий использовать тот же цвет, что и текст краткого содержания

.category-about-url a {
  color: inherit;

}
2 лайка

Моя последняя пожелание насчёт ссылки «Читать далее»: показывайте её только если есть дополнительный контент. У меня есть длинные страницы категории «О нас» и короткие, и я не хочу предлагать ссылку, ведущую никуда.

(Я не знаю, выполнимо ли это. Возможно, это слишком много для TC.)

1 лайк

Когда отображается полное описание категории, я также сталкиваюсь с этой проблемой в Theme Creator и на моём dev-окружении. Я занимаюсь этим вопросом. Подозреваю, что причина в том, что маршрут меняется, а отслеживаемая переменная — нет.

ОБНОВЛЕНИЕ: Я добавил функционал раскрытия/сворачивания для описаний категорий здесь. @nathank Также исправил баг в:

С небольшой подсказкой от Ask Discourse по использованию willDestroy вместе с сервисом маршрутизации.

2 лайка

Вау, Нейт! :open_mouth: 55 коммитов и один PR за один вечер… невероятно.
Я буду следить за мержем и с нетерпением жду возможности это попробовать!

1 лайк

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

2 лайка

Это отличное дополнение! :heart:

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


(Кстати, возможно, стоит также добавить переводы для текста ссылки?)

2 лайка

PR объединён :git_merged: !

Понял :+1: . Я займусь этим.

3 лайка

Нэйт, функционал показать больше/меньше просто отличный, спасибо!

Будет здорово, если можно будет сделать так, чтобы эта ссылка появлялась только при наличии дополнительного текста, но я, в принципе, могу и просто писать более длинные описания :laughing:

Я заметил пару проблем, которые вы, возможно, еще не успели заметить:

  • ссылки категорий и тегов не отображают свои SVG-иконки
  • изображение категории не подгружается, поэтому отображается иконка сайта по умолчанию
(скриншот)

Еще один небольшой момент, с которым мне удалось справиться: ссылки в тексте «О нас» не наследовали цвет текста, как, например, упомянутая ранее ссылка показать больше ранее. Этот CSS-код стилизует текстовые ссылки, не затрагивая ссылки категорий и тегов:

// стилизация текстовых ссылок, чтобы исключить ссылки категорий и тегов
.category-title-header .category-title-description 
a:not([data-type="tag"], [data-type="category"]) {
  color: inherit;
  text-decoration: underline;
}
(скриншоты)

image
image

Я действительно впечатлен обновлениями и надеюсь, что проблемы с SVG и иконками решаются простым исправлением.

Интересно. Вы знаете, было ли это раньше?

Я проверю. У меня тоже возникла эта проблема. Попробуйте пока отключить настройку «показывать логотип сайта», это, кажется, решает проблему.

Спасибо. Было ли это так раньше, и произошло ли какое-то изменение?

Попробуйте временно отключить настройку «Показывать логотип сайта», это, похоже, решает проблему.

Это сработало — спасибо! Мне следовало поэкспериментировать с большим количеством настроек.

Что касается иконок ссылок SVG и цветов текста ссылок, я не могу сказать, как это работало раньше — у меня никогда не было ссылок в кратком разделе текста «О нас», но теперь они есть в расширенном разделе «Читать далее».

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

1 лайк

Нэйт, есть ли у тебя мысли по поводу проблемы с SVG-иконками заглушек категорий/ссылок?

image image

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

Сравнение ссылки категории

Ссылка на категорию в заголовке:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>Wild Speculations</span>
</a>

Ссылка на категорию в теме:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square" aria-label="Wild Speculations">
  <span class="hashtag-category-square hashtag-color--category-5"></span>
  <span>Wild Speculations</span>
</a>

и

Сравнение ссылки тега

Ссылка на тег в заголовке:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>ai</span>
</a>

Ссылка на тег в теме:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag" aria-label="ai">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-5 svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <use href="#tag"></use>
  </svg>
  <span>ai</span>
</a>

Я был занят последние несколько дней (разберусь с этим завтра). Подозреваю, что это включено в описание категории. Если использовать полное описание, проблема всё ещё возникает?

Я ценю, что вы добровольно жертвуете своим временем, и не хочу вас надоедать. Я проверил, можно ли решить это самостоятельно. (К сожалению, нет. :flushed_face:)

Но да, проблема всё ещё возникает, когда активна опция Показать полное описание категории.

1 лайк

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

@ToddZ Если вы посмотрите на этот пример официального компонента Category Banners (который, как я думаю, использует Meta), то там тоже есть эта проблема.

Понял…! И кто-то упоминает об этой проблеме:

Я установил «Баннеры категорий», чтобы проверить, работают ли иконки категорий, но они не работали. Иконки как категорий, так и тегов отображаются как заглушка, точно так же, как и в случае с заголовками категорий. Это происходит независимо от выбранного в настройках выхода.

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

1 лайк

Я только что протестировал совместимость с темой Horizon. В целом всё работает, но единственная проблема заключается в том, что текущий плагин-выход, используемый компонентом темы заголовков категорий, находится внутри контейнера list-controls в теме Horizon. Из-за этого весь заголовок категории остаётся зафиксированным.

Предлагаемое решение — изменить плагин-выход или добавить опцию для выбора другого плагин-выхода вне контейнера list-controls, например, выход discovery-list-controls-above.

Я могу создать PR, если хочешь, @NateDhaliwal

2 лайка

Интересно. Спасибо, что подняли этот вопрос! Я разберусь в этом.

1 лайк

Я отправил PR для этого компонента темы. Немного неуклюже вышло, поэтому в одном PR сразу две разные вещи :sob:

  • Фича: добавление плагин-аутлета после описания заголовка категории
  • Исправление: компонент темы не использовал S3 CDN для фоновой картинки

Посмотрите, пожалуйста, и сделайте мерж.

2 лайка

Выглядит отлично! Я уже слил это. (Также извините, что не заметил это раньше)

1 лайк