有人在这里使用他们的 Discourse 实例作为整个网站吗？

社区
33

嵌入功能实际上既可以通过主题在 Discourse 界面中实现（例如在主题列表上方），也可以通过 Landing Pages 插件 实现。对于后者，我使用这个 迷你版恐龙游戏 制作了一个示例。你可以在这里试玩：Pavilion

2021-03-04 18.54.09

这个示例无需编写代码。我所做的只是将这些资源上传到我们的 CDN（将文件夹拖放到 DigitalOcean 的“空间”中），创建一个路径为"dinosaur"的页面，然后复制并粘贴这段 HTML 代码（均通过管理界面完成）。

HTML 
<div class="landing page dinosaur">
  <div class="container">
    <h1>恐龙游戏！</h1>
    <canvas id="game" height="200" width="800"></canvas>
    <p class="controls">按空格键开始</p>
    
    <script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/helpers.js"></script>
    <script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/game-object.js"></script>
    <script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/cactus.js"></script>
    <script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/dinosaur.js"></script>
    <script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/background.js"></script>
    <script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/score.js"></script>
    <script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/game.js"></script>
    <script>
    	new Game({
    		el: document.getElementById("game")
    	});
    	window.onkeydown = function(e) {
            return e.keyCode !== 32;
        };
    </script>
  </div>
</div>

Landing Pages 插件实现了 Discourse 的内容安全策略（CSP）和跨域资源共享（CORS）设置，我已通过相关站点设置配置好以处理来自我们 CDN 的脚本。

下周我将为该插件发布一个完整的“如何托管和嵌入资源”知识库主题，以涵盖此类用例。

8 个赞