클릭 가능한 주제

:discourse2: 요약 Clickable Topic은 주제 제목뿐 아니라 topic-list-item의 전체 영역을 클릭 가능하게 만듭니다.
:eyeglasses: 미리보기 Discourse Theme Creator에서 미리보기
:hammer_and_wrench: 저장소 링크 https://github.com/discourse/discourse-clickable-topic
:open_book: Discourse 테마에 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트 설치

기능

preview

:discourse2: 우리가 호스팅하나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

46개의 좋아요

정말 감사합니다, 정말 필요했던 거였어요! :heart:

4개의 좋아요

정말 유용한 컴포넌트네요! 사용자 경험(UX) 관점에서 보면 Discourse에 기본으로 내장되어 있어야 한다고 생각합니다. 물론 제 개인적인 의견이지만요.

어쨌든, 같은 로직을 카테고리(Categories)에도 적용하려고 시도하고 있는데 막혀 있습니다. api.modifyClass로 하려고 하는데 핵심 부분을 놓치고 있는 것 같습니다. 도움을 주실 수 있으신가요?

데스크톱 페이지에 대해 이렇게 설정해 두었습니다:
image

기본적으로 왼쪽의 빨간 박스가 클릭 가능해야 합니다:

혹시 제가 이루고자 하는 결과를 완벽하게 보여줄 수 있는 예시로, 블리자드 포럼의 디자인을 재현하는 것입니다. 그 디자인을 정말 좋아하기 때문이죠:

어떤 도움이라도 감사하겠습니다.

답변을 기다리는 동안 여기에서 컴포넌트 페이지도 발견했습니다:
https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/components
다양한 아이디어를 시도해 봤는데, 제 훅이 아예 사용 불가능한 것 같기도 하고, 아니면 제가 뭔가 놓치고 있는 건가요!? :slight_smile:

컴포넌트가 마음에 드셨다니 기쁩니다!

제안해 주셔서 감사합니다 :grinning_face_with_smiling_eyes:

현재 이 컴포넌트는 토픽 목록에서 Topics로만 작동하도록 설계되어 있습니다.

1개의 좋아요

실험을 하거나 이 컴포넌트를 포크하고 싶으시다면 자유롭게 진행해 주세요 :+1:

카테고리를 클릭 가능하게 만들기 위한 시작점으로, Discourse 코어 내부의 topic-list-item 컴포넌트를 수정하여 이를 구현하는 이 컴포넌트의 코드를 살펴보는 것을 권장합니다.

같은 폴더 내에 새 파일을 만들어 컴포넌트에 포함된 수많은 카테고리 레이아웃 유형 중 하나를 대상으로 할 수 있습니다. 이 때, 포럼에서 선택한 카테고리 페이지 스타일과 동일한 스타일을 대상으로 하도록 주의하세요.

이 중 일부는 아래 위치에 나열되어 있습니다…

app/assets/javascripts/discourse/app/components/categories-and-latest-topics.js
app/assets/javascripts/discourse/app/components/categories-and-top-topics.js
app/assets/javascripts/discourse/app/components/categories-boxes-topic.js
app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js
app/assets/javascripts/discourse/app/components/categories-boxes.js
app/assets/javascripts/discourse/app/components/categories-only.js
app/assets/javascripts/discourse/app/components/category-list-item.js

3개의 좋아요

미리보기가 더 이상 작동하지 않습니다

2개의 좋아요

이제 괜찮을 것 같아요. :slightly_smiling_face::+1:

2개의 좋아요

이제 깨졌습니다.

Categories + Latest 뷰(우리의 경우 기본값)에서 주제 카드를 클릭할 수 있도록 이 컴포넌트에 의존하고 있었습니다. 오늘 최신 3.1.0beta8(현재 3.2.0.beta1-dev로 표시됨)로 업데이트한 후, 컴포넌트가 올바르게 작동하지 않게 되었습니다.

이제 커서의 활성 상태는 클릭 가능하게 유지되지만, 주제 영역은 클릭할 수 없습니다. 브라우저 콘솔을 열면 개발자가 문제를 식별하는 데 도움이 될 수 있는 오류가 표시됩니다.

