Embed Discourse comments on another website via Javascript

게시글이 새 주제로 분리되었습니다: Embed Discourse using external_id

문서 사이트 사용 사례(수백/수천 개의 페이지)에서, 사용자가 페이지를 방문할 때 Discourse가 주제를 생성하는 대신, Giscus처럼 사용자가 댓글을 남기려 할 때 주제를 생성하는 것이 가능한가요?

이제는 "허용 목록(Allowlist)"입니다.

이제는 "토픽 생성 시 사용자 이름"입니다.

그 외 http://localhost에서 통합 기능을 테스트하는 방법이 있을까요? https가 없어서 콘솔에 다음과 같은 오류가 발생합니다:

조상 프레임이 다음 Content Security Policy 지시문: "frame-ancestors ‘self’ https://localhost:3000"을 위반했기 때문에 'https://forum.weaviate.io/'를 프레임으로 표시할 수 없습니다.

1개의 좋아요

안녕하세요! 보고해 주셔서 감사합니다. 가이드의 일부는 업데이트했지만, 올바르게 업데이트되고 작동하는지 확인하려면 심층적인 검토가 필요할 수 있습니다.

ngrok과 같은 서비스를 사용해야 할 수 있습니다.

2개의 좋아요

수정: 임베드 URL에 url_escape를 사용하게 되면(나는 Liquid를 사용해 올바른 URL을 자동으로 삽입하고 있음) 임베드가 깨져버립니다. 어머나 :upside_down_face:

안녕하세요! 포럼 소프트웨어를 내 블로그의 댓글 섹션으로 이중 활용하려고 계획하고 있었는데, 여러분이 그런 기능을 제공할 수 있을 뿐만 아니라 현재 누군가의 웹사이트에서 실제로 사용 중이라는 사실을 알게 되자 머리가 폭발할 것 같았어요 :exploding_head:

하지만 제 사이트에서 이 시스템을 구현하려고 할 때 내 사이트에 오류 메시지가 표시되었고, 포럼의 오류 로그에는 다음과 같은 내용이 나타났습니다:

오류 메시지
Message (2 copies reported)

