# Есть ли «карта» тематизации? (Простой способ найти точки подключения плагинов и т.д.)
**URL:** https://meta.discourse.org/t/is-there-a-theming-map-an-easy-way-to-find-plugin-outlets-etc/139383
**Category:** Development
**Created:** [22.Январь.2020 05:17:53 UTC](https://meta.discourse.org/t/is-there-a-theming-map-an-easy-way-to-find-plugin-outlets-etc/139383 "2020-01-22T05:17:53Z")
**Posts on this page:** 12
**Page:** 1
Я внимательно изучил великолепные руководства по плагинам и компонентам тем, но всё ещё немного запутался в том, где быстро найти нужные шаблоны, компоненты, виджеты или выходы плагинов.
Я решил начать с трёх простых правок — если кто-то сможет подсказать мне правильное направление, это будет огромной помощью 😊
Какой шаблон, компонент или выход плагина мне нужно изменить для решения следующих задач?
1. Теги в секции HTML-кода страницы отображения темы (то есть при просмотре темы). Мне нужно, чтобы изменения были видны как ботам, так и людям.
2. Разметка блоков категорий в любом месте их отображения. (Эти: Админ-панель \> Настройки \> Стиль категорий.)
3. Страница «О нас» (где изменить содержимое блоков для администраторов и модераторов).
* * *
При работе с тематическими оформлениями в другом программном обеспечении для форумов обычно существует родительский шаблон, содержащий ссылки на все элементы, из которых состоит страница, что позволяет быстро находить нужные шаблоны для редактирования. Например, есть файл/шаблон `forumdisplay` (просмотр категории в Discourse), который содержит основной HTML и ссылается на все остальные шаблоны. Отдельный шаблон для страницы `showthread` (то есть страница просмотра темы в Discourse), другой — для страницы профиля участника и так далее. Они действуют как список или карта, указывающая, где найти то, что нужно. Таким образом, если вы хотите изменить, скажем, разметку самих сообщений, вы переходите к файлу или шаблону `showthread` (то есть просмотр темы), просматриваете его и обнаруживаете, что нужно отредактировать или посмотреть шаблон `postbit`.
Есть ли у нас что-то подобное? Если нет, не могли бы разработчики рассмотреть возможность добавления аналогичной функции? Это было бы огромной помощью 🙂
---
> [@(deprecated) Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673?u=merefield):
>
> mega the ability to debug plugin outlets is now included in core. Check out [this topic](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215) for more details play_button Original theme component info
---
Я видел это (извините, должен был упомянуть об этом!), и это очень полезно для видимых точек подключения плагинов, но как насчёт шаблонов, компонентов, виджетов и т.д.? Как вы быстро и легко находите их, Роберт? Есть ли у вас идея, где находятся те, которые упомянуты в первом сообщении?
---
Мой совет — всегда начинать с простого. Сначала реализуйте простую задачу и разберитесь, как это сделать. Затем переходите к следующей.
Что касается тем, то в большинстве случаев потребуется внесение изменений в CSS. Используйте [обычные ресурсы](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648). В случаях, когда этого недостаточно, вам, возможно, придётся модифицировать шаблоны с помощью jQuery или, в крайнем случае, переопределять их. Создавайте собственные компоненты или виджеты для уникальных сценариев использования и подключайте их.
Исходный код — ваш лучший друг. Изучите структуру директорий на GitHub для репозитория discourse/discourse, и вы найдёте различные части приложения. Шаблоны, на мой взгляд, проще для понимания. Если вы не знакомы со структурой директорий Ember, самое время с ней ознакомиться.
---
> [@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/templates)
а для виджетов — здесь: [https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets](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](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](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs)
---
Спасибо за ответы обоим 🙂
> [@merefield](#):
>
> Мой совет всегда — начинать с простого. Сначала реализуйте простую задачу и разберитесь, как это сделать. Затем переходите к следующей.
Кажется, я именно это и делал (сложнее редактирования тегов заголовка сложно придумать). В другом форуме я бы просто открыл файл/шаблон страницы «showthread» и отредактировал его; это заняло бы меньше минуты. Мне бы очень хотелось, чтобы работа с темами в Discourse была такой же простой (хотя возможно, что именно незнакомство с темизацией Discourse сейчас и заставляет меня чувствовать себя потерянным).
> [@merefield](#):
>
> Что касается темизации, то в основном это будет изменение CSS. Используйте [обычные ресурсы](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648). **Там, где этого недостаточно, вам, возможно, потребуется изменить шаблоны** с помощью jQuery или, в крайнем случае, переопределить их. Создавайте собственные компоненты или виджеты для нестандартных случаев и подключайте их.
Именно это, как мне кажется, нужно для всех пунктов из первого сообщения, так как они требуют изменения существующего контента (а не добавления в начале или в конце в определённом месте, к чему, похоже, ориентированы plugin-outlets).
> [@merefield](#):
>
> Исходный код — ваш лучший друг. Изучите структуру каталогов на GitHub для репозитория discourse/discourse, и вы найдёте различные части приложения. Шаблоны, на мой взгляд, проще понять. **Если вы не знакомы со структурой каталогов Ember** , самое время в ней разобраться.
Кажется, это именно та проблема. Я не знаю Ember, и, возможно, именно это делает всё таким чуждым. Мне бы очень хотелось что-то вроде [(deprecated) Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673), но для шаблонов и всего остального, что можно настроить — это было бы огромной помощью.
> [@awesomerobot](#):
>
> Да, безусловно. Я создаю темы почти столько же времени, сколько существует Discourse, и постоянно обращаюсь к исходному коду в отдельном окне.
Но как вы находите то, что нужно, Крис?
> [@awesomerobot](#):
>
> Иногда не сразу понятно, где находится шаблон, потому что это может быть компонент, вложенный в другой шаблон… Если я не помню, что делать, то ищу в исходном коде конкретный фрагмент разметки…
>
> Например, если я хочу добавить что-то на страницу «О нас», я вижу, что у тела этой страницы есть уникальный класс `about-page`, поэтому я начинаю искать `about` и `body-page` (это ещё один класс на странице).
Ах, спасибо, это действительно хороший совет!
> [@awesomerobot](#):
>
> Я _думаю_, это требует плагина, что выходит за рамки моей компетенции… Возможно, кто-то другой сможет помочь.
Вы уверены, Крис? Мне казалось, что плагины (или plugin-outlets) позволяют добавлять что-то только в месте конкретного outlet. А чтобы изменить формат тега заголовка, мне, вероятно, нужно открыть существующий шаблон (или компонент, или виджет) и скопировать/отредактировать его. По крайней мере, так я понял после прочтения двух руководств по плагинам и темизации.
> [@awesomerobot](#):
>
> Существуют разные шаблоны для различных макетов страниц, но, предположим, вы говорите об одном из макетов «Блоки с…»
>
> [discourse/categories-boxes.hbs at master · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs)
Спасибо! Похоже, это именно тот, который мне нужен 😃
> [@awesomerobot](#):
>
> discourse/about.hbs at master · discourse/discourse · GitHub
Ещё раз спасибо, ха-ха! Теперь оба этих файла найти относительно несложно, учитывая их названия и то, что вы их указали. Думаю, что меня сбило с толку именно изменение тегов заголовка 😌
В данный момент мне кажется, что чего-то не хватает, и, как указал @merefield, это может быть связано с моим незнанием Ember. Знает ли кто-нибудь видео на YouTube, которые быстро проведут вас через это? Может, вы или @merefield могли бы сделать такое? 😊
---
Ember действительно стоит изучать. Он очень мощный, расширяемый и быстрый.
Прочтение этого поможет лучше понять исходный код:
> **[Ember.js Guides - Guides and Tutorials - Ember Guides](https://guides.emberjs.com/v3.10.0/)**
>
> Welcome to the Ember.js Guides! This documentation will take you from total beginner to Ember expert.
>
> With the plethora of libraries readily available for front-end development, sometimes it can be a little confusing to work with a front-end...
Изучите разделы о шаблонах, вычисляемых свойствах, маршрутизаторе и компонентах.
Discourse не совсем похож на стандартное приложение Ember, но руководства в любом случае очень полезны.
Ещё один БОЛЬШОЙ совет: найдите существующий (хороший) плагин, который решает задачу, похожую на вашу. Изучите его код и скопируйте подход.
---
Спасибо, Роберт! Там говорится, что эта версия руководств устарела — использует ли Discourse эту версию, или мне стоит читать последние, 3.15, руководства?
---
Пока читайте версию 3.10. Именно её сейчас использует Discourse. Если вы откроете консоль JavaScript, вы увидите версию Ember и jQuery, на которой работает экземпляр.
Также имейте в виду, что существуют различные «стили» оформления кода. Поэтому элементы в исходном коде могут иногда немного отличаться.
---
> [@awesomerobot](#):
>
> Существуют разные шаблоны для различных макетов страниц, но, предположительно, вы говорите об одном из макетов «Блоки с…»
>
> [discourse/categories-boxes.hbs на master · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs)
К сожалению, это не то :–(
Также пробовал эти:
- [categories-boxes-topic.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes-topic.hbs)
- [categories-boxes-with-topics.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs)
- [categories-boxes.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs)
Я создал компонент темы и добавил в него следующее:
```plaintext
```
Но изменение `data-template-name` на все перечисленные не даёт эффекта. (Когда я меняю его на `components/topic-list`, это работает.)
Есть ли какие-то идеи, где находится этот шаблон?
Вот что я хочу отредактировать (но когда отображается формат `box`, из: Админ-панель \> настройки \> стиль категорий):
Любая помощь будет очень кстати.
---
Похоже, что это невозможно сделать с помощью компонентов темы, так как для этого, кажется, нет шаблонов или компонентов 😭
Кажется, этот Ruby-модуль внедряет встроенные стили: [discourse/lib/category\_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/888e68a1637ca784a7bf51a6bbb524dcf7413b13/lib/category_badge.rb)
Это было задумано как временная мера? Если нет, то, по вашему мнению, возможно ли разрешить нам указывать пользовательские стили, пожалуйста, @sam?
Это могло бы быть связано с существующим параметром `none`, где у нас могли бы быть два поля в панели настроек администратора, в которые мы могли бы вставить свои стили для каждого (если стили не вставлены, это работает так же, как сейчас работает параметр `none`):
```plaintext
```
и
```plaintext
Lounge
```
Из этого фрагмента:
Нам просто нужен доступ к переменным цвета фона и цвета текста со стандартной страницы редактирования категории.
Или есть какой-то другой способ, которым мы можем изменить это, Сэм? Я просто хочу убрать цвет фона и добавить границу того же цвета, что и текст (как указано на стандартной странице редактирования категории).
Любая помощь будет очень ценной.
**Редактирование** : оказывается, что это не тот Ruby-файл (я редактировал его в своей локальной установке разработки, но ничего не изменилось).. дальнейшее изучение показало, что это вот этот файл: [discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/b25d9e96c1414bf78b44221da4d385675843991e/app/assets/javascripts/discourse/helpers/category-link.js.es6) Есть ли способ создать плагин для его модификации?
---
Вероятно, существует несколько способов решить эту задачу.
Попробуйте следующее:
- переопределите шаблон, вызывающий этот хелпер;
- замените его на собственный хелпер.
Речь идет о шаблоне: [discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/c6e255f4e00400b8a6f82a799b7fa082b17adb1c/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs)
Переопределение шаблона, находящегося так низко в иерархии, сопряжено с относительно небольшим риском.
Другой вариант — использовать jQuery внутри переопределения компонента topic-list-item для выполнения необходимых модификаций.