Шапка бренда

||||
-|-|
:discourse2: | Сводка | Brand Header добавляет дополнительную верхнюю шапку для брендинга с вашим логотипом, навигационными ссылками и иконками социальных сетей для мобильных и десктопных версий. Логотип бренда может быть изображением или текстом.
| :eyeglasses: | Предпросмотр | Предпросмотр в Discourse Theme Creator |
:hammer_and_wrench: | Ссылка на репозиторий | https://github.com/discourse/discourse-brand-header
:open_book: | Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse

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

Возможности

Предпросмотр на десктопе:

Предпросмотр на мобильном:

Настройки

| Название | Описание
|-|
| название бренда |
| URL веб-сайта |
| URL мобильного логотипа |
| ссылки | Текстовые ссылки, отображаемые в шапке
| иконки | Ссылки с иконками, отображаемые в шапке
| пользовательские иконки FontAwesome 6 | Список иконок FontAwesome 6, используемых в этом компоненте темы
| показывать панель на мобильном |
| выход плагина |


Использование иконок Font Awesome 6

Чтобы иконки Font Awesome 6 корректно отображались в этом компоненте темы, вам нужно добавить их в 3 места в Discourse:

  1. Настройку сайта svg icon subset
  2. Настройку custom font awesome icons в компоненте
  3. Настройку icons в компоненте

Кроме того, для некоторых иконок Font Awesome 6 вам может потребоваться указать префикс fa или fab перед названием иконки (например, «fab-bluesky»), поскольку некоторые иконки относятся к определенному подмножеству. Подробности об этом использовании см. в статье Мы обновляем наши иконки до Font Awesome 6!.

После того как вы добавите эти иконки во все три места, вы должны увидеть их корректное отображение в компоненте темы Brand Header.

:discourse2: Размещено у нас? Компоненты тем доступны для использования на наших тарифах Standard, Business и Enterprise.

87 лайков
Is there a setting to add Facebook, twitter , Instagram profile links?
Beginner's guide to using Discourse Themes
Reuse Discourse Hamburger Functionality
Introducing Font Awesome 5 and SVG icons
How to use brand header html in my WordPress site
WordPress in a Discourse iFrame?
How to create additional header?
How to put a backlink to our company website above the top-menu in discourse?
Can I add a icon and link back to my homesite at the top bar
Customise home login page
How to finely scroll out custom header?
Login with federated social networks
Customize Your Site Branding
Need to create good-looking front page with Discourse login option
How I can add a custom header
Horizon interaction with Brand Header
How to add a directory of people/businesses to my theme?
How to create custom theme component?
Custom website header with forum
Adding header in theme messes up topic progress bar (when docked)
Structuring a multilingual community
Are these possible only with a custom theme?
Horizon Theme
How do I move an image/banner to the VERY top of the page?
Combining Brand Header and Header Submenus Plugins
Brand Header breaks chat reply box on mobile (iOS)
Air Theme
Quick access to bookmarks and messages on user menu
Why does the logo navigate to Discourse home not main site home
TavoWEB theme for Discourse
How to make your side have a side-bar and external links
Display name of forum
DiscoTOC & Brand Header - using together
TypeError: Discourse._registerPluginCode is not a function
Brand header theme component breaks page layout on static and no_ember pages
Brand header theme component breaks page layout on static and no_ember pages
How to add top menu bar like try.discourse.org
Dropdown links in existing Header
Insert Link to External Website
Structuring a multilingual community
Help needed with theming and logo
How do the Links and Icons settings work?
Customizing your site with existing theme components
How to embed Discourse in Wordpress?
Customize the header with links, icons, or menus
🌅 Introducing Horizon, our newest theme

@vinothkannans Great component!

One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.

5 лайков

I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.

Is there a fix for this?

In the mobile view, when we click on the hamburger menu, if then we click outside of the menu, the hamburger menu would be expanded even more, instead of closing. and also it has some other glitches. for example when hamburger menu is open and we click on a topic link.

1 лайк

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

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

Привет! Не могли бы вы добавить возможность отображать панель под заголовком, а не над ним?

1 лайк

Конечно, я приму это, если вы сможете отправить это через PR.

4 лайка

Есть какие-нибудь подсказки, что именно нужно изменить? Я раньше никогда не работал с Discourse.

1 лайк

https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194

Вам следует подключить виджет в коннекторе «below-site-header» вместо «above-site-header». Это также потребует нескольких дополнительных настроек.

6 лайков

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

4 лайка

Я объединил ваш другой PR, который добавляет необязательный параметр target для ссылок.

8 лайков

Это уже реализовано в следующем коммите

4 лайка

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

Лично я наблюдал это на полностью обновлённом Moto (g7) Power с Android 9 и на полностью обновлённом iPhone 8.

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

2 лайка

Спасибо! Оказывается, у меня не было времени подготовить полноценный PR. Как вы думаете, сможете ли вы добавить настройку заголовка сайта выше/ниже?

1 лайк

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

1 лайк

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

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

Возможно ли сделать это более интуитивно понятным, например:

  • Автоматически закрывать меню при нажатии на ссылку в меню на мобильных устройствах?
  • Добавить кнопку «Закрыть меню» на мобильных устройствах?
1 лайк

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

1 лайк

Привет!

Мы экспериментируем с различными макетами между двумя версиями одного и того же форума (discourse 3.2.0.beta4-dev и discourse 3.3.0.beta1-dev).

Вот пример без пользовательского CSS, только исходные компоненты.

Изменилась ли разметка HTML в Discourse между этими двумя версиями?

Также в v3.3 нарушено поведение «выезжающей» панели (slide-in).

2 лайка

У меня та же проблема в Discourse 3.2.2. Поведение выезда сбоку не работает.

Учитывая даты постов выше, подскажите, компонент темы brand-header всё ещё поддерживается?

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