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

新闻和活动 公告
95

你好，

我在想，是否有一种方法可以像论坛首页那样，显示最新发帖作者的头像和帖子分类，而不仅仅是显示主题标题？

3 个赞
96

如果您传递 template=complete，嵌入内容中将包含更多信息：

image
image563×915 87.8 KB

3 个赞
97

哇，谢谢，这……信息量太大了 :laughing: 有没有折中的办法，或者我该用自定义 CSS 隐藏多余的信息？

另外，这里显示的是话题作者，而不是最新帖子的作者。

3 个赞
98

完整的模板将所有信息包裹在容器中，因为预期每个网站都会使用 CSS 对其进行自定义，以匹配其自身的设计风格。

3 个赞
99

这太棒了！

可以更改它的宽度吗？

2 个赞
100

这是一个流体容器，它将适应父元素的宽度。

2 个赞
101

在我的网站上不行。不幸的是，它太宽了，超出了所在 div 的宽度。

2 个赞
102

请仔细检查标记，正确隐藏和定位元素，它应在任何容器中都能正常工作：

2 个赞
103

遗憾的是，这在我的网站上不起作用。我想可能是响应式框架中的 CSS 内容造成了干扰。有没有办法调整宽度（例如，将其设为当前值的 90%，或者减少若干像素的宽度）？

2 个赞
104

你试过使用类似这样的 CSS 吗：

d-topics-list iframe {
    padding: 0 5%;
}

？

2 个赞
105

这不起作用。不过，如果我在 Chrome 的 F12 控制台中编辑 iframe 标签并添加 width="100%"，它就能正常工作了……有什么方法可以实现这一更改吗？

2 个赞
106

我已在主帖的列表中添加了如何添加自定义 CSS 的示例。

4 个赞
107

谢谢。我试过了，这确实让嵌入的话题以网格形式显示。但不幸的是，网格的宽度（即两个话题）仍然和之前一样，远未达到 100%。

上面的 CSS（d-topics-list iframe）完全没有改变 iframe 的样式。要是能把它改成“width: 100%”就好了……

我还在其他空白的 HTML 文档中测试过，它依然很窄。还有什么其他建议吗？:slight_smile:

3 个赞
108

太喜欢这个嵌入了……:sparkles:

有几个问题，还有一个功能请求……：

  • 如果我添加 allow-create="true" 和 category="4" 参数，点击“+ 创建新主题”按钮时，“添加新主题”的模态框/弹窗没有弹出。这符合预期吗？
  • 如果我添加 allow-create="true" 和 tags="random-tag" 参数，点击“+ 创建新主题”按钮后，会被带到过滤了 random-tag 的主题列表——但标签下拉菜单中没有显示“random-tag”，而且点击“添加新主题”时，标签也没有被预填。
  • 我们能否在完整主题中显示帖子的前 100 个单词左右？
4 个赞
109

这太好了！

另外，我仍然希望能解决宽度问题……:slight_smile:

2 个赞
110

CSS 需要添加到你的网站上，而不是 Discourse 的嵌入式 CSS。因此，你会有类似这样的代码：

<html>
  <head>
    <script src="https://jonathan5-discourse.com/javascripts/embed-topics.js"> 
    </script>
    <style>
      d-topics-list iframe{
        width: 100%!important;
        }
    </style>
  </head>
  <body>
    <d-topics-list discourse-url="https://jonathan5-discourse.com" category="5" per-page="5"></d-topics-list>
  </body>
</html>
6 个赞
Examples of styling and use of Embedding a list of Discourse Topics on a external site
111

非常感谢。现在这看起来很明显了。我之前从无法为 iframe 的内部 CSS 设置样式（尝试在我的网站内操作），变成了无法为 iframe 本身设置样式（尝试在 Discourse 内操作）。我会试试这个方法，然后回来反馈！

更新：您的 CSS 生效了——非常感谢。

4 个赞
112

我刚刚试了一下。在我的情况下是 category=5，因为这是我正在嵌入的类别编号。它没有显示弹出窗口，而是打开了一个新标签页，URL 为 https://forum.example.com/new-topic?category_id=5。也许你的浏览器设置阻止了这类“弹出窗口”？

2 个赞
113

感谢确认它对你有效，@Jonathan5。我已禁用了 discourse-tag-sidebar 主题组件，现在弹窗可以正常工作了 :sunglasses:

3 个赞
114

我会查看一下这个问题 :eyes:

4 个赞