⬇️ Выпадающий заголовок

:mag: Обзор

Этот компонент темы позволяет добавлять ссылки с текстом, иконками и выпадающими меню в нативный заголовок вашего сайта Discourse.

Сообщения об ошибках, запросы новых функций и pull-запросы (PR) всегда приветствуются; спонсорская поддержка позволяет команде Pavilion ставить работу над этим компонентом в приоритет.

:computer: Код

Посмотреть репозиторий на GitHub

:gear: Настройки

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

Список всех настроек и подробные объяснения к ним можно найти здесь.

:thinking: Когда использовать

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

Если вам нужно много выпадающих ссылок, ознакомьтесь с Подменю заголовка, которое создает ряд меню заголовка над оригинальным заголовком Discourse.

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

:clapper: Предпросмотр

Десктоп:

Desktop

Мобильные устройства:
Из-за нехватки места на мобильных устройствах ссылки можно активировать, нажав на кнопку со стрелкой вниз.


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

50 лайков

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

<div id="ember7" class="d-header-wrap ember-view"><div></div></div>

2.9.0.beta4

(c99a6b10fb)

1 лайк

Привет, @Fma965, извините, я выпустил исправления для нескольких мелких ошибок, теперь всё должно работать. Дайте знать, как получится.

3 лайка

Теперь работает отлично, спасибо!

Одно замечание: поскольку здесь не используются теги a, вы не можете открывать ссылки средним кликом, как это можно сделать с плагином ссылок в заголовке. Есть ли причина, по которой вы не используете теги a?

2 лайка

@Fma965

Хм… это интересный момент. Я не использовал теги , потому что каждая ссылка представляет собой виджет, который может генерировать выпадающее меню, если в нём есть элементы. При использовании виджета я также применяю метод click(), который вызывает: DiscourseURL.routeTo(this.attrs.url);.

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

Интересно, есть ли способ добавить функциональность среднего клика для кликов по виджетам… придётся разобраться, возможно, кто-то из команды Discourse сможет подсказать идею.

1 лайк

Да, я так и подумал, что это связано с этим. Один из моих модераторов упомянул об этом, и я решил поднять этот вопрос здесь на всякий случай :slight_smile:

1 лайк

Привет, Киган, спасибо за создание этого компонента темы! Это идеальное связующее звено между компонентами «Custom Header Links» и «Header Submenu», которые я рассматривал ранее.

Есть ли возможность добавить опцию «target» (открытие в новой вкладке) для ссылок, которые мы добавляем туда, как в двух других компонентах темы?

1 лайк

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

1 лайк

Потрясающий компонент. Спасибо, что поделились :heart:

Привет! Спасибо за этот замечательный компонент :slight_smile:

Кажется, справа отсутствует отступ, когда вы не авторизованы на форуме. Вот как это выглядит:
Capture d'écran 2022-12-05 à 16.22.20

А если я авторизован, всё в порядке.

Надеюсь, это поможет улучшить его.

Есть ли шанс, что возможно:

  1. ссылки на вечные URL?
  2. ссылки с атрибутом target для открытия в новых вкладках, как упоминалось ранее?

Мы только что настроили новый экземпляр на серверах Discourse и пытаемся максимально точно сопоставить меню Discourse с нашим сайтом на WordPress.

Спасибо

1 лайк

Я только что установил этот компонент, чтобы заменить «Custom Header Links» и «Easy Footer components».

Мне этот компонент очень нравится, он отличный!

У меня работает. Вы имеете в виду цель _blank или что-то подобное, или внешние URL в целом (которые у меня работают)?

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

2 лайка

Я только что создал PR по этой проблеме:

Если вы перейдёте по ссылке выше, то увидите, что исправленный CSS работает как положено. :slight_smile:

3 лайка

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

Также я заметил, что если кликнуть по логотипу, текст и иконки ссылок меняются.

Прикрепляю короткое видео с примером:

Ссылка на страницу: https://oii.francescomancuso.it/forum/

Как это можно исправить? Заранее большое спасибо!

1 лайк

Отличный компонент темы! :chefs_kiss:

Он стал бы ещё лучше, если бы можно было настроить открытие ссылок в новой вкладке, а не в той же, как сейчас. :+1:

Привет, Francesco :wave:

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

Мне не удалось воспроизвести эту проблему на моём тестовом форуме.

Если вдруг у вас получится ещё раз проверить и сообщить, сохраняется ли проблема, пожалуйста, сделайте это. :slight_smile:

Если такая функция будет реализована, вы считаете, что она должна переопределять настройки пользователей относительно внешних ссылок (настройка Открывать все внешние ссылки в новой вкладке)?

image

2 лайка

Привет, большое спасибо за ваш ответ.

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

Хорошего дня :smiley:

2 лайка

Я думаю, это должно следовать предпочтениям пользователей. Если только администратор или модератор не изменил это :+1:

Итак… Я только что реализовал этот компонент темы, и уже получил довольно ценные отзывы от некоторых наших постоянных участников.

В общем, если я:

  • (1) сначала нажимаю на кнопку поиска в заголовке, а затем
  • (2) навожу курсор на выпадающее меню в заголовке.
    → Выпадающее меню появляется под полем поиска, что нам не подходит. В идеале поле поиска должно исчезать до того, как появится выпадающее меню.

А если я сначала навожу курсор на выпадающее меню в заголовке, а затем нажимаю на кнопку поиска, всё работает так, как я ожидал: (1) выпадающее меню исчезает и (2) появляется поле поиска.


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

Спасибо :+1:

1 лайк