Discourse Bars 🍻 🍸 (фреймворк боковой панели)

[merefield (Robert)]

Обзор

Компонент темы, позволяющий размещать компоненты^[1] в верхней и боковых панелях.

• Укажите набор «виджетов» отдельно для маршрута и позиции.
• Поддерживает настройки для каждого из: discovery^[2], topic, tag^[3], category^[3:1], categories^[3:2] или tags-intersection^[4].
• «Панели» могут быть: верхняя, левая, правая или альтернативное правое расположение.
• Каждая панель может быть свернута или закрыта (обновите браузер, чтобы сбросить закрытие). По умолчанию они могут быть свернуты.
• Обрабатывает официальную боковую панель, но если вы планируете использовать левую боковую панель Bars, рекомендуется режим раскрывающегося списка официальной боковой панели.
• В комплекте идут существующие примеры настроек, показывающие некоторые большие буквы: частично для демонстрации, частично чтобы вы могли увидеть примеры настроек. Удалите их и замените собственными именами компонентов.
• Поставляется с одним компонентом: bars-custom-html (см. предварительно заполненные примеры настроек), но совместимы компоненты из многих существующих компонентов темы и плагинов.
• Поддержка мобильных устройств еще не реализована.

Быстрые ссылки

Получить код	https://github.com/merefield/discourse-tc-bars
Посмотреть код	GitHub - merefield/discourse-tc-bars: A Theme Component that allows you to lay out Components ("widgets") on top and side bars · GitHub
Руководство по установке	Installing a theme or theme component

Нравится этот компонент темы? Пожалуйста, поставьте ему на GitHub!

Бесплатный пример:

При первой загрузке:

Некоторые важные моменты, которые следует учитывать в этом TC!

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

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

Особенности компонентов

• Вы должны указать имя компонента. Имя компонента фактически совпадает с именем файла в каталоге component темы, TC или плагина без суффикса.

  • Имя компонента — это не имя компонента темы (который может содержать множество компонентов Ember Glimmer), а имя фактического файла компонента Ember , например:
  

  то есть layouts-tag-list

• Они могут быть из существующего компонента темы или плагина. Существующие компоненты могут работать. Примеры:

  • 🏷️ Bars Tag List Component
  • Render a component within a Widget. (Using select-kit components within plugin code) - #31 by merefield
  • Discourse AI Topic Summary 🤖 … и возможно даже:
  • Виджет таблицы лидеров: https://github.com/discourse/discourse-gamification/blob/main/assets/javascripts/discourse/components/minimal-gamification-leaderboard.js (сообщите мне, если попробуете ниже!)

• Для создания компонентов требуется определенный уровень expertise.

  • Но попробуйте создать свой собственный компонент в другом компоненте темы и убедитесь, что оба активны в одной теме.

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

  • Из коробки вы можете использовать только существующие данные JSON API, например, из ядра Discourse или предоставленные существующим плагином. Если вам нужны собственные данные, которые нельзя получить из текущих API, вы можете нанять меня или кого-то в Marketplace для помощи.

• Возможно, вам потребуется стилизовать границы боковой панели и компонента по своему вкусу. (снова, если нужна помощь, рассмотрите возможность найма разработчика).

  • Стратегическое использование теней и рамок может сделать внешний вид очень привлекательным — будьте артистичны!

Зачем

• С обновлением ядра Discourse до Ember 5 трюк, который использовал Плагин Layouts от Pavilion для отличного способа манипуляции макетом Discourse, перестал работать. Теперь не было простого способа показать боковую панель на маршруте темы через относительно простой интерфейс конечного пользователя.

• Кроме того, Ember представил компоненты Glimmer, с которыми гораздо приятнее работать. (Layouts использовал API виджетов, который устарел в пользу компонентов Glimmer).

• Наконец, команда ядра Discourse предоставила новый редактор JSON для настроек компонентов темы, что сделало развертывание более сложных настроек возможным

