Ах, теперь я понимаю. Я думал, что цель embedMaxHeight — отображать комментарии в более нативном стиле, сводя прокрутку к минимуму (за исключением длинных веток, где прокрутка всё же потребуется). Поэтому я установил значение 15000 пикселей. Я немного уменьшу его.
В таком случае, похоже, что embedMinHeight работает не так, как задумано. Даже при установке в 400 пикселей встроенный блок имеет высоту не менее 600 пикселей, и в конце остаётся небольшой зазор.
Привет!
Новообразованная форма комментариев значительно лучше, особенно в мобильной версии! Однако я выявил два небольших недочета:
Да! @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');
// Обновление элементов после загрузки DOM
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;
}
/* Фон блоков, например, подвал embed (опции ответа) */
.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.
