Discourse 카테고리 헤더 테마 컴포넌트

다크 모드 카테고리 로고를 지원하는 PR입니다:

저도 이 부분이 조금 거슬렸습니다. 커스텀 CSS를 조금만 추가하면 해결됩니다:

// 카테고리 헤더의 '더 보기' 링크가 요약 텍스트와 동일한 색상을 사용하도록 설정

.category-about-url a {
  color: inherit;

}
2개의 좋아요

«더 보기» 링크에 대한 남은 바람이 있습니다. 실제로 더 많은 콘텐츠가 있을 때만 표시되도록 해 주세요. About 카테고리 페이지 중 긴 것도 있고 짧은 것도 있는데, 추가 콘텐츠가 없는데도 링크를 제공하기보다는 없는 경우 링크를 숨기는 것이 낫다고 생각합니다.

(이것이 실현 가능한지 전혀 모르겠습니다. TC에게 너무 많은 것을 요구하고 있는 건 아닐지 걱정됩니다.)

1개의 좋아요

전체 카테고리 설명이 표시될 때, Theme Creator와 내 개발 인스턴스에서도 이 문제를 겪고 있습니다. 현재 조사 중입니다. 라우트는 변경되지만 추적되는 변수는 변경되지 않기 때문이라고 추측합니다.

업데이트: 카테고리 설명에 대해 확장/축소 기능을 추가했습니다. @nathank 또한 다음에서 버그를 수정했습니다:

Ask Discourse에서 라우터 서비스와 함께 willDestroy를 사용하도록 도와주었습니다.

2개의 좋아요

와, 네이트! :open_mouth: 한밤에 커밋 55개와 PR이라니… 정말 대단하네요.
병합되는 걸 지켜보고 직접 써볼 날을 기대하고 있겠습니다!

1개의 좋아요

실제로 나한테는 늦은 오전이에요 :wink:. 설명에 더 많은 텍스트가 있는지 확인하는 제안이 가능한지 알아볼게요. 테스트를 하던 중에도 저도 그런 기능이 필요하다고 느꼈거든요.

2개의 좋아요

정말 훌륭한 추가입니다! :heart:

작은 피드백 하나: 사용자가 펼치기/접기 기능을 알 수 있도록 카테고리 헤더의 오른쪽 위 모서리나 오른쪽 가장자리에 셰브런(화살표) 아이콘을 추가하는 것이 좋을 것 같습니다. 하지만 훌륭한 시작이며, 지금은 링크 텍스트에 이모지를 사용하여 지시하는 것만으로도 충분히 역할을 합니다:


(참고로, 링크 텍스트의 번역도 추가하면 좋겠습니다.)

2개의 좋아요

PR이 병합되었습니다 :git_merged: !

확인했습니다 :+1: . 확인해 보겠습니다.

3개의 좋아요

Nate, 더 보기/적게 보기 기능이 정말 훌륭해요, 감사합니다!

그 링크가 더 많은 텍스트가 존재할 때만 조건부로 표시되도록 할 수 있는 방법이 있다면 좋겠지만, 제가 설명을 더 길게 작성하는 것도 방법입니다 :laughing:

아직 확인하지 못했을 수 있는 몇 가지 문제를 발견했어요:

  • 카테고리 및 태그 링크의 SVG 아이콘이 렌더링되지 않아요
  • 카테고리 이미지가 표시되지 않아 기본 사이트 아이콘이 표시되고 있어요
(스크린샷)

image

우회적으로 해결한 작은 문제 하나: 소개 텍스트의 링크가 텍스트 색상을 상속받지 못했어요. 이전에 언급된 더 보기 링크처럼요. 이 CSS는 카테고리 및 태그 링크에 영향을 주지 않으면서 텍스트 링크에 스타일을 적용합니다:

// 카테고리 및 태그 링크를 제외하고 텍스트 링크에 스타일 적용
.category-title-header .category-title-description 
a:not([data-type="tag"], [data-type="category"]) {
  color: inherit;
  text-decoration: underline;
}
(스크린샷)

image
image

업데이트에 정말 감탄하고 있으며, 제 SVG 및 아이콘 문제가 간단한 수정으로 해결되기를 바랍니다.

흥미롭네요. 이전에 이 문제가 있었는지 알고 계신가요?

확인해 보겠습니다. 저도 같은 문제를 겪었습니다. 그 사이에 show site logo 설정을 비활성화해 보세요. 그러면 해결되는 것 같습니다.

감사합니다. 이전에 이런 상태였고 어떤 변경 사항이 있었나요?

당분간 show site logo 설정을 비활성화해 보세요. 그렇게 하면 해결되는 것 같습니다.

그렇게 하면 됩니다. 감사합니다. 더 많은 설정을 실험해 보았어야 했는데.

