啊，我现在明白了。我原本以为 embedMaxHeight 的目的是以更原生的样式渲染评论，尽可能减少滚动（除非是长篇线程，那仍然需要滚动）。所以我将其设置为 15000 像素。我会适当调低这个值。
那样的话，我认为 embedMinHeight 可能没有按预期工作。即使将其设置为 400 像素，嵌入内容的高度仍然至少有 600 像素，末尾还留有一个小间隙。
5 个赞
3 个赞
没错！@keegan 在开发时将其作为核心用例之一，很高兴你喜欢。不过我们才刚刚在几个小时前合并了它，因此仍在处理后续问题，比如工具栏宽度断裂和按回车键发送的行为。
4 个赞
我在想，是否也值得直接在帖子（Discourse）中显示这个表单。对于非技术用户来说，表单直接展开通常更具吸引力且更友好。或许可以测试一下，看看是否能提升参与度？
3 个赞
这确实是一个 bug，已在以下链接中修复：
2 个赞
此问题现已修复，请更新！
1 个赞
我注意到您的网站上还有另一个问题。我看到您将博客的深色/浅色模式系统与新的 Discourse 嵌入功能进行了集成，因此更改博客模式会自动切换嵌入内容的模式。然而，虽然该集成在 Firefox 和 Chrome 中运行正常，但在 Safari 中却无法工作。我猜这是 Discourse 的问题，因为不仅“允许访问”弹窗仅与 Safari 相关，而且滚动条显示异常的问题也仅出现在 Safari 中。
暂且撇开上述问题不谈，我很好奇您是如何实现深色/浅色模式集成的。几年前，我发起了一篇题为《自动为嵌入评论应用深色模式》的帖子，并据此请人编写了一个使用 postMessage 的脚本，使两个系统能够协同工作。但随着 Discourse 推出全新的评论系统嵌入功能，该脚本似乎已失效（默认情况下意外地采用了 Discourse 主题的深色模式）。所以我想问：您之前是否编写过 postMessage 脚本，并针对 Discourse 的新嵌入系统进行了更新？如果是的话（尽管您使用 WordPress，而我使用 Ghost），您是否介意分享您的代码？或许我可以将您的代码与我现有的代码进行对比，尝试让 Ghost 和博客的深色模式设置也能正常工作。
如果你的博客和 Discourse 都使用跟随系统的自动深色模式，它们将保持同步。
我们在 Discourse 中添加了自动深色模式，详情参见：Automatic Dark Mode color scheme switching
2 个赞
是的，但据我理解并回忆，这使 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 更新到最新版本，但发现了两个问题：
- 文本框已损坏——输入时没有任何内容显示
- 如果我将模式切换为 Markdown，则功能正常。
- 嵌入内容在 Safari/iOS 上仍显示横向滚动条；
当然可以，
这是我在 Discourse 中使用的 CSS：
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 广告像素、第三方广告网络脚本等。
关于 Discourse 原生分析功能，我建议再做一项调整：将嵌入流量单独归类。这样我们就可以分别查看社区流量和嵌入流量。
2 个赞
非常感谢，我很感激。不过，这让我有点困惑。当我试图让使用 Ghost 的博客上的深色模式切换与 Discourse 嵌入协同工作时（默认情况下它无法工作），我最终被告知需要实现一些使用 postMessage 的代码（我请人编写了这段代码，并且确实奏效了）。但是您提供的代码中没有任何 JavaScript，这对我来说说不通，我也不明白为什么在 WordPress 环境下它就能开箱即用。无论如何，还是要感谢您的帮助。
大家好，想确认一下是否有人已经查看过这个问题？
我的用户反馈，由于文本框的问题，他们完全无法使用表单，这已成为我们社区的一个阻碍。
LucasMiller：文章下方的评论界面存在 bug；我无法输入任何内容来发布（已在 iPhone 和 Android/Xiaomi 上测试）。点击文本框准备输入，但系统完全不响应任何输入。请在方便时查看一下！
这个问题仅出现在会是第一条评论的文章中。
LucasMiller：我唯一能发布评论的方法是创建一个不带任何文本的引用。只有在被重定向到社区界面（而不是停留在文章下方）后，我才能实际添加我的评论。
Markdown 的变通方法有所帮助，但对普通用户来说并不理想。任何见解或临时解决方案都将不胜感激！再次感谢大家的帮助。
cc @Falco
1 个赞
4 个赞
这应该能解决问题，预计今天晚些时候上线
感谢 @renato
4 个赞
谢谢 @renato，问题已修复！
提醒一下：在移动设备上横向滚动条仍然显示，方便时请查看。
1 个赞
