더 보기 버튼

커스터마이징 테마 컴포넌트
1
:information_source: 요약 더 많은 주제/게시물/사용자/그룹/기타 항목을 로드하려면 클릭해야 하는 “더 보기” 버튼을 삽입합니다
:eyeglasses: 미리보기 https://discourse.theme-creator.io/theme/RGJ/load-more-button
:hammer_and_wrench: 저장소 GitHub - communiteq/discourse-tc-load-more-button · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스코urs 테마를 처음 사용하시나요? 디스코urs 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

“DISPLAYS ADDITIONAL MEDIA AT THE BOTTOM OF SUCH FEED OR LANDING PAGE WITHOUT ANY MANUAL INPUT FROM A COVERED USER.”(해당 피드 또는 랜딩 페이지 하단에 커버된 사용자의 수동 입력 없이 추가 미디어를 표시하는 것)에 해당하지 않도록 하기 위해 “더 보기” 버튼을 삽입합니다.

관련 맥락: Time to reconsider infinite scroll?

주제 목록

image
image1450×1163 130 KB

주제 보기

image
image1106×637 36.2 KB

사용자 디렉터리

image
image1474×960 62 KB

상세 설명…

10개의 좋아요
Time to reconsider infinite scroll?
2

하하, 잘했네! 나도 이거 한번 해볼까 하고 있었는데, 사이드바에 버튼을 넣거나 플로팅으로 띄우는 걸 고민 중이었어. 잘했어 :clap:

7개의 좋아요
3

Screenshot_20260502_012533_Chrome
Screenshot_20260502_012533_Chrome1080×2340 215 KB

모바일에서 (오른쪽) 엄지손가락으로 버튼을 누르기 어렵습니다 :slight_smile:

가운데에 배치하는 것이 더 나을 것 같습니다.

7개의 좋아요
4

모바일 중심 구성:

@use "lib/viewport";

@include viewport.until(md) {

  .load-more-btn.btn.btn-primary {
    display: block;
    margin: 0 auto;   
  }
}

PR:

5개의 좋아요
5

정말 좋습니다. 감사합니다! 제 Discourse 사이트에서 명확하게 나타나는 버그 보고가 하나 있습니다:

https://discourse.marksmath.org/

이 사이트는 규모가 작으며, 학생으로 로그인해야 대부분의 콘텐츠를 볼 수 있습니다. 따라서 랜딩 페이지에는 게시물이 5개만 표시됩니다. 그럼에도 불구하고, “더 보기” 버튼이 표시되고 있는데 이는 나타나서는 안 됩니다. 버튼을 누르면 사라집니다. 하지만 조금 위로 스크롤했다가 다시 아래로 스크롤하면 다시 나타납니다.

다만, 주제 페이지에서는 잘 작동합니다. 공개적으로 보이지 않으므로 그 부분은 제 말을 믿어 주셔야 합니다.

물론, 이 작업을 여가 시간에 해주셨다는 것을 잘 알고 있습니다. 하지만 알려 드리고 싶었습니다. 다시 한번 감사합니다!

6개의 좋아요
6

이 버튼은 DiscoveryTopics가 canLoadMore 모델 속성을 LoadMore 컴포넌트에 전달하지 않는 코어 버그를 드러낼 뿐입니다. 안타깝게도 이는 이 테마 컴포넌트에서 처리할 수 있는 사항이 아닙니다.

감사합니다, 병합했습니다!

7개의 좋아요
7

정말 흥미롭네요. 질문 하나 드릴게요. 이게 Core Web Vitals에 영향을 주나요? 페이지네이션의 중간 형태라고 할 수 있겠네요. DOM 스크롤에 대한 의존도를 줄이면서 사용자가 더 많은 콘텐츠를 표시할 수 있도록 권한을 부여하는 걸 좋아하는데, 동시에 로딩 지연 시간을 약간 줄여주는 효과가 있을 것 같은데, 제 생각이 틀린 건가요?

8

이것이 하는 일은 플로우에 버튼을 삽입하는 것뿐입니다. 이것이 코어 웹 바이탈(Core Web Vitals)이나 로딩 지연 시간을 어떻게 줄이는지 모르겠습니다. (아무것도 미리 로드하지 않으므로) 또한, 버튼이 언제, 어디에 나타날지를 파악하기 위해 여전히 IntersectionObserver를 사용하므로, 결국 DOM 스크롤에 여전히 의존하고 있습니다.

6개의 좋아요
9

로그아웃된 사용자의 랜딩 페이지에서 버튼을 숨기기 위해 CSS를 사용할 수는 없을까요? 해당 사용 사례를 위해?

다른 사이트에는 가입 없이 5개 이상의 주제를 표시하는 경우가 있으므로, 이 아이디어를 컴포넌트 자체에 직접 포함할 수 없다는 점은 이해할 수 있습니다.

무한 스크롤 토론에 대한 수정책으로서 훌륭한 컴포넌트입니다.

1개의 좋아요
10

저는 이미 이 기능을 구현한 컴포넌트의 포크를 가지고 있지만, mcmcclur가 원한다면 이는 예외적인 경우(edge-case)입니다. RGJ가 말했듯이 이 컴포넌트는 꽤 해킹적인(hacky) 방식으로 작성되어 있습니다.

2개의 좋아요
11

좋네요.

이런 기능이 코어에 내장되어, 주제 목록, 사용자 목록 등 다양한 영역에서 활성화할 수 있으면 좋겠습니다.

이 컴포넌트는 DOS 시절에 텍스트 파일을 표시하기 위해 type 명령어를 사용할 때 쓰이던 "|more"를 떠올리게 합니다.

1개의 좋아요