SVG 링크 아이콘과 텍스트 링크 색상과 관련해서는, 이전에는 어떤 동작을 했는지 말하기 어렵습니다 – About 텍스트의 짧은 요약 부분에 링크를 사용한 적이 없었기 때문입니다. 하지만 지금은 확장된 ‘더 보기’ 부분에 몇 개의 링크가 있습니다.

(그 링크 색상 CSS를 공유한 것은 귀하나 다른 분들에게 도움이 될 수 있을 것 같아서인데, 그런 스타일 조정 작업이 반드시 해당 컴포넌트의 책임은 아니라는 점은 알고 있습니다.)

1개의 좋아요

Nate, 플레이스홀더 카테고리/링크 SVG 아이콘 관련 문제에 대해 의견이 있으신가요?

image image

헤더와 토픽 내에서 코딩 방식에 차이가 있는지 모르겠지만, 출력되는 결과가 꽤 다릅니다:

카테고리 링크 비교

헤더의 카테고리 링크:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>Wild Speculations</span>
</a>

토픽의 카테고리 링크:
image

<a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square" aria-label="Wild Speculations">
  <span class="hashtag-category-square hashtag-color--category-5"></span>
  <span>Wild Speculations</span>
</a>

그리고

태그 링크 비교

헤더의 태그 링크:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag">
  <span class="hashtag-icon-placeholder">
    <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
      <use href="#square-full"></use>
    </svg>
  </span>
  <span>ai</span>
</a>

토픽의 태그 링크:
image

<a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag" aria-label="ai">
  <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-5 svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <use href="#tag"></use>
  </svg>
  <span>ai</span>
</a>

요 며칠 동안 바빴습니다 (내일 처리하겠습니다). 이 문제는 카테고리 설명에 이미 포함되어 있다고 생각합니다. 전체 설명을 사용해도 여전히 발생합니까?

기꺼이 도와주셔서 감사드리고, 귀찮게 하려는 건 아닙니다. 제가 직접 해결할 수 있는 게 있는지 알아봤습니다. (없습니다. :flushed_face:)

하지만 Show full category description이 활성화된 상태에서도 여전히 발생하고 있습니다.

1개의 좋아요

일단 시도해보고 할 수 있는 일이 있는지 확인해볼게요. 최후의 수단으로, 색상(아이콘은 고려되지 않을 수 있음)을 기반으로 조정하는 로직(복잡할 수 있음)을 사용하는 것입니다. 더 나은 방법이 있다면 제안을 환영합니다.

@ToddZ 공식 Category Banners 컴포넌트(메타가 사용하는 것으로 추정)의 이 예시를 살펴보면, 이 문제도 함께 존재합니다.

아…! 그리고 누군가가 이 문제를 언급하고 있습니다:

카테고리 아이콘이 제대로 작동하는지 확인하기 위해 Category Banners를 설치해 보았지만, 작동하지 않았습니다. Category Headers와 마찬가지로 카테고리 아이콘과 태그 아이콘 모두 플레이스홀더로 표시됩니다. 설정에서 선택한 아웃렛이 무엇이든 마찬가지입니다.

정상적으로 처리되도록 하는 방법이 있다면 좋겠지만, 복잡한 우회책을 사용하게 하고 싶지는 않습니다.

1개의 좋아요

horizon 테마와의 호환성을 테스트해 보았습니다. 전반적으로는 기본적으로 작동하지만, 유일한 문제는 Horizon 테마에서 카테고리 헤더 테마 컴포넌트가 현재 사용하는 플러그인 아웃렛이 list-controls 컨테이너 내부에 있다는 점입니다. 이로 인해 카테고리 헤더 전체가 고정(sticky)됩니다.

제안하는 해결책은 플러그인 아웃렛을 변경하거나, list-controls 컨테이너 외부의 다른 플러그인 아웃렛을 선택할 수 있는 옵션을 추가하는 것입니다. 예를 들어 discovery-list-controls-above 아웃렛을 사용할 수 있습니다.

원하시면 PR을 올리겠습니다. @NateDhaliwal

2개의 좋아요

흥미롭네요. 이 문제를 제기해 주셔서 감사합니다. 조사해 보겠습니다.

1개의 좋아요

이 테마 컴포넌트에 대한 PR을 제출했습니다. 좀 서투르게 진행해서 두 가지 다른 내용이 하나의 PR에 포함되어 있습니다 :sob:

  • 기능: 카테고리 제목 설명 뒤에 플러그인 아웃렛 추가
  • 수정: 배경 이미지에 S3 CDN을 사용하지 않던 문제 해결

확인해 주신 후 병합해 주실 수 있을까요?

2개의 좋아요

좋아 보입니다! 제가 먼저 병합했습니다. (그전에 못 본 것 죄송합니다)

1개의 좋아요