Addressable::URI::InvalidURIError (Cannot assemble URI string with ambiguous path: 'https://eleboog.com/posts/jekyll-to-gemini/')
lib/url_helper.rb:157:in `normalize_with_addressable'
lib/url_helper.rb:94:in `normalized_encode'
app/models/embeddable_host.rb:50:in `url_allowed?'
app/controllers/embed_controller.rb:84:in `comments'
app/controllers/application_controller.rb:418:in `block in with_resolved_locale'
app/controllers/application_controller.rb:418:in `with_resolved_locale'
lib/middleware/omniauth_bypass_middleware.rb:74:in `call'
lib/content_security_policy/middleware.rb:12:in `call'
lib/middleware/anonymous_cache.rb:369:in `call'
config/initializers/100-quiet_logger.rb:20:in `call'
config/initializers/100-silence_logger.rb:29:in `call'
lib/middleware/enforce_hostname.rb:24:in `call'
lib/middleware/request_tracker.rb:228:in `call'

Backtrace

addressable (2.8.4) lib/addressable/uri.rb:2337:in `to_s'
addressable (2.8.4) lib/addressable/uri.rb:856:in `initialize'
addressable (2.8.4) lib/addressable/uri.rb:697:in `new'
addressable (2.8.4) lib/addressable/uri.rb:697:in `normalized_encode'
lib/url_helper.rb:157:in `normalize_with_addressable'
lib/url_helper.rb:94:in `normalized_encode'
app/models/embeddable_host.rb:50:in `url_allowed?'
app/controllers/embed_controller.rb:84:in `comments'
actionpack (7.0.4.3) lib/action_controller/metal/basic_implicit_render.rb:6:in `send_action'
actionpack (7.0.4.3) lib/abstract_controller/base.rb:215:in `process_action'

Env

HTTP HOSTS: forums.eleboog.com

저는 Jekyll을 사용해 블로그를 호스팅하고 있고, nginx 가상 호스트를 사용하여 포럼을 함께 호스팅하고 있습니다. 허용된 호스트로 eleboog.com을 설정하고, 경로 허용 목록(allowlist)으로 /posts/.*을 설정해 두었습니다. 이 문제가 발생하는 원인에 대해 어떤 생각이 있으신가요? 정말 감사합니다!

처음에는 막혀 있었지만, 몇 가지 수정을 거친 후에 해결했습니다. 저는 Ghost 블로그와 Discourse를 함께 사용하고 있습니다.

아래는 모든 게시물에 추가한 post.hbs 파일의 내용입니다.

{{#post}}
                    <div class="row">
                        <div class="col-sm-10 offset-sm-1">
                            {{> "comments"}}
                            {{!-- {{#has tag="25"}} --}}
                            <div id='discourse-comments'></div>
                            <meta name='discourse-username' content='eviltrout'>
                            <script type="text/javascript">
                                DiscourseEmbed = {
                                    
                                    discourseUrl: 'https://discourse-1-0.cloudclusters.net/',
                                    discourseEmbedUrl : 'https://www.mydomain.com{{ post.url }}',
                                    discourseReferrerPolicy: 'strict-origin-when-cross-origin'
                                    //topicId: '25'
                                };
                                (function () {
                                    console.log("DiscourseEmbed", DiscourseEmbed);
                                    var d = document.createElement('script');
                                    d.type = 'text/javascript';
                                    d.async = true;
                                    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
                                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
                                })();
                            </script>
                            {{!-- {{/has}} --}}
                        </div>
                    </div>
                    {{/post}}

                </div>
            </section>
 

Ghost post.hbs 파일 코드는 댓글 아래에 붙여넣었습니다: Screenshot by Lightshot
그리고 이것은 제 임베드 설정입니다: Screenshot by Lightshot

=====

저는 가장 첫 번째 댓글이 목록에 표시됩니다 ( Screenshot by Lightshot ).
이것을 제거하는 방법이 있을까요?

Discourse 주제에 게시물이 게시되지 않고, 원래 게시물 링크만 있습니다: Screenshot by Lightshot

제 블로그의 내용을 이 주제에 게시하는 방법을 아는 사람이 있을까요? OP처럼요.

"토론 불러오는 중"이 계속 표시될 때 어떻게 해야 하나요?

브라우저의 웹 인스펙터를 열어 콘솔 탭으로 이동한 후 오류가 있는지 확인해 보세요. 오류를 여기에 게시하면 누군가가 도움을 줄 수 있을 것입니다.

또한 브라우저의 웹 인스펙터를 열어 요소(Elements) 탭으로 이동한 뒤 'discourse-comments’를 검색해 보세요. 마크업에서 하나의 요소가 강조 표시되어야 합니다. <div id="discourse-comments"> 요소 바로 아래에는 script 태그가 있어야 합니다. 해당 태그의 내용을 확인하여 명백한 오류가 있는지 살펴보세요.

가장 먼저 확인해야 할 사항은 Discourse에서 도메인에 대해 설정한 호스트(Host) 레코드가 게시물을 공개 카테고리에 게시하고 있는지 확인하는 것입니다.

보호된 카테고리에 게시물을 게시하려고 하거나, 콘텐츠 열람을 위해 로그인이 필요한 Discourse 사이트에 게시물을 게시하려고 하는 경우 오류가 발생할 가능성이 높습니다.

2개의 좋아요

도와주셔서 감사합니다, 시몬.

콘솔이 처음에는 비어 있었지만, 잠시 후 다음과 같은 오류가 표시됩니다:

수정:
많은 문제를 해결해 본 끝에, discourseEmbedUrl에 "www."를 포함해야 한다는 것을 알게 되었습니다.

3개의 좋아요

여러분 안녕하세요! 질문이 두 가지 있습니다:

  1. “가져온 주제는 답변이 있을 때까지 목록에 표시되지 않습니다.” 옵션을 선택 해제한 후에도 “임베딩 설정 저장” 버튼을 누를 때마다 활성화 상태로 되돌아가는 이유가 무엇일까요?

  1. Chrome으로 블로그 글을 볼 때, 임베드된 Discourse 댓글이 표시되어야 할 위치에 다음 내용이 표시됩니다:

Safari에서는 이 공간에 아무 메시지도 없이 하얀색 빈 블록만 표시됩니다.

테스트 중 두 브라우저 모두에서 Discourse 설치 환경에 로그인된 상태입니다. 블로그는 Discourse 설치 환경과 다른 도메인에 있습니다.

미리 감사드립니다!

그런 일이 발생하는 이유가 무엇인지 모르겠습니다. 사이트 설정 페이지로 가서 embed unlisted 사이트 설정의 값을 변경하면 어떻게 될까요?

해당 설정과 “가져온 주제는…” 설정은 서로를 거울처럼 반영하도록 설계되어 있습니다.

주제를 비공개 Discourse 카테고리에 임베드하지 않는 한, 블로그가 Discourse와 다른 도메인에 있어도 문제가 발생하지 않아야 합니다.

이 블로그 글(Break Out Of Your Workout Rut With 8 AMRAP Fitness Challenges – Antsy Labs)에서 제가 확인하는 오류는 다음과 같습니다:

Refused to frame 'https://community.irla.co/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://antsylabs.com https://antsylabs.com".

Discourse 사이트의 Host 기록에 전체 도메인(www 포함)이 설정되어 있나요? 해당 설정에 antsylabs.com만 추가한 것 같습니다.

2개의 좋아요

그것이 문제였네요, 감사합니다!

정말 맞습니다. 이 레코드에서 'www’를 빠뜨렸던 것이었습니다. Host 레코드에 추가하니 임베드된 댓글이 완벽하게 표시됩니다.

도와주셔서 정말 감사합니다. 진심으로 감사드립니다.

1개의 좋아요

임베드된 댓글을 역순 시간순(최신 순서, 오래된 순서)으로 표시할 수 있나요?

현재는 불가능합니다. 임베드된 댓글에 사용자가 선택할 수 있는 필터링 옵션이 제공되면 좋겠습니다. 예를 들어 “전체”, “최근”, “최고” 같은 옵션 말이죠.

2개의 좋아요

크롤러가 ä, ö, ü와 같은 독일어 움라우트를 처리하지 못할 수 있을까요?
"Ich würde"와 같은 제목이 "Ich würde"로 나타납니다.

여러 가지 질문이 있어서 도움을 주실 분이 계셨으면 합니다.

정적 내보내기(static exports)를 사용하는 NextJS 웹사이트에 댓글을 임베드하려고 하고 있습니다. 즉, 사이트가 라이브가 되면 모든 페이지가 미리 생성되므로, 다른 곳에서 Discourse가 SPA를 스크래핑할 수 없다는 댓글을 본 적이 있지만, 제 웹사이트는 처리할 수 있을 것으로 이해하고 있습니다.

제 포럼이 forum.domain.com에 있고, 댓글을 임베드하려는 웹사이트가 site.domain.com에 있다고 가정해 보겠습니다. 댓글과 관련된 모든 스크립트를 추가했는데, iframe 안에서 "Loading discussion"이 영원히 표시됩니다.

Safari에서 열면 콘솔에 다음과 같은 오류가 표시됩니다:

Unable to post message to https://forum.domain.com. Recipient has origin https://site.domain.com.

이것은 CORS 문제인 것으로 보이지만, Discourse 인스턴스의 임베드 설정에 site.domain.com과 www.site.domain.com을 모두 추가했습니다.

어떤 이유인지 Firefox 콘솔에서는 그 오류가 보이지 않고, 다음만 보입니다:

마지막으로, https://forum.domain.coom/embed/comments?embed_url=https%3A%2F%2Fsite.domain.com%2Fpath%2Fto%2Fpage로 이동하면 "Loading Discussion"이 영원히 표시됩니다. 이는 문제가 제 웹사이트가 아니라 Discourse 쪽에 있는 것 같다는 생각을 하게 만듭니다. 물론 임베딩 작동 방식을 잘못 이해하고 있을 수도 있으므로, 조언이 있다면 큰 도움이 될 것입니다.

흥미로운 점이자 아마 관련이 있을 수 있는 점은, 두 가지 종류의 페이지(site.domain.com/path/to/page와 site.domain.com/longer/path/to/page)에 임베딩을 추가했지만, 홈페이지에는 댓글 태그를 추가하지 않았다는 것입니다. 그런데 제 Discourse에서 site.domain.com의 홈페이지에 전념하는 토픽을 볼 수 있는데, 어떤 이유에서인지 사용자가 웹사이트를 방문할 때마다 업데이트되는 것 같습니다.

image

그래서 지금은 편집 횟수가 터무니없이 많습니다. 임베드된 텍스트의 일부에 이메일 주소가 포함되어 있는데, 이는 Discourse에서 [email protected]으로 렌더링되고, 모든 편집이 해당 부분을 수정하는 것처럼 표시됩니다.

1개의 좋아요

안녕하세요!

이 "버그"에 대해 의견을 듣고 싶습니다: Embed: dates are not localized - #9 by weber-s

날짜 지역화 설정을 추가하는 것이 합리적인가요? 현재 날짜는 영어로 표시되며 사용자 지정할 수 있는 방법이 없습니다.

다른 페이지에 임베드된 게시물에서 사용자가 이미지/스크린샷을 공유할 때 보기 좋지 않은 상황이 발생하는 시나리오가 있습니다.

다른 사이트에 임베드된 게시물에서 이미지를 숨기는 좋은 해결책은 무엇일까요?

1개의 좋아요

이 기능을 위해 테마에 전용 CSS 탭이 제공되므로, 게시물 본문에서 CSS를 사용하여 이미지를 숨기는 것이 가장 빠른 방법입니다.

1개의 좋아요