Есть ли «карта» тематизации? (Простой способ найти точки подключения плагинов и т.д.)

[AstonJ]

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

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

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

1. Теги в секции HTML-кода страницы отображения темы (то есть при просмотре темы). Мне нужно, чтобы изменения были видны как ботам, так и людям.
2. Разметка блоков категорий в любом месте их отображения. (Эти: Админ-панель > Настройки > Стиль категорий.)
3. Страница «О нас» (где изменить содержимое блоков для администраторов и модераторов).

---

При работе с тематическими оформлениями в другом программном обеспечении для форумов обычно существует родительский шаблон, содержащий ссылки на все элементы, из которых состоит страница, что позволяет быстро находить нужные шаблоны для редактирования. Например, есть файл/шаблон forumdisplay (просмотр категории в Discourse), который содержит основной HTML и ссылается на все остальные шаблоны. Отдельный шаблон для страницы showthread (то есть страница просмотра темы в Discourse), другой — для страницы профиля участника и так далее. Они действуют как список или карта, указывающая, где найти то, что нужно. Таким образом, если вы хотите изменить, скажем, разметку самих сообщений, вы переходите к файлу или шаблону showthread (то есть просмотр темы), просматриваете его и обнаруживаете, что нужно отредактировать или посмотреть шаблон postbit.

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

[merefield (Robert)]

(deprecated) Plugin outlet locations theme component

the ability to debug plugin outlets is now included in core. Check out this topic for more details Original theme component info

[AstonJ]

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

[merefield (Robert)]

Мой совет — всегда начинать с простого. Сначала реализуйте простую задачу и разберитесь, как это сделать. Затем переходите к следующей.

Что касается тем, то в большинстве случаев потребуется внесение изменений в CSS. Используйте обычные ресурсы. В случаях, когда этого недостаточно, вам, возможно, придётся модифицировать шаблоны с помощью jQuery или, в крайнем случае, переопределять их. Создавайте собственные компоненты или виджеты для уникальных сценариев использования и подключайте их.

Исходный код — ваш лучший друг. Изучите структуру директорий на GitHub для репозитория discourse/discourse, и вы найдёте различные части приложения. Шаблоны, на мой взгляд, проще для понимания. Если вы не знакомы со структурой директорий Ember, самое время с ней ознакомиться.

[awesomerobot (Kris)]

@merefield

Исходный код — ваш лучший друг. Просмотрите структуру каталогов на GitHub для репозитория discourse/discourse, и вы найдёте различные части приложения.

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

Обычно для шаблонов стоит смотреть здесь: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

а для виджетов — здесь: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets.

Иногда не сразу понятно, где находится тот или иной шаблон, возможно, это компонент, вложенный в другой шаблон… Если я не помню, то в итоге просто ищу в исходном коде конкретный фрагмент разметки…

Например, если я хочу добавить что-то на страницу «О нас»… Я вижу, что у тела страницы «О нас» есть уникальный класс about-page, поэтому я начну поиск по about и body-page (это другой класс на этой странице).

Чтобы ответить на некоторые ваши вопросы:

@AstonJ

Теги в разделе HTML страницы просмотра темы (то есть при просмотре темы). Мне нужно, чтобы изменения были видны как ботам, так и людям.

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

@AstonJ

Разметка блоков категорий в тех местах, где они отображаются

Существуют разные шаблоны для различных макетов страниц, но, предполагая, что вы говорите об одном из макетов «Блоки с…»

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@AstonJ

Страница «О нас» (где изменить содержимое в блоках «Администратор» и «Модератор»)

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

[AstonJ]

Спасибо за ответы обоим

@merefield

Мой совет всегда — начинать с простого. Сначала реализуйте простую задачу и разберитесь, как это сделать. Затем переходите к следующей.

Кажется, я именно это и делал (сложнее редактирования тегов заголовка сложно придумать). В другом форуме я бы просто открыл файл/шаблон страницы «showthread» и отредактировал его; это заняло бы меньше минуты. Мне бы очень хотелось, чтобы работа с темами в Discourse была такой же простой (хотя возможно, что именно незнакомство с темизацией Discourse сейчас и заставляет меня чувствовать себя потерянным).

@merefield

Что касается темизации, то в основном это будет изменение CSS. Используйте обычные ресурсы. Там, где этого недостаточно, вам, возможно, потребуется изменить шаблоны с помощью jQuery или, в крайнем случае, переопределить их. Создавайте собственные компоненты или виджеты для нестандартных случаев и подключайте их.

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

@merefield

Исходный код — ваш лучший друг. Изучите структуру каталогов на GitHub для репозитория discourse/discourse, и вы найдёте различные части приложения. Шаблоны, на мой взгляд, проще понять. Если вы не знакомы со структурой каталогов Ember, самое время в ней разобраться.

Кажется, это именно та проблема. Я не знаю Ember, и, возможно, именно это делает всё таким чуждым. Мне бы очень хотелось что-то вроде (deprecated) Plugin outlet locations theme component, но для шаблонов и всего остального, что можно настроить — это было бы огромной помощью.

