А, теперь я понял. Я думал, что цель embedMaxHeight — отобразить комментарии в более нативном стиле, максимально минимизируя прокрутку (за исключением длинных веток, которые всё равно потребуют прокрутки). Поэтому я установил его в 15000px. Я немного уменьшу это значение.
В таком случае, похоже, что embedMinHeight работает не так, как задумано. Даже при установке в 400px, встраиваемый блок всё равно имеет высоту не менее 600px, и в конце остаётся небольшой зазор.
Привет!
Новая форма комментариев значительно лучше, особенно на мобильных устройствах! Однако я заметил две небольшие проблемы:
Да! @keegan создавал её, ориентируясь именно на это основное сценарий использования, рад, что вам понравилось. Мы объединили изменения всего несколько часов назад, так что сейчас работаем над доработками, например, над шириной панели инструментов и поведением отправки по нажатию Enter.
Интересно, не было бы хорошей идеей отображать эту форму прямо в теме (на Discourse). Открытая форма обычно гораздо более привлекательна и удобна для нетехнической аудитории. Возможно, стоит провести тест, чтобы увидеть, повысит ли это вовлеченность?
Действительно, это была ошибка, только что исправил её в
Это уже исправлено, пожалуйста, обновитесь!
Я заметил ещё одну проблему на вашем сайте. Вижу, что вы интегрировали систему переключения тёмной/светлой темы вашего блога с новым встраиваемым кодом Discourse, так что изменение темы блога автоматически меняет тему встраиваемого блока. Однако, хотя интеграция отлично работает в Firefox и Chrome, она не работает в Safari. Я предполагаю, что это проблема самого Discourse, поскольку всплывающее окно «Разрешить доступ» актуально только для Safari, и ещё одна проблема с некорректной работой полосы прокрутки также затрагивает только Safari.
Но отложив это в сторону, мне интересно, как вам удалось реализовать интеграцию тёмной/светлой темы. Несколько лет назад я создал тему Автоматический тёмный режим для встроенных комментариев, и благодаря этому мне удалось найти кого-то, кто написал скрипт с использованием postMessage для синхронизации обеих систем. Однако с новым встраиваемым кодом полной системы комментариев Discourse этот скрипт, похоже, перестал работать (причём по умолчанию странно устанавливается тёмная тема самого Discourse). Так что мой вопрос: писали ли вы ранее скрипт с использованием postMessage, который затем обновили для новой системы встраивания Discourse? И если да (и хотя вы используете WordPress, а я — Ghost), не могли бы вы поделиться своим кодом? Возможно, я смогу сравнить его с тем, что у меня есть, и попытаться заставить всё работать с Ghost и настройками тёмной темы моего блога.
Если и ваш блог, и Discourse используют автоматический темный режим в соответствии с системными настройками, они будут синхронизированы.
Мы добавили автоматический темный режим в Discourse в Automatic Dark Mode color scheme switching
Да, но если я правильно понимаю и помню, это позволяет Discourse обнаруживать, использует ли операционная система тёмный режим, и затем соответствующим образом настраиваться. Мой пост, который был ответом на тот, на который вы дали ссылку (и который также ссылался на него), касался переключателя/кнопки в блоге, который вручную переключает между светлым и тёмным режимами блога (независимо от режима операционной системы). Так ли это (и тем самым делает мой предыдущий вопрос актуальным)?
Чтобы быть точным, это скрипт, который кто-то написал для использования в моём блоге, который, я думаю, теперь нуждается в некоторой корректировке (возможно, нужно просто изменить несколько классов, я не уверен).
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// Обновить элементы после domContentLoaded
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>
Я только что обновил Discourse до последней версии, но у меня возникли две проблемы:
Конечно,
Вот CSS, который я использую в Discourse
header a.button {
color: #fff;
padding: 6px 8px;
background-color: var(--tertiary);
display: inline-block;
}
.username a.staff {
padding: 2px 5px;
border-radius: 4px;
color: var(--tertiary-hover);
// text-shadow: 0px 0px 14px var(--tertiary-400);
background-color: var(--tertiary-400);
}
@media (prefers-color-scheme: light) {
/* Основной фон Iframe */
html, body {
font-family: 'Inter', sans-serif;
}
}
@media (prefers-color-scheme: dark) {
/* Основной фон Iframe */
html, body {
background-color: #1e2021 !important; /* Ваш --bg */
color: #f7f7f7 !important; /* Ваш --body-color */
font-family: 'Inter', sans-serif;
}
header.discourse {
border-bottom: 3px solid rgb(50.82, 50.82, 50.82);
}
article.post {
border-bottom: 1px solid rgb(50.82, 50.82, 50.82);
}
/* Цвет основного текста */
.embedded-posts,
.embedded-posts p,
.embedded-posts h1,
.embedded-posts h2,
.embedded-posts h3 {
color: #f7f7f7 !important;
}
/* Фон блоков, например, подвал встраивания (варианты ответов) */
.embedded-footer {
background: #27292b !important; /* Ваш --bg-2 */
border-top: 1px solid #27292b !important;
}
/* Цвет границ (чтобы светлые границы не выделялись) */
.embedded-posts, .embedded-footer {
border-color: #27292b !important;
}
/* Обеспечивает правильный цвет ссылок/кнопок */
// a:link, a:visited, .topic-post .post-action-list button {
// color: #35bcf1 !important; /* Ваш --link-color */
// }
}
В данном случае, я считаю, что правильным подходом было бы инициировать событие мониторинга, не запуская при этом весь тег. Текущая настройка искажает данные нашей аналитики, так как она запускает событие page_view, что искусственно завышает все показатели сайта.
За одну ночь количество наших просмотров резко выросло, но эти цифры искусственные — они не имеют никакого коммерческого смысла.
Не говоря уже о том, что мы сейчас дублируем загрузку и обработку скриптов.
В случае с GTM (Google Tag Manager) ситуация ещё хуже: каждый другой скрипт в аккаунте внедряется дважды, включая пиксели Google и Meta Ads, скрипты сторонних рекламных сетей и многое другое.
Что касается встроенной аналитики Discourse, я предлагаю одно дополнительное изменение: выделить трафик из embed-элементов в отдельную категорию. Это позволило бы нам отдельно отслеживать трафик сообщества и трафик из embed-элементов.
Большое спасибо за это, я очень ценю это. Однако это немного сбивает меня с толку. Когда я пытался заставить переключатель тёмной темы на моём блоге, использующем Ghost, работать с встраиванием Discourse (так как по умолчанию это не работало), мне в конечном итоге сказали, что мне придётся реализовать код, использующий postMessage (который я заказал у кого-то, и который сработал). Но код, который вы предоставили, вообще не содержит JavaScript, что для меня не имеет смысла, и я не вижу, почему всё должно работать из коробки из-за использования WordPress. В любом случае, всё равно спасибо.
Всем привет, просто хотел уточнить, удалось ли кому-нибудь уже разобраться в этой проблеме?
Мои пользователи сообщают, что они вообще не могут пользоваться формой из-за проблемы с полем ввода текста, поэтому это начинает серьёзно мешать работе нашего сообщества.
LucasMiller: В интерфейсе комментариев под статьями есть баг; я не могу ничего ввести, чтобы опубликовать комментарий (проверено на iPhone и Android/Xiaomi). Вы нажимаете на поле ввода текста, но он просто не регистрирует вводимые символы. Пожалуйста, посмотрите, когда будет возможность!
Это происходит только на статьях, где это был бы первый комментарий.
LucasMiller: Мне удалось опубликовать комментарий только создав цитату без добавления текста. Только после того, как меня перенаправило в интерфейс Сообщества (вместо того, чтобы остаться под статьёй), я смог действительно добавить свой комментарий.
Временное решение с Markdown помогает, но оно не идеально для обычного пользователя. Буду очень признателен за любые идеи или временные исправления! Ещё раз спасибо за помощь.
cc @Falco
Это должно исправить проблему, обновление будет выпущено сегодня.
Спасибо, @renato
Спасибо, @renato, проблема решена!
Просто на всякий случай: горизонтальная прокрутка всё ещё отображается на мобильных устройствах, если будет возможность, взгляни на это
У меня это происходит со всеми статьями. Возможно, это проблема, специфичная только для iOS? Вот несколько скриншотов из Safari и Chrome.
