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

@NateDhaliwal 네, 확인해 주셔서 감사합니다! 정말 이 TC를 좋아해서 좀 아쉽긴 한데, 수정해서 우리 사이트에 적용할 수 없다면 일단 빼 두고 카테고리 헤더를 예쁘게 만드는 다른 방법을 찾아보겠습니다.

@jackierenee 용기를 내서 직접 나서서 사이트 상태를 확인해 보았습니다.
테마 컴포넌트를 상위 테마에서 제거한 뒤 업데이트를 수행하고 다시 추가한 것 같습니다.

문제는 테마 컴포넌트가 호환성을 넘어 업데이트된 후 핀(Pin)이 추가되면 Discourse가 이를 복구하지 못한다는 점입니다.

이러한 상황에서 올바르게 복구하는 방법은 다음과 같습니다:

  • 테마 컴포넌트로 이동합니다.
  • 가장 아래까지 스크롤합니다.
  • “설정 편집기”(settings editor)의 설정을 복사합니다.
  • 텍스트 편집기에 내용을 저장합니다.
  • 테마 컴포넌트를 완전히 제거합니다(:wastebasket: 삭제).
  • Github 저장소에서 다시 추가합니다.
  • 텍스트 편집기에 저장해 둔 설정을 복사하여 “설정 편집기”(Settings editor)에 붙여넣습니다.
  • 필요에 따라 수정합니다(새 버전에서 설정 항목이 추가된 경우가 있으므로 다시 제거해야 할 수 있습니다. 저장하려고 하면 편집기가 해야 할 일을 알려줍니다).
  • 테마 컴포넌트를 상위 테마에 추가합니다.

사이트에서 이 작업을 수행했으며 이제 배너가 다시 표시됩니다.

테마 컴포넌트 개발자분들께: about.json의 version 필드를 활용하면 테마 컴포넌트가 어떤 버전을 사용 중인지 관리자가 실제로 확인할 수 있어 매우 도움이 됩니다. 불행히도 Discourse는 플러그인과 달리 테마 컴포넌트에 커밋 버전을 표시하지 않습니다.

8개의 좋아요

정중한 말씀이시네요. main 브랜치에 새로운 커밋이 있을 때마다 자동으로 버전을 업데이트하는 GitHub Action을 추가해 보겠습니다.

4개의 좋아요

이 Theme Component의 Show category name 설정을 사용하면 쉽게 구현할 수 있습니다. 이 설정은 바로 이 용도를 위해 설계되었습니다.

아주 좋은 아이디어입니다! 이 방법을 문서화하고, Developing Theme Components for Dummies 가이드(만약 있다면)에 추가해 주세요.

시도해 봤습니다. 제 우려 사항이 모두 해결되었고, 매우 잘 보입니다. 잘하셨네요!!!

여기서 질문이 하나 있습니다. About 토픽의 설명으로 사용할 단락 수를 지정할 수 있는 기능을 추가하는 것이 얼마나 어려울까요? 개인적으로는 단락 하나만 사용하는 것이 다소 제한적이라고 느껴서, (아마도 카테고리별로) 사용할 단락 수를 지정할 수 있으면 좋겠습니다.

마지막으로(아직 이 TC에 집중하고 있는 상태에서), “Read more…”를 마지막 단락의 끝으로 이동시키는 것이 좋을까요? 제 인스턴스에서는 많은 공간을 절약할 수 있을 것 같습니다. 하지만 여러 단락을 사용할 수 있게 된다면, 두 번째 단락에 링크 등이 있는 경우와 충돌이 생길 수도 있겠네요. :thinking:.

음… 코드가 카테고리 설명에 접근하는 방식은 this.args.category.description입니다. 기억이 맞다면 이미 1단락으로 제공되는 것 같습니다. 한번 확인해 보겠습니다. 아마 fetch()나 ajax를 사용할 수 있겠지만, 그렇게 하면 성능이 더 떨어질 수 있습니다.

인라인으로 표시할지 여부 선택을 설정할 수 있게 하면 어떨까요? 한번 확인해 보겠습니다.

1개의 좋아요