• Вместо того чтобы исправлять плагин Layouts (TC не существовали во времена Layouts), имело смысл переделать его как компонент темы, потому что мы можем реализовать большинство необходимых нам вещей только на фронтенде.

• Встречайте «Bars» За здоровье!!

Известные проблемы

• Верхняя панель не фиксируется (я могу удалить соответствующую настройку, если не смогу решить проблему).

Благодарности

• Духовный преемник теперь неработающего Плагина Layouts, созданного @angus (спасибо!), который служил нам верой и правдой многие годы.
• Использует систему параметров из Правых боковых блоков (спасибо @pmusaraj!)

---

1. Термин «discovery» (маршрут) относится к основным страницам списка тем (например, «Последние», «Новые»), которые позволяют просматривать доступные темы перед тем, как перейти к конкретной. ↩︎

2. Технически это тоже маршрут «discovery», но мы разделяем их на отдельные имена, чтобы вы могли при желании обрабатывать их по-разному. ↩︎

3. См. здесь для получения более подробной информации. Чтобы это оставалось опциональным (не все установщики Bars захотят создать собственную домашнюю страницу), Bars не добавляет необходимый модификатор в about.json, поэтому вы должны добавить его в родительскую тему или другой TC для активации. ↩︎ ↩︎ ↩︎

4. См. Плагин Tags Intersection ↩︎

[Lilly]

Ого, это круто! Молодец, Роберт. Спасибо, что сделал это и опубликовал!

Форкнул!

[thoka (Thomas Kalka)]

Я только в начале пути изучения того, как добавлять пользовательские виджеты, но: мне бы очень хотелось иметь возможность добавлять виджеты в неподвижный «подвал» (footer) в мобильном представлении.
Возможно ли это будет реализовать в будущей версии этого компонента?

[merefield (Robert)]

На данном этапе не планируется добавлять дополнительные «бары», но, возможно, когда ситуация стабилизируется и TC явно станет стабильным…

… также всегда приветствуются PR или спонсорство

[denvergeeks]

Это выглядит отлично — спасибо! Не могли бы вы привести пример настроек для включения виджета «Список тегов» в одну из боковых панелей?

Например, судя по инструкциям, должно работать вот так…

Но левая боковая панель по-прежнему показывает только большую а…

[merefield (Robert)]

Два момента:

Во-первых, вот аналогичные настройки из StarZen:

Название компонента фактически совпадает с именем файла в компоненте (я добавлю это в начало темы).

https://starzen.space

Во-вторых, это действительно глупо, но после нажатия «Сохранить» нужно ещё нажать галочку.

Это двойное сохранение!

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

[denvergeeks]

@Robert

Во-вторых, это действительно глупо, но после нажатия «Сохранить» нужно ещё раз нажать «Сохранить» и затем подтвердить галочкой.

Это двойное сохранение!

Да, я сделал двойное сохранение

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

[merefield (Robert)]

Поделитесь вашим файлом настроек JSON (кнопка внизу TC).

[denvergeeks]

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Ваш component_name по-прежнему неверен, посмотрите мой пример, и, возможно, вам стоит удалить остальное.

[denvergeeks]

