Embedding a list of Discourse Topics in another site

뉴스 및 이벤트 공지사항
59

그것이 가능한 것 같지 않습니다. 주제를 가져오는 데 사용되는 Discourse 코드는 최신 주제 목록만 가져옵니다. 목록 정렬을 위해 제가 아는 사용 가능한 필터는 replies(답글), views(조회수), activity(활동), likes(좋아요)입니다. 이러한 필터 중 하나를 사용하여 목록을 정렬함으로써 최고의 주제를 선택해 볼 수 있습니다. 예를 들어:

<d-topics-list discourse-url="http://localhost:3000" category="14" per-page="5" order="replies"></d-topics-list>

iframe에서 사용되는 글꼴은 Discourse에서 설정됩니다. 제가 실행 중인 최신 버전의 Discourse에서 WordPress 사이트에 주제 목록을 임베드할 때 글꼴 설정과 관련하여 문제를 겪고 있습니다. 이는 프로덕션 사이트가 아닌 로컬에서 테스트하고 있기 때문에, 이것이 문제의 원인일 수 있습니다. 발견한 바로는 iframe의 글꼴에 대해 다음과 같은 스타일이 전달되고 있습니다:

font-family: var(--font-family);

해당 스타일은 Discourse에서 설정되지만, WordPress에서는 해당 변수에 접근할 수 없으므로 제 사이트에서는 글꼴이 Times New Roman으로 설정되고 있습니다. 이 문제에 대해 좀 더 조사해 보겠습니다. (수정: 글꼴 설정 문제는 최근 Discourse 변경 사항으로 인해 발생했습니다. 이 문제를 수정하겠습니다.)

이것은 까다로울 수 있습니다. 생성되는 iframe은 페이지에 추가하는 d-topics-list 요소 내부에 있습니다. 제 웹사이트의 CSS에서 값을 명시적인 폭으로 설정하는 것이 제 경우에는 작동합니다. 하지만 이 부분은 개선될 수 있다고 생각합니다:

d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}
6개의 좋아요
61

iframe의 왼쪽 위 모서리에는 숫자(예: 110.5ms)가 표시되어 있으며, 이는 /embed/topics로 연결되는 링크입니다. 이 숫자를 제거하는 방법이 있을까요?

수정: 이 숫자는 'discourse 개발자’에게만 표시됩니다: What is this box at the upper left displaying timings in milliseconds when I am logged in as admin? :slight_smile:

7개의 좋아요
75

안녕하세요! WordPress 사이트에 게시물을 임베드하는 방법을 시도하고 있으며, 임베드 부분은 작동하도록 만들었습니다. 모바일 뷰를 조금 더 보기 좋게 만들 수 있는 방법이 있을까요? 게시물에 이미지가 있는 경우, 이미지와 함께 있는 열의 레이아웃이 좁아져 보입니다. 아래와 같은 코드가 이 문제를 해결할 수 있을 것 같은데, 이와 유사한 기능이 구현될 수 있을까요?

@media (max-width: 768px) {
	.topics-list .topic-list-item .topic-column-wrapper {
	    flex-direction: column;
	}
}

감사합니다, M

3개의 좋아요
76

테마를 편집할 때 여기에 직접 사용자 정의 CSS를 추가할 수 있습니다. 코어에 넣으려는 특별한 이유가 있으신가요?

2개의 좋아요
77

아, 그게 내 디스코러스 테마의 CSS를 로드하는 건 줄 몰랐네요. 한번 시도해 보고 다시 말씀드릴게요!

2개의 좋아요
78

이 목적을 위해 테마 아래에 임베딩 섹션이 있습니다!

4개의 좋아요
79

안녕하세요, 제 웹사이트에 주제 목록을 이미 임베드해 두었는데, 이제 태그를 기준으로 특정 주제 하나만 표시하려고 합니다. 그래서 페이지당 항목 수를 1로 설정한 다른 목록을 성공적으로 임베드했지만, CSS 클래스나 ID를 추가할 수 없어서 첫 번째 목록과 이 목록 사이에 아무런 차이가 없습니다.
즉, 임베드된 목록 중 하나에 다른 배경색을 적용하는 것조차 불가능합니다.

