啊，我现在明白了。我原本以为 embedMaxHeight 的目的是以更像原生风格的方式渲染评论，尽可能减少滚动（除非是长篇帖子，仍然需要滚动）。这就是为什么我将其设置为 15000px。我会适当减小这个值。
在这种情况下，我认为 embedMinHeight 可能没有按预期工作。即使设置为 400px，嵌入内容的高度仍然至少为 600px，并且末尾仍有一个小间隙。
5 个赞
3 个赞
没错！@keegan 在开发时就是以这一场景为核心用例，很高兴你喜欢。不过我们才在几个小时前将其合并，所以还在继续跟进后续工作，比如工具栏的宽度适配和按 Enter 键发送的功能。
4 个赞
我在想，是否也应该在 Discourse 的帖子中直接显示此表单。对于非技术用户来说，表单直接打开通常更具吸引力且更友好。也许值得测试一下，看看是否能提高参与度？
3 个赞
这确实是一个 bug，刚刚已在
2 个赞
该问题现已修复，请更新！
1 个赞
我在你的网站上还注意到另一个问题。我看到你将博客的深色模式/浅色模式系统与新 Discourse 嵌入功能进行了集成，这样在切换博客模式时，嵌入内容的模式也会自动切换。然而，虽然这种集成在 Firefox 和 Chrome 中运行良好，但在 Safari 中却无法正常工作。我猜测这可能是 Discourse 的问题，因为不仅“允许访问”弹窗仅与 Safari 有关，另一个滚动条工作异常的问题也仅影响 Safari。
暂且不提这些，我很好奇你是如何实现深色模式/浅色模式集成的。几年前，我发布了一篇关于嵌入评论的自动深色模式的帖子，并因此让某人编写了一个使用 postMessage 的脚本，使两个系统能够协同工作。但在 Discourse 新的完整评论系统嵌入中，该脚本似乎已失效（默认奇怪地变成了 Discourse 主题的深色模式）。所以我的问题是：你是否之前编写过一个 postMessage 脚本，并针对 Discourse 的新嵌入系统进行了更新？如果是这样（尽管你使用 WordPress 而我使用 Ghost），你是否愿意分享你的代码？也许我可以将你的代码与我现有的代码进行对比，尝试在 Ghost 和我的博客深色模式设置中让一切正常工作。
如果你的博客和 Discourse 都使用跟随系统的自动暗色模式，它们将保持同步。
我们在 Automatic Dark Mode color scheme switching 中将自动暗色模式添加到了 Discourse 中。
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 个赞
