게시글 상단/하단으로 스크롤하는 버튼

배경

포럼을 탐색할 때 주제 상단과 하단 사이를 자주 오가야 합니다. 이 테마 컴포넌트는 주제 페이지에 눈에 잘 띄는 점프 버튼을 배치하여 이를 더 쉽게 만들어 줍니다.

설치 방법

:information_source: 요약 주제 시작/끝으로 효율적으로 점프할 수 있는 버튼을 추가합니다.
:hammer_and_wrench: 저장소 GitHub - ScottMastro/discourse-jump-buttons · GitHub
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스코urs 테마 초보? 디스코urs 테마 사용 입문 가이드

동작 방식

버튼은 세 가지 다른 위치에 배치되며, 해당 설정을 토글하여 표시/숨길 수 있습니다. 문제점이나 버그 보고를 환영합니다.

타임라인 버튼 활성화:

이는 타임라인 상단/하단의 날짜를 클릭하는 기능과 약간 중복되지만, 제 경험상 해당 기능은 사용자에게 명시적으로 알려주지 않는 한 대부분 알지 못합니다.


점프 버튼 활성화:

페이지 하단에 “점프” 버튼을 추가하여 상단으로 돌아갈 수 있게 합니다. 버튼의 텍스트와 호버 정보는 컴포넌트 설정에서 변경할 수 있습니다.


모바일 버튼 활성화:

모바일 기기에서 주제를 탐색할 때 항상 표시됩니다.


11개의 좋아요

타임 슬라이더의 타임스탬프 좌우에 이 두 버튼을 배치하면 더 보기 좋을까요?

1개의 좋아요

개인적으로는 이렇게 하는 게 나쁘지 않다고 생각하지만, 소비자 입장에서는 이 방식이 혼란스러울 수 있어요. ‘Jump’ 버튼이 원래 의도된 용도보다는 스크롤 버튼으로 더 인식될 가능성이 크기 때문이죠.

1개의 좋아요

아니면 이렇게 해도 될 것 같아요, 하하.
이렇게 하면 너무 복잡해 보일 것 같네요.

흥미로운 디자인 문제네요. 사용자가 기능을 인지하면서도 UI가 너무 복잡해지지 않도록 하는 방법 말이죠. :slight_smile:

1개의 좋아요

기본 레이아웃으로 배치된 이 컴포넌트의 버튼 스타일을 좋아합니다. 혹시 리포지토리를 포크해서 직접 수정하거나 PR을 만들 수 있을까요?

기본 인터페이스 요소에 대한 가이드의 사본을 만들어 사용자에게 참고하도록 하는 것도 좋은 아이디어입니다. 이 가이드에는 더 많은 세부 사항이 필요하다고 생각하며, 이를 실현하길 바랍니다. :slight_smile:

타임라인 스크롤에 대한 기능 설명이 더 자세히 포함되어야 합니다. 사용자 가이드에 일부 정보가 있지만, 더 많은 세부 사항을 포함하여 이러한 문서들 간의 링크 연결을 개선할 수 있습니다.

저는 보통 사용자에게 Discourse UI의 거의 모든 요소가 클릭 가능하다고 말씀해 드립니다. :grin:

네, 기본 레이아웃도 좋습니다.

버튼을 추가하면 UI가 너무 복잡해지는데…
하지만 사용자가 매뉴얼을 먼저 읽어야 하는 것도 아니죠, 하하.

1개의 좋아요

아, 그 점은 저도 잘 알고 있습니다. 그냥 그들이 질문할 때 가리켜 줄 수 있는 참고 자료를 가지고 있는 걸 좋아할 뿐이에요. 그리고 예를 들어 고객센터 카테고리에 가이드를 게시해 두면, 검색을 통해 로컬 포럼에서 해당 내용을 찾을 수 있게 되거든요.

개발자 콘솔에서 이 최근 변경 사항과 관련된 알림이 표시됩니다.

[THEME 17 ‘discourse-scroll-buttons’] 비추천 공지: discourse-common/lib/get-owner에서 getOwner를 가져오는 것은 비추천됩니다. import { getOwner } from '@ember/application'을 사용하거나, 여전히 폴백 심이 필요하다면 import { getOwnerWithFallback } from 'discourse-common/lib/get-owner';를 사용하세요. [Discourse 3.2부터 비추천] [deprecation id: discourse.get-owner-with-fallback]

업데이트가 될 가능성이 있을까요? 모바일 뷰에서 정말 유용한 컴포넌트입니다.

1개의 좋아요

수정되었을 것입니다. 이 줄을

const topicController = getOwner(this).lookup("controller:topic");

다음과 같이 교체했습니다.

const container = Discourse.__container__;
const topicController = container.lookup('controller:topic');

여기서 가져온 샘플 코드를 따랐습니다: Get Category Name using JS - #2 by awesomerobot

유용하다고 생각해서 기쁩니다!

2개의 좋아요

제 사이트만의 문제인지 모르겠지만, 아래로 내리기 버튼이 아무 동작도 안 합니다(언제부터 그랬는지 모르겠는데, 최소한 몇 주 정도 됐습니다). 맨 아래 버튼은 정상적으로 작동합니다.

데스크톱이든 모바일이든, 제 쪽에서는 문제가 없습니다.

네, 오늘 Discourse를 업데이트했는데 말씀하신 내용을 이해했습니다. 아래 변경 사항이 문제를 일으킨 것 같네요. jumpTop은 click 이벤트가 전달되어야 하기 때문입니다.

테마 컴포넌트에 수정을 가했습니다. 제 환경에서는 이제 정상적으로 작동하며, 여러분에게도 도움이 되기를 바랍니다.


2개의 좋아요

최신 Discourse 업데이트에서 이 문제가 감지되어 비활성화되었습니다. 업데이트가 가능한가요?

1개의 좋아요

리포트 감사합니다. 방금 수정 사항을 배포했습니다. 문제가 계속되면 알려주세요!

1개의 좋아요

이 플러그인의 모바일 버전에서 아래 버튼(아래 화살표)이 아이폰의 Safari에서 작동하지 않습니다. 새로운 업데이트 버전에서 수정되기를 바랍니다.

최신 버전을 사용하고 계신가요? 제가 6일 전에 수정한 회귀 버그입니다.

최신 버전을 업데이트했습니다!

업데이트 후 이제 정상 작동하나요? 아니면 업데이트를 했는데도 여전히 아래 화살표 문제가 있나요?

이 컴포넌트들을 최신 버전으로 업데이트하고, iPhone에서 시크릿 모드 Safari 브라우저를 다시 사용해서 테스트해 보았지만, 여전히 아래 화살표가 작동하지 않습니다.

네, 시간을 내서 확인해 봤습니다. 모바일 함수를 업데이트하지 않은 것 같네요 (업데이트했다고 생각했거든요).

현재 버전은 hopefully 작동할 것 같습니다. 문제가 계속되면 알려 주세요!

2개의 좋아요