# Embedding a list of Discourse Topics in another site

**URL:** https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911
**Category:** Announcements
**Tags:** embedding
**Created:** [8월 15, 2019, 5:53오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911 "2019-08-15T17:53:02Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [10월 9, 2020, 12:20오전 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/59 "2020-10-09T00:20:21Z")

</div>

> [@littleviolette](#):
>
> 상위 주제(top topics)를 위한 쿼리 파라미터는 무엇인가요?

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

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

```

> [@littleviolette](#):
>
> 임베드된 콘텐츠의 글꼴 스타일을 변경할 수 있나요?

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

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

```

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

> [@Tino\_Augustine](#):
>
> 임베드를 전체 폭 또는 100%로 표시하려면 어떻게 해야 하나요?

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

```css
d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}

```

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [10월 25, 2020, 9:43오전 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/61 "2020-10-25T09:43:23Z")

</div>

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?](https://meta.discourse.org/t/what-is-this-box-at-the-upper-left-displaying-timings-in-milliseconds-when-i-am-logged-in-as-admin/102194) 🙂

---

<div class="post-metadata">

### Author: ![msbt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/msbt/32/202927_2.png) [@msbt](https://meta.discourse.org/u/msbt)
#### Post date: [12월 10, 2020, 3:33오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/75 "2020-12-10T15:33:20Z")

</div>

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

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

```

감사합니다, M

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [12월 10, 2020, 6:21오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/76 "2020-12-10T18:21:03Z")

</div>

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

---

<div class="post-metadata">

### Author: ![msbt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/msbt/32/202927_2.png) [@msbt](https://meta.discourse.org/u/msbt)
#### Post date: [12월 10, 2020, 6:43오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/77 "2020-12-10T18:43:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [12월 10, 2020, 7:20오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/78 "2020-12-10T19:20:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)
#### Post date: [12월 13, 2020, 9:59오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/79 "2020-12-13T21:59:41Z")

</div>

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

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

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

---

<div class="post-metadata">

### Author: ![msbt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/msbt/32/202927_2.png) [@msbt](https://meta.discourse.org/u/msbt)
#### Post date: [12월 14, 2020, 8:55오전 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/80 "2020-12-14T08:55:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [12월 14, 2020, 7:07오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/82 "2020-12-14T19:07:33Z")

</div>

> [@sok777](#):
>
> 즉, 임베드된 목록 중 하나에 다른 배경색을 적용하는 것조차 불가능하다는 뜻입니다.

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [12월 18, 2020, 2:06오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/83 "2020-12-18T14:06:07Z")

</div>

여기 `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>

```

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [12월 21, 2020, 7:16오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/84 "2020-12-21T19:16:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [12월 21, 2020, 8:42오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/85 "2020-12-21T20:42:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [12월 21, 2020, 9:09오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/86 "2020-12-21T21:09:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [12월 21, 2020, 9:12오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/87 "2020-12-21T21:12:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![chrispanag](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrispanag/32/105853_2.png) [@chrispanag](https://meta.discourse.org/u/chrispanag)
#### Post date: [1월 10, 2021, 11:51오전 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/88 "2021-01-10T11:51:09Z")

</div>

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

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

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

```plaintext
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](https://rebetiko.sealabs.net))에 임베드되어 있습니다. 직접 테스트해 보시려면 페이지 하단을 확인해 주세요.

---

<div class="post-metadata">

### Author: ![chrispanag](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrispanag/32/105853_2.png) [@chrispanag](https://meta.discourse.org/u/chrispanag)
#### Post date: [1월 20, 2021, 9:03오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/89 "2021-01-20T21:03:23Z")

</div>

> [@chrispanag](#):
>
> Firefox와 Chrome에서 목록이 우리에게 기대한 대로 작동하지 않습니다.

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

CC: @JimPas, @simon , @Vaping_Community

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [1월 20, 2021, 11:42오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/90 "2021-01-20T23:42:27Z")

</div>

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

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

```
d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}

```

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [1월 21, 2021, 1:12오전 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/91 "2021-01-21T01:12:28Z")

</div>

> [@chrispanag](#):
>
> 우리에게 목록이 예상대로 작동하지 않습니다

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

---

<div class="post-metadata">

### Author: ![TomSolid](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tomsolid/32/168474_2.png) [@TomSolid](https://meta.discourse.org/u/TomSolid)
#### Post date: [2월 1, 2021, 2:35오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/92 "2021-02-01T14:35:31Z")

</div>

안녕하세요!

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

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2월 1, 2021, 6:31오후 UTC](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911/93 "2021-02-01T18:31:53Z")

</div>

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

[이전 페이지](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911.md?page=1)

[다음 페이지](https://meta.discourse.org/t/embedding-a-list-of-discourse-topics-in-another-site/125911.md?page=3)
