Пользовательский HTML на странице групп

Всем привет,
Я проектирую сообщество, где каждый пользователь должен запросить разрешение на вступление в группу, а каждая группа контролирует доступ к категории.
Я хотел бы добавить приветственное сообщение с пояснениями в HTML-формате на страницу групп (https://community.horbitercafe.com/g).

Как проще всего это реализовать?

Спасибо,
Ф.

Не уверен, что это правильное место для плагина, но можно попробовать следующее.

В разделе Настроить > </head>

Добавьте это:

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

ваш HTML здесь

</script>
1 лайк

Как я могу ограничить это только страницей /g?

Да, это действительно позволяет «внедрять» HTML над названием группы и другой информацией на страницах, например, https://discourse.example.org/g/foo. Спасибо за то, что поделились.

@Fausto_Dassenno, вы ищете решение для главной страницы списка групп, но не для страницы деталей отдельной группы?

Верно, я хочу добавить HTML только на страницу основного списка групп.

Добавьте класс к вашему HTML-коду, например, gr-horbiter

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

<div class="gr-horbiter">
ваш HTML-код
</div>

</script>

И добавьте этот CSS в общий файл

.gr-horbiter {
    display: none;
}

body.groups-page .gr-horbiter {
    display: block;
}

Я не тестировал код, но он должен работать.

1 лайк

Спасибо, @Steven. Раздел со скриптом размещается в секции HTML компонента? Или мне нужно редактировать HTML напрямую?

Извините, я не совсем уверен, что понял вопрос. Английский — не мой родной язык, поэтому я мог что-то неверно истолковать.

Вы копируете скрипт и HTML в секцию <head> и добавляете своё приветственное сообщение. При желании можете использовать <div> или <span> для кастомизации, и всё должно работать.

1 лайк

Спасибо, @Steven, у меня получилось. Единственная проблема в том, что мне нужно добавить это на страницу списка групп, а не на страницу деталей группы. По крайней мере, теперь я понял логику этого. Буду исследовать дальше. Я не могу найти никакого коннектора на странице списка групп.

Я должен был протестировать, теперь я вижу, в чём проблема :man_facepalming:
Плагин outlet не работает для главной страницы группы

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

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

body.groups-page .groups-header::before {
    content: "Ваш текст";
    width: 100%;
    margin: 0 0 15px 0;
}

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

2 лайка

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

Насколько сложно запросить новое название раздела на странице индекса групп?

Если вам нужно что-то вроде этого, это просто

.welcome-message {
    display:none;
}
.groups-page .welcome-message {
    display:block;
    margin: 20px;
}

Затем добавьте это в секцию «После заголовка»

<div class="welcome-message">Вставьте сюда вашу приветственную информацию и инструкции</div>

3 лайка

Да, это, безусловно, лучшее решение.

Иногда я слишком усложняю вещи :man_facepalming:

3 лайка

Отлично, это работает!
А что, если я хочу сделать то же самое, но показывать только на главной странице? Чем мне заменить .groups-page?

Посмотрите на класс, используемый в body на вашей главной странице HTML.

Например, здесь, на meta.discourse.org:
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">

Используемый класс — navigation-topics.

1 лайк

Или, если вы хотите что-то более изысканное, попробуйте

Интересно, на моей главной странице есть это

image

Какая страница является вашей главной?

image

Именно это вы имеете в виду?

Я понял, в чём проблема с вашим пустым классом body. Вместо просмотра исходного кода страницы нажмите F12, чтобы открыть инструменты разработчика в Chrome, Firefox или Edge, и перейдите на вкладку “Elements”. Посмотрите HTML-код здесь — ваш тег <body> будет содержать правильные классы.