如果您获取 Discourse 的最新构建版本，您将能够通过一些简单的 JavaScript 和 HTML，在其他网站中嵌入主题列表。
此功能的典型用例是博客或其他以内容为主的网站，您希望在屏幕侧边显示一个列出主题的部件。您可以按分类、标签或其他任何公开可用的筛选选项进行过滤。
如何嵌入主题列表
首先，您必须启用“嵌入主题列表”站点设置。
然后，在您的 HTML 中添加一个 <script> 标签，包含嵌入 Discourse 主题所需的 JavaScript。您可以将此标签放在您通常添加脚本的任何位置。例如：
<script src="http://URL/javascripts/embed-topics.js"></script>
将 URL 替换为论坛地址，如果存在子文件夹，请包含该子文件夹。
之后，在 HTML 文档的 <body> 中，添加一个 d-topics-list 标签以指示您要嵌入的主题列表。您也需要在此处将 URL 替换为您的基础 URL：
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
您提供的任何属性（除了必需的 discourse-url）都将被转换为主题搜索的查询参数。因此，如果您想按标签搜索主题，可以这样做：
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
如果查询参数包含下划线，请将其转换为连字符。在上面的示例中，您可能已经注意到 per_page 变成了 per-page。
在 SameSite 上下文中（即嵌入网站与您的论坛共享父域名），Discourse 将知道您是否已登录论坛，并相应地显示结果。如果您在登录时看到安全分类等内容，请不要感到惊讶——匿名用户将无法看到！
参数列表
template：complete 或 basic（默认）。虽然 basic 仅显示主题标题列表，但 complete 会包含标题、用户名、用户头像、创建日期和主题缩略图。
per-page：数字。控制返回的主题数量。
category：数字。将主题限制为单个分类。传递目标分类的 id。
allow-create：布尔值。如果启用，嵌入内容将包含一个“新建主题”按钮。
tags：字符串。将主题限制为与此标签关联的主题。
top_period：all、yearly、quarterly、monthly、weekly 或 daily 之一。如果启用，将返回该时期的“热门”主题。
示例
我在此处创建了一个示例网站：
您应该能够在浏览器中查看源代码以查看代码，但整个源代码也在 GitHub 上：
这是一项全新功能，因此任何反馈或请求都将不胜感激。
样式化列表
您可以使用现有的主题功能为嵌入列表添加自定义样式。
例如，默认情况下，使用 complete 模板的嵌入列表看起来如下：
如果您希望它看起来像网格，可以在 主题 > 通用 > 嵌入 CSS 中添加自定义 SCSS：
.topics-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
.topic-list-item {
.main-link {
border: 1px dotted gray;
padding: 0;
}
.topic-column-wrapper {
flex-direction: column-reverse;
.topic-column.details-column {
width: 100%;
}
.topic-column.featured-image-column .topic-featured-image img {
max-width: initial;
max-height: initial;
width: 100%;
}
}
}
}
这将使其看起来像这样：