@awesomerobot

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

Но как вы находите то, что нужно, Крис?

@awesomerobot

Иногда не сразу понятно, где находится шаблон, потому что это может быть компонент, вложенный в другой шаблон… Если я не помню, что делать, то ищу в исходном коде конкретный фрагмент разметки…

Например, если я хочу добавить что-то на страницу «О нас», я вижу, что у тела этой страницы есть уникальный класс about-page, поэтому я начинаю искать about и body-page (это ещё один класс на странице).

Ах, спасибо, это действительно хороший совет!

@awesomerobot

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

Вы уверены, Крис? Мне казалось, что плагины (или plugin-outlets) позволяют добавлять что-то только в месте конкретного outlet. А чтобы изменить формат тега заголовка, мне, вероятно, нужно открыть существующий шаблон (или компонент, или виджет) и скопировать/отредактировать его. По крайней мере, так я понял после прочтения двух руководств по плагинам и темизации.

@awesomerobot

Существуют разные шаблоны для различных макетов страниц, но, предположим, вы говорите об одном из макетов «Блоки с…»

discourse/categories-boxes.hbs at master · discourse/discourse · GitHub

Спасибо! Похоже, это именно тот, который мне нужен

@awesomerobot

discourse/about.hbs at master · discourse/discourse · GitHub

Ещё раз спасибо, ха-ха! Теперь оба этих файла найти относительно несложно, учитывая их названия и то, что вы их указали. Думаю, что меня сбило с толку именно изменение тегов заголовка

В данный момент мне кажется, что чего-то не хватает, и, как указал @merefield, это может быть связано с моим незнанием Ember. Знает ли кто-нибудь видео на YouTube, которые быстро проведут вас через это? Может, вы или @merefield могли бы сделать такое?

[merefield (Robert)]

Ember действительно стоит изучать. Он очень мощный, расширяемый и быстрый.

Прочтение этого поможет лучше понять исходный код:

Ember.js Guides - Guides and Tutorials - Ember Guides

Изучите разделы о шаблонах, вычисляемых свойствах, маршрутизаторе и компонентах.

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

Ещё один БОЛЬШОЙ совет: найдите существующий (хороший) плагин, который решает задачу, похожую на вашу. Изучите его код и скопируйте подход.

[AstonJ]

Спасибо, Роберт! Там говорится, что эта версия руководств устарела — использует ли Discourse эту версию, или мне стоит читать последние, 3.15, руководства?

[merefield (Robert)]

Пока читайте версию 3.10. Именно её сейчас использует Discourse. Если вы откроете консоль JavaScript, вы увидите версию Ember и jQuery, на которой работает экземпляр.

Также имейте в виду, что существуют различные «стили» оформления кода. Поэтому элементы в исходном коде могут иногда немного отличаться.

[AstonJ]

@awesomerobot

Существуют разные шаблоны для различных макетов страниц, но, предположительно, вы говорите об одном из макетов «Блоки с…»

discourse/categories-boxes.hbs на master · discourse/discourse · GitHub

К сожалению, это не то :–(

Также пробовал эти:

• categories-boxes-topic.hbs
• categories-boxes-with-topics.hbs
• categories-boxes.hbs

Я создал компонент темы и добавил в него следующее:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

Но изменение data-template-name на все перечисленные не даёт эффекта. (Когда я меняю его на components/topic-list, это работает.)

Есть ли какие-то идеи, где находится этот шаблон?

Вот что я хочу отредактировать (но когда отображается формат box, из: Админ-панель > настройки > стиль категорий):

Любая помощь будет очень кстати.

[AstonJ]

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

Кажется, этот Ruby-модуль внедряет встроенные стили: discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

Это было задумано как временная мера? Если нет, то, по вашему мнению, возможно ли разрешить нам указывать пользовательские стили, пожалуйста, @sam?

Это могло бы быть связано с существующим параметром none, где у нас могли бы быть два поля в панели настроек администратора, в которые мы могли бы вставить свои стили для каждого (если стили не вставлены, это работает так же, как сейчас работает параметр none):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

и

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="Категория, доступная только для участников с уровнем доверия 3 и выше."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Lounge</span></span>

Из этого фрагмента:

Нам просто нужен доступ к переменным цвета фона и цвета текста со стандартной страницы редактирования категории.

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

Любая помощь будет очень ценной.

Редактирование: оказывается, что это не тот Ruby-файл (я редактировал его в своей локальной установке разработки, но ничего не изменилось).. дальнейшее изучение показало, что это вот этот файл: discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub Есть ли способ создать плагин для его модификации?

[merefield (Robert)]

Вероятно, существует несколько способов решить эту задачу.

Попробуйте следующее:

• переопределите шаблон, вызывающий этот хелпер;
• замените его на собственный хелпер.

Речь идет о шаблоне: discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

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

Другой вариант — использовать jQuery внутри переопределения компонента topic-list-item для выполнения необходимых модификаций.