Как новичок в Discourse, я пытаюсь понять, что можно кастомизировать и как. Я знаю, что существуют различные темы и компоненты тем, а также понимаю, что теоретически можно редактировать HTML, CSS и JavaScript, если перейти в администрирование -> настройка -> Темы -> [клик по выбранной теме] -> редактировать CSS/HTML.
Я пытаюсь разобраться, как пользоваться панелью управления, которая появляется при попытке перейти в «редактировать CSS/HTML». В ней отображается <head> Header After Header <body> Footer Embedded CSS.
Есть ли какое-либо руководство с примерами того, как на самом деле редактировать HTML? Я понимаю, что на Meta есть предложения, но, насколько я вижу, они разбросаны по разным темам на форуме.
В качестве примера того, что меня смущает: в этом посте спрашивается, можно ли изменить порядок столбцов в списке тем на главной странице, что является довольно простым изменением в HTML. Однако ответ, по сути, таков: нет, это невозможно без использования сложных переопределений.
Поэтому я пытаюсь разобраться, что именно я могу сделать с помощью функции «редактировать CSS/HTML», чтобы кастомизировать свой форум.
Спасибо. Я уже видел это, но воздержался, так как, казалось, акцент делается на создании темы, а не просто на редактировании моего единственного форума.
Я вижу, что там есть некоторые рекомендации по использованию панели управления «Редактировать CSS/HTML». Но, чтобы уточнить: я могу изменять HTML/CSS/JS, не создавая новую тему, верно?
Также неясно, где и как я могу перемещать компоненты, а не просто добавлять или удалять их (например, изменить порядок колонок, чтобы группа пользователей отображалась в левой колонке страницы).
Я определенно рекомендую также ознакомиться с этим руководством. Не позволяйте аспекту «Темы» отпугнуть вас, так как оно затрагивает множество аспектов кастомизации, которые вы найдете полезными.
Ссылка, предоставленная Саймоном, объясняет всё, но она довольно длинная для чтения.
В основном, если вы хотите редактировать HTML в Discourse, это можно сделать несколькими способами:
Через некоторые предопределённые вкладки HTML в вашей теме или компоненте: Header, After Header, </body>, Footer.
Нацелившись на «свободное» пространство HTML (outlet), которое вы можете заполнить своим собственным HTML. Это можно сделать с помощью тега <script>, который вы можете добавить во вкладку <head>.
Вот пример доступных outlets в просмотре темы:
Переопределив существующий HTML-шаблон. Шаблоны иногда содержат много HTML-кода, и вам нужно будет скопировать и вставить его весь, чтобы внести свои изменения. Это также можно сделать в теге <script>, добавленном в ваш <head>.
Создание темы, компонента темы или «просто редактирование моего единственного форума» здесь фактически довольно одно и то же. Все три варианта делаются примерно одинаковым образом.
Да, это зависит от того, что именно вы хотите сделать, но обычно правильный способ — создать новый компонент темы и написать HTML/CSS здесь.
Спасибо за эту полезную информацию. Я понимаю, как добавить HTML в свободное пространство, а также как скрыть существующий HTML с помощью CSS (например, display: none для соответствующего класса div, который, как я предполагаю, можно найти с помощью инструмента инспектора).
Но как переопределить HTML, например, переместить компонент? Не могли бы вы привести краткий пример?
Быстрый пример переопределения шаблона навигационной панели:
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
{{#each navItems as |navItem|}}
{{navigation-item content=navItem filterMode=filterMode category=category}}
{{/each}}
<div style="background: red; padding: 10px; float: left;">Я добавил этот блок в шаблон навигационной панели</div>
{{custom-html name="extraNavItem" tagName="li"}}
{{!- это сделано, чтобы избежать DIV внутри UL, изначально {{plugin-outlet name="extra-nav-item"}}
{{#each connectors as |c|}}
{{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
{{/each}}
</script>
Хорошо, теперь я начинаю понимать. Это действительно полезно.
1. Откуда берётся строка: type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name? (То есть, как узнать, что именно туда нужно вписать?)
И благодаря примеру кода, который вы привели для переопределения шаблона, я начинаю видеть, как это возможно: я могу взять код шаблона, переместить его, удалить, добавить что-то новое и так далее.
2. Значит, код шаблона я должен взять по ссылке на GitHub, которую вы предоставили? Если так, то это логично, но найти нужный код кажется непросто. Например, какой шаблон отвечает за главную страницу?
3. Затем вставить соответствующий код в раздел «редактирование CSS/HTML» в панели управления. Но куда именно — в первый вариант (<head>)? Я так предполагаю исходя из вашего предыдущего ответа, но было бы полезно это подтвердить.
Чтобы найти название и местоположение компонента, я думаю, лучший способ — это плагин, на который я ссылался выше.
Чтобы найти шаблон, соответствующий части страницы, которую вы хотите изменить… Это немного сложнее.
Я не знаю простого способа. Было бы здорово иметь похожий плагин.
Иногда я просматриваю HTML-код страницы, чтобы найти какой-нибудь уникальный фрагмент кода (например, CSS-класс), а затем ищу его во всех файлах шаблонов. Я клонировал репозиторий Discourse на своём домашнем компьютере и ищу по всем этим файлам с помощью Sublime Text, но, уверен, есть и другие, более эффективные способы.
Иногда я изучаю код существующих компонентов тем, которые изменяют те же места на странице, которые я тоже хочу настроить.
Да, это непросто, но я не эксперт, и, наверное, есть более эффективные способы сделать это!
Да.
Когда вы переходите с WordPress или phpBB и привыкли напрямую редактировать файлы шаблонов в той или иной директории, Discourse может показаться запутанным…
Спасибо. Однако, сравнивая с WordPress, по крайней мере на мой взгляд, большим плюсом является то, что Discourse использует Ruby и JavaScript вместо PHP.