Uncaught TypeError: this.router is undefined

function navigateToTopic(topic, href) {
    if (this.siteSettings.page_loading_indicator !== "slider") {
      // With the slider, it feels nicer for the header to update once the rest of the topic content loads,
      // so skip setting it early.
      this.appEvents.trigger("header:update-topic", topic);
    }
    this.session.set("lastTopicIdViewed", {
      topicId: topic.id,
      historyUuid: this.router.location.getState?.().uuid
    });
    _url.default.routeTo(href || topic.get("url"));
    return false;
  }

다음 줄에서 발생한 오류입니다:

historyUuid: this.router.location.getState?.().uuid

코어에서 계획 중이거나 진행 중인 Ember 업그레이드와 관련이 있을까요?

안녕하세요 @kinetiksoft - 제 환경에서는 해당 문제를 재현할 수 없었습니다. 테마 컴포넌트는 최신 버전의 Discourse에서 정상적으로 작동하는 것으로 보입니다. 여기에 있는 원문(OP)의 ‘테마 크리에이터에서 미리보기’ 링크를 사용해도 정상적으로 작동합니다.

해당 문제가 발생하는 사이트의 링크를 공유해 주실 수 있을까요? 다른 테마나 플러그인과 충돌이 일어나고 있을 수 있습니다.

2개의 좋아요

감사합니다! 해당 커뮤니티 링크를 개인 메시지로 보냈습니다. 공개적으로 공유하기엔 적절하지 않아요.

1개의 좋아요

@kinetiksoft 님, 감사합니다! 테마 컴포넌트가 ‘카테고리 + 최신’ 뷰(홈페이지로 설정되어 있는 뷰)와 함께 사용될 때 문제가 발생하는 것 같습니다.

이 문제를 해결할 수 있는 PR을 생성했습니다.

병합되면 이곳에 다시 게시하겠습니다. 이후에는 포럼을 Discourse 코어의 최신 버전으로 업데이트해 주셔야 합니다.

3개의 좋아요

데이비드, 감사합니다! 정상적으로 작동하는 컴포넌트에서 문제를 식별하는 데 도움을 드릴 수 있어 기쁩니다.

2개의 좋아요

모든 작업이 완료되었습니다 - 이제 최신 버전의 Discourse로 업데이트할 때 적용될 것입니다

1개의 좋아요

이번 주 후반에 업데이트를 시도할 예정이며, 모든 진행 상황을 보고하기 위해 이 주제에 다시 돌아올 것입니다. 다시 한번 감사합니다!

1개의 좋아요

해당 문제가 수정되었음을 확인했습니다. 다시 한번 감사합니다! :heart:

1개의 좋아요

안녕하세요, 이 컴포넌트를 Docs 플러그인을 지원하도록 수정하는 방법은 무엇인가요?

최신 Discourse 3.4.0.beta2-dev 버전을 사용하고 있습니다.


이 테마 컴포넌트의 설정에 문제가 있는지 확실하지는 않지만, 카드 안의 토픽 본문 텍스트가 클릭되지 않습니다. 텍스트가 끝난 직후의 어느 한 줄을 클릭하면 카드를 활성화하여 토픽을 열 수 있습니다.

이 문제의 원인이 무엇일지 혹시 아는 분이 계신가요?

미리 도움을 주셔서 감사합니다. :slight_smile:

4개의 좋아요

안녕하세요, TC님, 조언해 주셔서 감사합니다. 하지만 여전히 클릭이 되지 않는 영역이 있는 것 같습니다?

관리 중인 사이트에서 이 오류가 간헐적으로 발생하고 있습니다:

Discourse 52ab90911 및 Clickable Topic 37f0aa135fe를 사용 중입니다.

업데이트: 최근에는 사이트 설정에 아무런 변경 사항이 없었음에도 불구하고 이 문제가 다시 발생하지 않았습니다. 제가 이 문제를 확인했을 당시에는 페이지가 완전히 렌더링되기 전에 너무 빠르게 클릭한 것 같습니다. 이제 보고를 했으니, 의미 있는 정도로 재현할 수 있게 된다면 더 자세한 정보를 가지고 다시 찾아오겠습니다.

1개의 좋아요