Discourseインスタンスをウェブサイト全体として使用している方はいらっしゃいますか？

コミュニティ
33

埋め込みは、テーマを使用して Discourse UI（例えばトピックリストの上）でも、ランディングページプラグイン でも可能です。後者については、この 小さなバージョンの恐竜ゲーム を使用した例を作成しました。こちらでプレイできます：Pavilion

2021-03-04 18.54.09

この場合はコーディングは不要です。私が行ったのは、これらのアセットを CDN にアップロードすること（フォルダを DigitalOcean の「スペース」にドラッグ＆ドロップ）、パス「dinosaur」を持つページを作成すること、そしてこの HTML をコピー＆ペーストすること（どちらも管理画面から）でした。

HTML 
<div class="landing page dinosaur">
  <div class="container">
    <h1>Dinosaur Game!</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>

ランディングページプラグインは Discourse の CSP および CORS 設定を実装しており、これらはすでに CDN からのスクリプトを処理するように設定済みです（関連するサイト設定を通じて）。

来週、このプラグイン向けの完全な「アセットのホスティングと埋め込み方法」に関するナレッジベースのトピックを投稿して、このユースケースをカバーする予定です。

「いいね！」 8