Панель инструментов под заголовком сайта для каждой категории

[Heliosurge (Dan DeMontmorency)]

https://meta.discourse.org/t/welcome-link-banner/218743/28

Привет! Подскажите, пожалуйста, видели ли вы мою заявку на новую функцию?

https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge

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

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

Приношу извинения, я пока еще новичок и учусь в процессе.

[Canapin (Coin-coin le Canapin)]

@Dan DeMontmorency

Или, альтернативно, компонент темы, который позволял бы «пристыковывать» панель инструментов под главной панелью сайта при просмотре конкретной категории? Именно это я и ищу. Это могло бы быть похоже на пользовательские ссылки в заголовке от Джо, например.

Привет!

Не могли бы вы немного подробнее описать свои потребности? Что именно вы хотите разместить под заголовком Discourse?

Стандартный способ разместить «что угодно» под заголовком — это вкладка После заголовка при редактировании темы или компонента:

Но, похоже, вы имеете в виду что-то более динамичное и/или сложное.

Чем больше информации вы предоставите, тем более полезными будут ответы

[Heliosurge (Dan DeMontmorency)]

Спасибо за быстрый ответ.

Чтобы быть максимально ясным и конкретным: что-то вроде «Пользовательских ссылок в заголовке от Johani» (с иконкой) было бы практически идеально.

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

Например, на форуме есть спонсор, который владеет категорией A с двумя подкатегориями. Когда пользователи просматривают категорию A или её подкатегории, под заголовком сайта появляется закреплённая панель инструментов со ссылками на ресурсы этой компании.

Например: ссылка на магазин, поддержка, ссылки на сообщество.

[Canapin (Coin-coin le Canapin)]

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

Другой подход — создать компонент без каких-либо настроек, используя только HTML, CSS (и, возможно, немного JS). Это будет довольно «статичная» настройка: если вам нужно внести изменения, придется редактировать соответствующий код HTML и CSS.

Вот пример, который я сделал для своего форума:

А вот как это выглядит в настройках сайта:

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

[Heliosurge (Dan DeMontmorency)]

Что-то вроде компонента «Custom header links» может быть проще, пока я не наберусь опыта. Или, возможно, стоит получить консультацию по созданию отдельного компонента, который, например, нацеливается на компонент «Custom header links» от Johani и переопределяет его поведение, перемещая его под заголовок (возможно, такая опция уже есть), с переопределениями для использования текущей родительской категории.

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

Например:

1. (A) Custom header links
2. (B) Custom Header Links

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

[Heliosurge (Dan DeMontmorency)]

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

[Heliosurge (Dan DeMontmorency)]

Теперь это может быть проще, если работать над пользовательским компонентом темы.

Как вы и упоминали, упростить это можно с помощью простого кода после заголовка, который будет работать с категорией, показывая простые ссылки — иногда с картинкой — для основных переходов, например, ссылка на сообщество, ведущая на пост или опубликованную страницу?

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

[Canapin (Coin-coin le Canapin)]

Вот практический пример, который я подготовил для вас:

Вот HTML-код, который я разместил на вкладке After Header:

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Вот контент, отображаемый только в категории <strong>General</strong></h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Вот контент, отображаемый только в категории <strong>Site Feedback</strong></h2>
</div>

Вот SCSS-код, который я разместил на вкладке CSS (Discourse использует SCSS, расширяющий возможности CSS):

$category_classes: "general", "site-feedback";

.below-header-banner {
    display: none;
}

@each $cat in $category_classes {
    body.category-#{$cat} {
        #category-#{$cat}-banner.below-header-banner {
            display: block;
        }
    }
}

Вот результат. Каждый баннер отображается только в своей категории.

Надеюсь, это поможет!

[Heliosurge (Dan DeMontmorency)]

Это абсолютно идеально! Большое спасибо!

Будет ли этот базовый код отображаться, если находится в подкатегории родительской категории? Или мне нужно добавить подкатегории в условие?

Мне действительно стоит скопировать и вставить и вернуться к вам. Вы были очень добры, тратя своё время на помощь мне.

[Canapin (Coin-coin le Canapin)]

@Dan DeMontmorency

Будет ли этот базовый код всё ещё отображаться, если он находится в подкатегории родительской? Или мне нужно добавить подкатегории в условие?

У подкатегорий есть собственный класс в теге body.

Например, в https://meta.discourse.org/c/support/wordpress/21, Support > WordPress — это подкатегория Support.

Класс категории в теге <body>: category-support-wordpress.

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

[Heliosurge (Dan DeMontmorency)]

Классно! Ещё раз спасибо за то, что поделились своим багажом знаний и помогли мне уверенно начать.

Вы, безусловно, ценный сотрудник своей команды!

[Heliosurge (Dan DeMontmorency)]

Прошу прощения за мою неопытность. Но могу ли я еще раз обратиться к вам?

<div id="pimax-navbar">
 <span id="pimax-top-links">
 <ul class="pimax-nav-link-container">
   <li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
   <li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Магазин</a></b></li>
   <li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Поддержка</a></b></li>
</ul></span>
</div>

Как мне объединить это с вашим примером? И как сделать так, чтобы ссылки располагались горизонтально слева направо, а не друг над другом?

[Canapin (Coin-coin le Canapin)]

По сути, вы возьмёте этот код и вставите его в свой код, заменив тег <h2> и его содержимое. Но я бы посоветовал вам доработать и адаптировать этот код под свои нужды, а не просто копировать и вставлять его.

Что касается отображения списка элементов в одну строку вместо вертикального расположения, существует множество способов сделать это с помощью CSS… Многие из них довольно просты, но тогда мы немного выйдем за рамки помощи, которую мы предоставляем здесь. См. это объяснение:

About the Development category

The category for all things Discourse Development. Building a customization for yourself or the community? Then this is the category for you! Learn more…

В подобных случаях, касающихся общих, не связанных напрямую с Discourse вопросов HTML и CSS, вы можете найти информацию здесь: Making custom CSS changes on your site
А также практически в любом месте в интернете. Например: https://www.google.com/search?q=css+make+list+element+inline

Тем не менее, каковы ваши текущие навыки работы с HTML и CSS?
Знание этого поможет нам давать более точные ответы.

[Heliosurge (Dan DeMontmorency)]

@Canapin

Тем не менее, каковы ваши текущие навыки работы с HTML и CSS?
Будет полезно узнать об этом чуть больше, чтобы я мог давать более точные ответы.

Если быть честным с собой и окружающими, я — новичок-энтузиаст. В школе у меня был некоторый опыт программирования на GWBASIC и Turbo Pascal. Я принял решение использовать приложение для изучения HTML и CSS и уже добился некоторых успехов. Однако мои знания пока не достигают высокого уровня.

Например, кто-то поделился примером кода для скрытия категории из гамбургер-меню. Код работал хорошо, но требовалось написать много кода, чтобы скрыть все нужные категории. Это было до появления компонента темы «Category Hider», хотя я предложил идею добавить опцию для скрытия всех подкатегорий. В ответ участник сообщества поделился кодом из 1–2 строк, который скрывал все подкатегории. Ха-ха.

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

Теперь я добился небольшого успеха, модифицируя баннер «Welcome Link», сравнивая настройки в settings.yml с теми, что используются в современных категориях (по памяти). Я заменил первую настройку на ту, которая работает со списком категорий, а не с их обнаружением. Однако, похоже, мне всё ещё нужно сравнить несколько файлов, чтобы понять, где именно применяется эта настройка. Я могу добавлять категории в первую настройку, но пока это ещё не работает должным образом.

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

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

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

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