이 가이드는 Discourse에서 ‘허용된 임베드 선택자(allowed embed selectors)’ 설정을 구성하는 방법에 대해 설명합니다. 외부 사이트에서 Discourse로 게시물을 게시하거나, JavaScript를 사용하여 외부 사이트에 Discourse 댓글을 임베드할 때 이 설정은 매우 중요합니다.
필요한 사용자 권한: 관리자
고급 사용에는 일부 CSS 지식이 필요합니다
외부 사이트에서 Discourse로 게시물을 게시하거나 외부 사이트에 Discourse 댓글을 임베드할 때, “전체 게시물 보기(Show Full Post)” 버튼이 올바른 콘텐츠를 가져오지 못하는 문제를 겪을 수 있습니다. 이 가이드는 이 문제를 해결하기 위해 ‘허용된 임베드 선택자’ 설정을 구성하는 방법을 안내합니다.
문제 이해하기
사용자가 “전체 게시물 보기” 버튼을 클릭하면, Discourse가 외부 사이트에서 올바른 게시물 콘텐츠를 가져오지 못할 수 있습니다. 이때 ‘허용된 임베드 선택자’ 설정이 중요한 역할을 합니다.
설정 위치 찾기
‘허용된 임베드 선택자’ 설정은 두 곳에서 찾을 수 있습니다:
- 사이트 설정 페이지에서 "allowed embed selectors"를 검색합니다.
- 관리자 > 사용자 정의(Customize) > 임베딩(Embedding)으로 이동한 후 크롤러(Crawlers) 탭을 선택합니다.
올바른 CSS 선택자 식별하기
적절한 CSS 선택자를 찾기 위해:
- Discourse로 게시한 외부 사이트의 게시물로 이동합니다.
- 브라우저의 웹 검사기를 열고 게시물의 HTML 구조를 검사합니다.
- 주요 게시물 콘텐츠를 바로 둘러싸고 있는 HTML 요소를 식별합니다.
예를 들어, 일반적인 WordPress 게시물에서 콘텐츠는 article 태그 내부의 .entry-content div에 있는 경우가 많습니다. 이 경우 article .entry-content를 CSS 선택자로 사용할 수 있습니다.
설정 구성하기
외부 사이트에서 다양한 콘텐츠 유형을 가져오려면 여러 선택자를 추가해야 할 수 있습니다. 예를 들어:
article .entry-content img, article .entry-content p, article .entry-content ul
이 예제는 아티클의 entry content 내부의 이미지, 단락, 불릿 목록을 대상으로 합니다.
테스트 및 문제 해결
올바른 선택자를 찾는 데는 시행착오가 필요할 수 있습니다. 다음 사항을 유념하세요:
- Discourse는 외부 게시물 콘텐츠를 10분 동안 캐시하므로, 변경 사항이 즉시 표시되지 않을 수 있습니다.
- 이를 우회하려면 여러 게시물을 사용하여 테스트하거나, 개발 사이트에서 Rails 콘솔의
Rails.cache.clear를 사용하여 캐시를 비울 수 있습니다.
이미지 처리
웹사이트에서 이미지를 가져오는 데 문제가 있다면, CSS 선택자에 적절한 이미지 요소가 포함되었는지 확인하세요. 예를 들어:
article .entry-content img
이 선택자는 아티클의 entry content 내부의 이미지를 대상으로 합니다.
추가 고려 사항
- ‘허용된 임베드 선택자’ 설정은 API를 통해 게시된 게시물과 Discourse 임베드 스크립트로 가져온 게시물 모두에 적용됩니다.
- 특정 웹사이트 구조와 콘텐츠 유형에 따라 선택자를 조정해야 할 수 있습니다.
- 설정을 업데이트한 후 변경 사항을 저장하는 것을 잊지 마세요.
