# 在另一个网站上通过 iframe 嵌入整个 Discourse 论坛

**URL:** https://meta.discourse.org/t/embedding-a-whole-discourse-forum-on-another-site-in-an-iframe/157631
**Category:** Support
**Created:** [2020年七月13日 19:11 UTC](https://meta.discourse.org/t/embedding-a-whole-discourse-forum-on-another-site-in-an-iframe/157631 "2020-07-13T19:11:12Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![trusktr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/trusktr/32/116841_2.png) [@trusktr](https://meta.discourse.org/u/trusktr)
#### Post date: [2020年七月13日 19:11 UTC](https://meta.discourse.org/t/embedding-a-whole-discourse-forum-on-another-site-in-an-iframe/157631/1 "2020-07-13T19:11:12Z")

</div>

这已经在另外两个帖子中讨论过了，但那些帖子已被锁定：

- [How to embed whole forum in another site](https://meta.discourse.org/t/how-to-embed-whole-forum-in-another-site/32205)
- [Embed whole forum](https://meta.discourse.org/t/embed-whole-forum/150497)

有些人认为我们应该转而致力于重新设计 Discourse，使其与现有网站的设计风格相匹配。

根据经验，这非常困难。相关的标记（Markup）及其 CSS 非常复杂，且缺乏灵活性。例如，Discourse 头部与主内容之间的 DOM 树结构差异很大。在 Discourse 内置编辑器中注入头部内容时，注入的内容会与实际 Discourse 头部相距甚远。

相信我，简单地“让你的 Discourse 遵循你的主网站主题”是非常困难的。

接下来我想尝试的是将 Discourse 嵌入到 `<iframe>` 中。让我们看看效果如何。

* * *

功能请求！如果 Discourse 能以一组自定义元素的形式被调用，那就太棒了。例如：

```html
<!-- ... 一些自定义标记 ... -->

<discourse-actions backend="http://url.to/actual/discourse/instance">

<!-- ... 一些自定义标记 ... -->

<discourse-main backend="http://url.to/actual/discourse/instance">

```

这将允许将 Discourse 的各个部分嵌入到网站的任何位置，并且这些元素会连接到指定的后端。

直接访问 `http://url.to/actual/discourse/instance` 仍会以常规方式打开 Discourse，作为一个独立的 Web 应用程序。

基本上，这将使 Discourse 的各个部分能够在整体 HTML 结构中使用（类似于 Handlebars 模板片段，但基于 Web 标准构建，更具前瞻性）。

想象一下，如果拥有这样的功能，还有哪些可能性（例如，当自定义元素具有不同的 `backend` 属性值时）……

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2020年七月14日 00:59 UTC](https://meta.discourse.org/t/embedding-a-whole-discourse-forum-on-another-site-in-an-iframe/157631/2 "2020-07-14T00:59:15Z")

</div>

我们当然无法阻止你尝试在 iframe 中嵌入 Discourse，但正如在其他主题中警告的那样……这种方式预计会比较脆弱且充满问题……而我们并不打算投入时间解决与 iframe 相关的问题。

花时间详细描述你在为 Discourse 设计主题时遇到的问题，以便我们提供帮助和/或改进流程，可能是更明智的选择。在过去几年里，我们已经大幅改进了主题功能，并且我们非常希望在这方面提供支持并尽可能进行优化。

有些元素确实比其他元素更难定制，头部（header）就是其中之一。这是因为为了实现性能提升，我们引入了虚拟 DOM（[https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347）。](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347%EF%BC%89%E3%80%82)

因此，如果你打算在头部插入内容，你需要利用该虚拟 DOM 系统，而不是通过管理后台界面（admin UI）在头部之前或之后添加内容（关于这一点，在 [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648/1) 的高级插件 API 部分有所涉及）。此外，#Customization > Theme component 中也有一些操纵头部内容的优秀示例，例如 [https://meta.discourse.org/t/custom-header-links/90588。](https://meta.discourse.org/t/custom-header-links/90588%E3%80%82)

---

<div class="post-metadata">

### Author: ![Bobby99as](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bobby99as/32/211077_2.png) [@Bobby99as](https://meta.discourse.org/u/Bobby99as)
#### Post date: [2021年三月23日 05:41 UTC](https://meta.discourse.org/t/embedding-a-whole-discourse-forum-on-another-site-in-an-iframe/157631/3 "2021-03-23T05:41:59Z")

</div>

这功能如果能实现就太好了，但我发现它仍然无法正常工作，尝试时只会显示：

 ![Screenshot (22)](https://global.discourse-cdn.com/meta/original/3X/8/f/8f282469f33619aa68d45c860a3aedb89827fef5.png)