Хм… Ладно, я удалил все, кроме первого, и изменил имя, чтобы оно совпадало с вашим (хотя имя компонента берётся из TC GitHub - merefield/discourse-tc-bars-tag-list-component: The Tag List Widget allows you to display tags from Discourse in a sidebar using Pavilion's Custom Layouts Plugin. · GitHub — откуда я мог узнать, что правильное имя компонента — layouts-tag-list?)

Однако изменение имени компонента в модальном окне, похоже, не меняет его в JSON-файле настроек и не удаляет остальные элементы, даже после двойного сохранения…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list-widget\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"discovery\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-d\",\"route\":\"discovery\",\"position\":\"right-alt\"},{\"component_name\":\"big-e\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-f\",\"route\":\"discovery\",\"position\":\"top\"},{\"component_name\":\"big-c\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-d\",\"route\":\"topic\",\"position\":\"right\"},{\"component_name\":\"big-e\",\"route\":\"topic\",\"position\":\"top\"},{\"component_name\":\"big-a\",\"route\":\"categories\",\"position\":\"left\"},{\"component_name\":\"big-c\",\"route\":\"category\",\"position\":\"left\"},{\"component_name\":\"big-b\",\"route\":\"tag\",\"position\":\"right\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Как я объяснил выше (и теперь подробно изложил в первом посте), имя компонента — это не имя компонента темы (который может содержать множество компонентов Ember Glimmer), а имя самого компонента Ember:

то есть layouts-tag-list

Это полезное недоразумение, я уточню это в первом посте, используя данный пример.

Непонятно, почему ваш параметр «застревает»

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

Или просто обновите браузер?

[ckshen]

Спасибо за работу, @merefield!

Как функционально отличаются Discourse Bars от блоков правой боковой панели с пользовательским HTML, помимо того, что расположение не ограничивается только правой стороной?

Right Sidebar Blocks

Summary Right Sidebar Blocks shows a sidebar to the right of topic lists with a configurable list of blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-right-sidebar-blocks New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features The component includes a few blocks you can display in the sidebar: popular-tags …

[merefield (Robert)]

Bars — это духовный преемник Pavilions Layouts, который существовал до RSB.

Однако по сравнению с RSB, основная поддержка множественных маршрутов и позиций (цель Bars — воссоздать полезность и гибкость Layouts), ключевым дополнением является поддержка маршрутов тем. Кроме того, я пока не поддерживаю params — мне ещё не встретился случай, когда это было бы необходимо. Я также не включаю никаких компонентов, кроме демо-версии с крупными буквами; это сделано намеренно, и проект задуман скорее как фреймворк для администраторов и разработчиков (по аналогии с Layouts).

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

[denvergeeks]

ОК, я удалил и переустановил оба TC: панели и списка тегов макетов (пытался удалять и добавлять их по отдельности и вместе), но результат всё тот же. При этом каждый раз я делал обновление, как и раньше. Также я очистил кэш браузера.

[merefield (Robert)]

Мне не удалось воспроизвести вашу проблему с зависшими настройками. Я только что добавил и удалил левую боковую панель.

Меня бы заинтересовали другие сообщения о том же.

[denvergeeks]

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

[denvergeeks]

Я также удалил все плагины и переустановил систему заново (при этом не установлены другие TC или темы). Это свежая установка, сделанная вчера вечером.

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

---

---

---

---

А вот файл настроек в формате JSON…

[
	{
		"setting": "bar_components",
		"value": "[{\"component_name\":\"layouts-tag-list\",\"route\":\"discovery\",\"position\":\"left\"}]"
	},
	{
		"setting": "left_sidebar_width",
		"value": 300
	},
	{
		"setting": "right_sidebar_width",
		"value": 300
	},
	{
		"setting": "sticky_sidebars",
		"value": true
	},
	{
		"setting": "sidebar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_height",
		"value": 800
	},
	{
		"setting": "scrolly_sidebars",
		"value": false
	},
	{
		"setting": "top_bar_height",
		"value": 150
	},
	{
		"setting": "top_bar_sticky_top_position",
		"value": 60
	},
	{
		"setting": "sidebar_gap",
		"value": 5
	},
	{
		"setting": "rightalt_sidebar_gap",
		"value": 5
	}
]

[merefield (Robert)]

Вам придётся отлаживать это самостоятельно — проверьте консоль, CSS темы и т.д.

У меня работает:

Не помню, требует ли «Список тегов макетов» «Группы тегов»… возможно, требует!

[denvergeeks]

@Robert

Не помню, требует ли «Список тегов макетов» «Группы тегов»…

Да, включение «Групп тегов» в настройках (а затем создание нескольких групп тегов) действительно привело к появлению тегов.

Однако установка маршрута для элемента компонента на discovery по-прежнему отображает левую панель только в списках /latest, /new и /top.

Не могли бы вы любезно указать мне на список всех доступных «маршрутов», которые можно здесь использовать?

Ещё раз спасибо!