在另一个网站中嵌入 Discourse 主题列表

新闻和活动 公告
59

我认为这目前不可行。Discourse 中用于检索主题的代码仅拉取最新的主题列表。据我所知，可用于对列表进行排序的过滤器包括 replies（回复数）、views（浏览量）、activity（活跃度）和 likes（点赞数）。您可以尝试使用这些过滤器之一来排序列表，以筛选出最佳主题。例如：

<d-topics-list discourse-url="http://localhost:3000" category="14" per-page="5" order="replies"></d-topics-list>

iframe 中使用的字体是在 Discourse 端设置的。在我运行的最新版本的 Discourse 中，当我在 WordPress 站点上嵌入主题列表时，遇到了设置字体的问题。我目前是在本地进行测试，而非生产环境，这可能与问题有关。我发现传递给 iframe 字体的样式如下：

font-family: var(--font-family);

该样式是在 Discourse 上设置的，但 WordPress 无法访问该变量，因此在我的站点上字体被设置为 Times New Roman。我会进一步调查此问题。（编辑：设置字体的问题是由于 Discourse 最近的更改导致的。我们将修复此问题。）

这可能会有些棘手。创建的 iframe 位于您添加到页面的 d-topics-list 元素内部。在我的网站 CSS 中将值设置为明确的宽度对我有效。不过，我认为这还有改进空间：

d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}
6 个赞
61

在 iframe 的左上角有一个数字（例如 110.5ms），它会链接到 /embed/topics。有没有办法去掉它？

编辑：答案是，只有“Discourse 开发者”才会看到它：What is this box at the upper left displaying timings in milliseconds when I am logged in as admin? :slight_smile:

7 个赞
75

你好！我正在尝试将帖子嵌入到 WordPress 站点中，嵌入功能已经正常运作。请问有没有办法让移动端视图看起来更美观一些？如果帖子包含图片，带有图片的列布局会被挤压在一起，一个简单的

@media (max-width: 768px) {
	.topics-list .topic-list-item .topic-column-wrapper {
	    flex-direction: column;
	}
}

就能解决这个问题。不知是否有可能实现类似的功能？

祝好，M

3 个赞
76

在编辑主题时，您应该能够在此处添加自定义 CSS。您希望将其放在核心中有什么原因吗？

2 个赞
77

哦，我没想到这会加载我的 Discourse 主题 CSS，让我试试，稍后回复你！

2 个赞
78

为此，主题下有一个专门的嵌入部分！

4 个赞
79

你好，我已经在网站上嵌入了一份主题列表，但现在我想根据标签仅展示一个主题。我成功嵌入了另一个列表（设置了 per-page=1），但问题是我无法添加 CSS 类或 ID，因此这两个列表之间完全没有区别。

这意味着，即使只是为其中一个嵌入列表设置不同的背景颜色这样简单的操作也无法实现。

请问有什么变通方法吗？

非常感谢您的帮助。

2 个赞
80

感谢 @eviltrout，将那段代码添加到“嵌入式 CSS"中果然奏效了！

2 个赞
82

目前无法为不同的嵌入内容添加不同的 CSS 规则。您只能添加适用于所有嵌入内容的自定义样式。

4 个赞
83

我在将最新主题嵌入到 https://vceliquidrecipes.com/ 时看到以下错误：

includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168 POST https://vapingcommunity.co.uk/mini-profiler-resources/results 404

(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168
fetchResults @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:169
initPopupView @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:763
doInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1050
sc.onload.sc.onreadystatechange @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1065
load (async)
load @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1061
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1109
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1089
setTimeout (async)
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1085
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1118
(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1463

我的嵌入代码如下：

<d-topics-list discourse-url="https://vapingcommunity.co.uk" status="open" order="replies" per-page="10"></d-topics-list>
2 个赞
84

这些错误看起来来自 MiniProfiler，可能与普通用户看到的内容无关。我访问了您的网站，看到的是一个主题列表，没有显示任何错误。

4 个赞
85

哦，所以这是正常的，它们会显示在日志中，对吗？

2 个赞
86

我不确定这是否正常，但无需担心。大多数用户无法访问 MiniProfiler，因此可能只有在你操作时才会显示。

3 个赞
87

好的，感谢您的帮助，一如既往，我们非常感激。请继续保持出色的工作。

2 个赞
88

您好，感谢您为此付出的辛勤努力。

在 Firefox 和 Chrome 浏览器上，列表未按预期工作。虽然我们将其设置为显示 10 个主题，但实际只显示了 4 个。

在 Chrome 中嵌入列表时，我们观察到以下 JavaScript 错误：

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    at u (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:105)
    at window.onload (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:515)

有趣的是，Safari 上并未出现此问题。

该列表嵌入在以下网站：https://rebetiko.sealabs.net（位于页面底部，如果您想自行测试）。

4 个赞
89

你们中有人能复现这个问题吗？:slight_smile:

CC: @JimPas, @simon, @Vaping_Community

3 个赞
90

页面上有 10 个主题链接，其中 6 个因某种原因被隐藏，我不清楚这个错误的原因。

为 iframe 添加高度可以显示被隐藏的主题链接：

d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}
4 个赞
91

我也遇到过这个问题。有时显示正常，有时主题列表会被截断（看起来像是按像素数量而非主题数量决定的），而且字体也不符合预期（具体细节我记不清了）。后来我改用 Discourse 的 RSS 订阅源了。我只使用 Chrome 浏览器，当时也没怀疑这可能是 Chrome 特有的问题。

3 个赞
92

你好！

有没有办法从列表中排除某些主题？

2 个赞
93

你可以试试用标签来实现？给想显示在列表中的主题打上标签，然后按标签筛选？

5 个赞