여기서 Discourse 인스턴스를 웹사이트 전체로 사용하시는 분이 계신가요?

커뮤니티 구축
33

Discourse UI(예: 토픽 목록 위)에서는 테마를 사용하여 임베드가 실제로 가능하며, Landing Pages 플러그인에서도 가능합니다. 후자의 경우, 이 작은 공룡 게임 버전을 사용하여 예시를 만들었습니다. 여기서 플레이할 수 있습니다: Pavilion (데스크톱 전용).

2021-03-04 18.54.09

이것에는 코딩이 필요하지 않았습니다. 제가 한 일은 해당 에셋을 우리의 CDN으로 업로드하는 것(DigitalOcean 'space’에 폴더를 드래그 앤 드롭)이었습니다. 그리고 경로가 "dinosaur"인 페이지를 만들고 이 HTML을 복사/붙여넣기했습니다(모두 관리자 UI를 통해 수행).

HTML 
<div class="landing page dinosaur">
  <div class="container">
    <h1>Dinosaur Game!</h1>
    <canvas id="game" height="200" width="800"></canvas>
    <p class="controls">press space bar to start</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개의 좋아요