Извините, если это сообщение не по адресу в разделе поддержки.
В настоящее время главная страница /s с подписками просто отображает варианты подписки и оплаты. У каждого варианта подписки или оплаты есть лишь ограниченное количество символов для текста.
Для моих целей я хотел бы сделать страницу входа /s немного более приветливой и информативной, а не просто «только для бизнеса».
Возможно ли добавить какой-либо вступительный или информационный текст на страницу /s выше вариантов подписки/оплаты? Или это что-то, что может быть реализовано (когда-нибудь) в качестве опции, или это выходит за рамки возможностей?
По сути, просто редактируемое пользователем текстовое поле со стандартными возможностями форматирования над текущими вариантами.
Я пока не очень знаком с опциями редактирования CSS в Discourse, поэтому не уверен, что возможно при редактировании страниц, плагинов или компонентов. Прошу прощения за мою неосведомленность.
До/После. Обратите внимание: я изменил текст по умолчанию «Подписки» на «Оплатить», поскольку мы предлагаем не только подписки. Хотя, похоже, этот текст также связан с заголовком страницы. Поэтому в моём случае логичнее добавить блок текста над существующим заголовком страницы, а не под ним.
Могу ли я воспользоваться этим, если мой форум размещён на хостинге? Инструкция для новых пользователей Discourse немного скудна, поэтому, вероятно, я пока не самый подходящий кандидат для использования, но я пытаюсь как можно быстрее разобраться, и это выглядит очень удобным.
Мне пришлось перейти на страницу GitHub, чтобы найти ссылку на это:
Чтобы найти точки подключения плагинов, выполните enableDevTools() в консоли JavaScript.
Да. Это компонент темы. (По крайней мере, большинство тарифных планов позволяют устанавливать любые компоненты темы, которые вы хотите). Вы пробовали нажать большую синюю кнопку с надписью «Установить этот компонент темы»?
(Представьте, что «Оплата услуг» — это «Оплатить»). Вы можете разместить его либо в top-notices, либо в above-main-container, но, боюсь, это добавит контент на каждую страницу, а не только на страницу оплаты, если вы не сможете найти способ скрыть его на всех остальных страницах с помощью CSS. Если вы терпеливы, у вас есть хорошие шансы получить ответ на https://ask.discourse.com/, где вам подскажут, как это сделать.
С другой стороны, было бы справедливо попросить добавить точку расширения плагина на этой странице, но это уже отдельная тема для изучения.
Да. Я уже на том уровне, когда могу устанавливать компоненты темы без проблем.
Совсем не собирался критиковать. Извините, если так вышло. Это было просто наблюдение от нового пользователя.
Да, я уже наткнулся на эту ссылку раньше в своих поисках. Проблема в том, что я пока не знаю, как запустить Discourse в среде разработки (или получить к нему доступ через консоль браузера).
Поэтому мой вопрос о возможности использовать ваш компонент касался именно этого: мне нужен доступ к панели разработчика, чтобы применить его, а не установка самого компонента. Извините за путаницу.
Я не знал об этом ресурсе, спасибо.
Что касается размещения, меня устраивает любой вариант, при котором вступительный текст легко поместится над самим контентом «подписки», главное — чтобы он не отображался на каждой странице.
Нет, нет. Я имел в виду именно это, да. Вы правы. Документацию нужно улучшить. Вот почему я сказал, что это «справедливо»!
Вам это не нужно. Просто откройте инструменты разработчика в браузере (F12 работает, если вы не на Mac; а на Mac мне приходится каждый раз гуглить «как открыть инструменты разработчика в браузере на Mac», даже когда сам Mac находится в двух шагах), и введите enableDevTools() в приглашение консоли. Вы можете сделать это прямо здесь, прямо сейчас, на этом сайте.
Ах, понятно. Консоль разработчика браузера, а не какая-то консоль, зависящая от Discourse. Теперь всё начинает складываться воедино. Спасибо.
Я включил пользовательские компоненты. Включил devtools в консоли браузера. И активировал панель инструментов разработчика, чтобы видеть компоненты плагинов.
Теперь я понимаю: вы говорите, что для «Подписок» нет компонента плагина, поэтому нет *простого способа разместить текст на этой конкретной целевой странице. Понял.
*Простой в смысле: Шаг 1. Шаг 2. Шаг 3. Готово! И без необходимости тратить часы на исследования и изучение CSS и т. д.
Где-то я читал в своих недавних поисках по «Подпискам» (извините, сейчас у меня нет ссылки), что их всё равно планировали переработать. Надеюсь, моё предложение по добавлению области для вступления/текста будет учтено в будущей разработке.
На странице подписки должен быть класс body, который присутствует только на ней. Тогда вы сможете использовать CSS, чтобы скрыть элемент, добавляемый на все страницы, кроме страницы подписки.
Да, у страницы подписки есть class="above-main-container-outlet subscriptions-campaign ember-view", поэтому вы можете скрыть класс добавляемого элемента, а затем показать его, если он находится в кампании подписки. Что-то в этом роде.
После того как я немного поискал в Google и на Stack Overflow, я собрал версию на чистом CSS:
.above-main-container-outlet.subscriptions-campaign::after {
content: "Любой текст, который я хочу здесь разместить! \A Это новая строка! \A";
white-space: pre;
}
Мне удалось заставить это работать только на странице подписок, и в основном с правильным форматированием, используя следующее.
Огромное спасибо @pfaffman и @NateDhaliwal за предоставленные подсказки, необходимые для полного решения моей задачи.
Примечание: Это работает для моих нужд, но это довольно хаковое решение.
Перейдите в раздел «Администрирование»
Перейдите в раздел «Темы и компоненты»
Выберите вкладку «Компоненты»
Выберите «Установить»
В параметрах выберите «Новый»
Вставьте CSS-код (ниже)
Отредактируйте CSS в соответствии с вашими потребностями
Сохраните
Включите его (если он еще не включен) и убедитесь, что он активен для вашей конкретной темы (или тем) («включить этот компонент в этих темах»).
Совет: Нужна помощь в тонкой настройке CSS? Обратитесь к ИИ-модели, такой как Gemini, Claude… передайте ей CSS-код и расскажите, что вы хотите сделать.
/* ЧАСТЬ 1: Заголовок (стилизованный как нативный H1) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
content: "Это заголовок";
display: block;
/* Стилизация под заголовки 'title-wrapper' */
font-family: var(--heading-font-family);
font-size: var(--font-up-5);
font-weight: bold;
line-height: var(--line-height-small);
color: #DDDDDD;
/* Отступ между этим заголовком и текстом ниже */
margin-bottom: 8px;
}
/* ЧАСТЬ 2: Основной текст (с отступом снизу) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
content: "Это обычный текст, который идет под заголовком. \A Здесь можно использовать обратный слэш-A для новых строк.";
display: block;
/* Стилизация под стандартный основной текст */
font-family: var(--font-family);
font-size: var(--font-0);
line-height: var(--line-height-medium);
color: #DDDDDD;
white-space: pre-wrap;
/* Это создает пустое пространство (перенос строки) под вашим текстом */
margin-bottom: 40px;
}