안녕하세요, 카테고리 텍스트의 글꼴 크기를 "작게"로 설정해도 반영되지 않고 항상 크게 표시되는 것을 확인했습니다. (아마도 1~2일 전에 발생한 것 같습니다.)

우리는 이를 변경하여 카테고리 설명이 코어 기본값(최근 증가한 것으로 보입니다)보다 작거나 크도록 설정했습니다.

여기서 혼선을 빚은 것이 테마 충돌인지 다시 확인해 보겠습니다.

1개의 좋아요

안녕하세요 @RGJ, 정말 정말 감사드립니다! 테마 컴포넌트가 이렇게 작동하는 줄 몰랐어요. 이런 상황을 다시 마주치면 꼭 참고하겠습니다. 도움 주셔서 진심으로 감사드립니다! :folded_hands:

2개의 좋아요

이것은 매우 드물고 구체적인 상황이며, 기이한 동작을 보이므로, 당분간 이런 문제를 다시 만나지 않기를 바랍니다!

3개의 좋아요

안녕하세요, 다음 CSS로 문제를 해결했습니다:

.category-title-description .cooked {
  font-size: small;
}

이 컴포넌트에 다음 설정이 적용될 때 데스크톱 및 모바일 브라우저에서 카테고리 페이지가 빈 화면으로 표시됩니다 (Discourse 버전 3.5.0.beta8-dev).

  "setting": "show_mobile",
  "value": false

기본값(true)으로 되돌리면 페이지가 정상적으로 표시됩니다.

콘솔에 다음과 같은 오류가 표시됩니다…

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating ‘this.site.mobileView’)

…이는 다음과 관련이 있습니다…

/discourse/theme-javascripts/theme-3/discourse/components/category-header.gjs)

…문제가 되는 부분은 아래 코드에서 3번째 줄(const hideMobile)입니다:

    get showHeader() {
      const isException = this.args.category && settings.hide_category_exceptions.split("|").includes(String(this.args.category.id));
      const hideMobile = !settings.show_mobile && this.site.mobileView;
      const subCat = !settings.show_subcategory_header && this.args.category.parentCategory;
      const noDesc = !settings.hide_if_no_category_description && !this.args.category.description_text;
      const path = window.location.pathname;
      return /^\/c\//.test(path) && !isException && !noDesc && !subCat && !hideMobile;
    }

이러한 문제가 발생하는 이유가 무엇일까요?

1개의 좋아요

기술적으로는 작동해야 할 것 같은데… 그 줄은 업데이트 전에도 이미 있었습니다. 한번 확인해 보겠습니다.

@HTW 수정 사항을 적용했습니다. 이제 잘 작동하는지 확인해 주세요!

1개의 좋아요

수정되었습니다. 감사합니다.

최근 카테고리 헤더에 핵심 변경 사항이 있었던 것으로 보이며, 이는 이 컴포넌트를 사용할 때 핵심 헤더가 더 이상 숨겨지지 않는다는 것을 의미합니다.

이 컴포넌트를 핵심의 스타일 변경 사항과 일치시키려고 해야 할까요?

3개의 좋아요

음… 여기서 어떤 변경 사항이 있나요? 스크린샷을 올려주실 수 있을까요? 감사합니다.

신규 업데이트된 사이트에서 TC가 활성화된 상태 (분명히 스타일링이 약간 이상해졌음):

TC가 비활성화된 상태:

1개의 좋아요

뒤에 !important를 추가했는데… 이제 작동하나요?

2개의 좋아요

소소한 관찰: 설명 텍스트 크기 옵션이 여전히 너무 큽니다. ‘작게’ 옵션조차 var(--font-up-2)를 사용하고 있습니다. var(--font-0)(‘가장 작게’ 또는 ‘기본값’)를 옵션으로 추가할 수 있을까요?

혹시 이 부분에 대한 PR을 받아주실 의향이 있으신가요?

1개의 좋아요

@jrgong $font-0 값을 가지는 ‘smallest’ 옵션을 추가하는 PR을 병합했습니다. 문제가 발생하면 알려주세요!

2개의 좋아요