어떤 우회 방법이 있을까요?

도와주시면 정말 감사하겠습니다.

2개의 좋아요
80

감사합니다 @eviltrout. 해당 코드를 "임베디드 CSS"에 추가하니 해결되었습니다!

2개의 좋아요
82

현재 서로 다른 임베드에 서로 다른 CSS 규칙을 추가할 수 있는 방법이 없습니다. 모든 임베드에 적용되는 커스텀 스타일링만 추가할 수 있습니다.

4개의 좋아요
83

여기 https://vceliquidrecipes.com/에 최신 주제(embed)를 삽입하는 동안 다음 오류가 발생합니다.

includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168 POST https://vapingcommunity.co.uk/mini-profiler-resources/results 404

(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168
fetchResults @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:169
initPopupView @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:763
doInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1050
sc.onload.sc.onreadystatechange @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1065
load (async)
load @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1061
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1109
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1089
setTimeout (async)
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1085
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1118
(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1463

제 임베드 코드는 다음과 같습니다:

<d-topics-list discourse-url="https://vapingcommunity.co.uk" status="open" order="replies" per-page="10"></d-topics-list>
2개의 좋아요
84

그 오류들은 미니 프로파일러에서 나온 것 같고, 일반 사용자가 보는 것과 관련이 없을 가능성이 높습니다. 사이트를 방문했는데, 오류 없이 주제 목록이 정상적으로 표시되고 있었습니다.

4개의 좋아요
85

아, 그러니까 정상적인 거군요. 로그에 표시되나요, 맞죠?

2개의 좋아요
86

정상적인지 확신은 없지만 걱정할 일은 아닙니다. 대부분의 사용자는 미니 프로파일러에 접근할 수 없기 때문에, 아마도 사용자가 해당 작업을 수행할 때만 그런 메시지가 표시되는 것 같습니다.

3개의 좋아요
87

네, 도움을 주셔서 감사합니다. 늘 그렇듯이 정말 감사드립니다. 앞으로도 좋은 작업 이어가시길 바랍니다.

2개의 좋아요
88

안녕하세요, 이 작업에 수고해 주셔서 감사합니다.

Firefox와 Chrome에서 목록이 예상대로 작동하지 않습니다. 10개의 주제를 표시하도록 설정해 두었는데, 실제로는 4개만 표시됩니다.

Chrome에서는 목록을 임베드할 때 다음과 같은 JS 오류가 발생합니다:

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    at u (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:105)
    at window.onload (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:515)

흥미롭게도 Safari에서는 이런 현상이 발생하지 않습니다.

해당 목록은 이 웹사이트(https://rebetiko.sealabs.net)에 임베드되어 있습니다. 직접 테스트해 보시려면 페이지 하단을 확인해 주세요.

4개의 좋아요
89

혹시 이 문제를 재현할 수 있는 분이 계신가요? :slight_smile:

CC: @JimPas, @simon , @Vaping_Community

3개의 좋아요
90

페이지에 10개의 주제 링크가 있으며, 그중 6개가 일부 이유로 숨겨져 있습니다. 이 오류에 대해서는 알지 못합니다.

iframe에 높이를 추가하면 숨겨진 주제 링크가 표시됩니다.

d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}
4개의 좋아요
91

저도 이 문제에 대해 겪었습니다. 때로는 괜찮아 보였고, 때로는 주제 목록이 잘려 나갔습니다(주제의 수가 아니라 픽셀 수로 결정된 것처럼 보였습니다) 그리고 글꼴도 예상과 달랐습니다(세부 사항은 기억나지 않습니다). 대신 Discourse RSS 피드를 사용하도록 전환했습니다. 저는 크롬만 사용했고, 크롬에만 문제가 있을 것이라고는 의심하지 않았습니다.

3개의 좋아요
92

안녕하세요!

목록에서 특정 주제를 제외할 수 있는 방법이 있나요?

2개의 좋아요
93

그걸 위해 태그를 사용하는 건 어떨까요? 목록에 표시하고 싶은 주제에 태그를 붙이고, 그 태그로 필터링하는 방식 말이죠?

5개의 좋아요