Embedding a list of Discourse Topics in another site

뉴스 및 이벤트 공지사항
95

안녕하세요,

포럼의 첫 페이지처럼, 최신 게시글 작성자의 아바타와 게시글의 카테고리를 표시할 수 있는 방법이 있는지 궁금합니다. 현재는 주제 제목만 표시되고 있어서요.

3개의 좋아요
96

template=complete를 전달하면 임베드 안에 훨씬 더 많은 정보가 표시됩니다:

image
image563×915 87.8 KB

3개의 좋아요
97

와, 감사합니다. 그런데.. 정보량이 너무 많네요 :laughing: 그 중간 정도 되는 옵션이 있나요, 아니면 불필요한 정보는 커스텀 CSS로 숨기는 게 좋을까요?

그리고 이건 토픽 작성자를 표시하는 거지, 최신 게시글 작성자를 표시하는 게 아닙니다.

3개의 좋아요
98

완전한 템플릿은 모든 정보를 컨테이너로 감싸며, 각 사이트가 자신의 디자인에 맞게 CSS로 커스터마이징할 것으로 예상됩니다.

3개의 좋아요
99

정말 좋습니다!

너비를 변경할 수 있을까요?

2개의 좋아요
100

이것은 유동적인 컨테이너이며, 부모 요소의 너비에 맞춰 자동으로 조정됩니다.

2개의 좋아요
101

제 사이트에서는 그렇지 않습니다. 불행히도, 들어 있는 div보다 너무 넓습니다.

2개의 좋아요
102

마크업을 다시 확인하고 요소를 올바르게 숨기고 배치하세요. 어떤 컨테이너에서도 작동해야 합니다:

2개의 좋아요
103

불행히도 제 웹사이트에서는 작동하지 않습니다. 반응형 프레임워크의 CSS 관련 부분이 문제를 일으키는 것 같습니다. 폭을 변경할 수 있는 방법이 있을까요? (예: 현재 값의 90%로 설정하거나, 픽셀 단위로 더 좁게 만드는 것 등)

2개의 좋아요
104

다음과 같은 CSS를 사용해 보셨나요?

d-topics-list iframe {
    padding: 0 5%;
}

?

2개의 좋아요
105

그렇게 하면 작동하지 않아요. Chrome의 F12 콘솔에서 iframe 태그를 편집해서 width="100%"를 포함시키면 정상적으로 작동하는데… 그 변경 사항을 적용할 수 있는 방법이 있을까요?

2개의 좋아요
106

OP의 목록에 사용자 지정 CSS를 추가하는 방법에 대한 예제를 추가했습니다.

4개의 좋아요
107

감사합니다. 시도해 봤습니다. 내장된 주제들이 그리드 형식으로 표시되긴 합니다. 불행히도 그리드의 너비(즉, 두 개의 주제)는 여전히 이전과 같은 너비입니다 — 100%에 훨씬 못 미치죠.

위 CSS(d-topics-list iframe)는 iframe을 전혀 변경하지 않습니다. 만약 "width: 100%"로만 변경할 수 있다면 좋겠는데…

그렇지 않으면 빈 HTML 문서에서도 시도해 봤지만 여전히 좁습니다. 다른 아이디어가 있을까요? :slight_smile:

3개의 좋아요
108

이 임베드 정말 좋아합니다… :sparkling_heart:

몇 가지 문제점과 기능 요청 사항이 있습니다…:

  • allow-create="true"와 category="4" 매개변수를 추가하면 ‘+ 새 주제 만들기’ 버튼을 클릭해도 ‘새 주제 추가’ 모달/팝업이 표시되지 않습니다. 원래 그렇게 되어 있어야 하나요?
  • allow-create="true"와 tags="random-tag" 매개변수를 추가하면 ‘+ 새 주제 만들기’ 버튼을 클릭했을 때 random-tag로 필터링된 주제 목록으로 이동하지만, 태그 드롭다운에 'random-tag’가 표시되지 않고 '새 주제 추가’를 클릭해도 태그가 미리 입력되어 있지 않습니다.
  • 게시글의 첫 100단어를 전체 테마에 포함시킬 수 있을까요?
4개의 좋아요
109

좋은 아이디어입니다!

그리고 여전히 너비 문제를 해결하고 싶습니다… :slight_smile:

2개의 좋아요
110

CSS는 Discourse의 내장 CSS가 아니라 당신의 사이트에 추가해야 합니다. 따라서 다음과 같은 코드가 필요합니다:

<html>
  <head>
    <script src="https://jonathan5-discourse.com/javascripts/embed-topics.js"> 
    </script>
    <style>
      d-topics-list iframe{
        width: 100%!important;
        }
    </style>
  </head>
  <body>
    <d-topics-list discourse-url="https://jonathan5-discourse.com" category="5" per-page="5"></d-topics-list>
  </body>
</html>
6개의 좋아요
Examples of styling and use of Embedding a list of Discourse Topics on a external site
111

정말 감사합니다. 이제 보니 당연한 것 같네요. 제 사이트 내에서 iframe의 내부 CSS를 스타일링하는 데 실패하다가, Discourse 내에서 iframe 자체를 스타일링하는 데도 실패했었습니다. 말씀하신 대로 시도해 보고 결과를 알려드리겠습니다!

업데이트: CSS가 잘 작동했습니다. 정말 감사합니다.

4개의 좋아요
112

방금 직접 테스트해 보았습니다. 제 경우엔 임베드하는 카테고리 번호가 5번이라 category=5입니다. 팝업은 표시되지 않지만, URL이 https://forum.example.com/new-topic?category_id=5인 새 탭이 열립니다. 혹시 브라우저 설정에서 이 같은 "팝업"을 차단하고 있지는 않나요?

2개의 좋아요
113

@Jonathan5 님, 정상 작동한다는 확인 감사합니다. discourse-tag-sidebar 테마 구성 요소를 비활성화했는데, 이제 팝업이 정상적으로 작동합니다 :sunglasses:

3개의 좋아요
114

확인해 보겠습니다 :eyes:

4개의 좋아요