게시된 페이지에 카테고리 클래스 추가

스크립트 태그에서 type="text/discourse-plugin"을 사용할 수 없다면, 게시된 페이지의 현재 카테고리 슬러그를 가져오는 방법이 있을까요?
목표는 페이지 HTML 태그에 슬러그를 포함하는 새로운 클래스를 추가하는 것입니다.

안녕하세요,

전체적으로 완전히 이해하지는 못했지만, body에 카테고리가 있으므로 이를 대상으로 지정할 수 있습니다.

예를 들어:

다음과 같이 모든 라운지 카테고리 주제를 대상으로 지정할 수 있습니다:

.published-page.lounge {
  ...
}

죄송합니다, 제가 충분히 명확하게 설명하지 못했고 목적을 더 잘 설명했어야 했는데 그러지 못했습니다.

현재 페이지 게시 시 카테고리 배경이 사용되지 않습니다.

설정:

토픽 뷰:

게시된 페이지 뷰:

카테고리 배경은 color_definitions.scss에서 정의되어 있습니다:

body.category-test-category {
    background-image: url(/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg)
}

게시된 페이지에는 category-test-category 클래스가 없기 때문에 배경 이미지를 상속받지 못합니다.

제 아이디어는 JavaScript를 사용하여 카테고리 슬러그를 가져오고, 카테고리 이름이 무엇이든 body 태그에 category-[category slug] 클래스를 추가하여 카테고리 배경이 자동으로 적용되도록 하는 것입니다. 이렇게 하면 각 게시된 페이지의 카테고리에 대해 다음과 같은 사용자 정의 CSS를 작성할 필요가 없습니다:

.published-page {
    &.test-category {
        background-image: url("/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg");
    }
}

동의합니다, 아주 좋은 아이디어입니다 :+1:

아, 그렇군요… 좋은 아이디어지만, 불행히도 테마 컴포넌트(JavaScript)로 게시된 페이지를 수정하는 것은 불가능할 것 같아요. 아마 플러그인을 사용하거나 코어에 카테고리 이름 앞에 category- 부분을 추가하는 방식으로 해야 할 겁니다.

지금은 수동 방식이 작동하는 것 같아요. 게시된 페이지의 카테고리에 관련 SCSS를 포함하는 테마 컴포넌트를 만들고, 이 부분에 대한 설정을 추가하면 됩니다.

아마 이런 것 같은 거죠: GitHub - VaperinaDEV/published-page-category-background-image · GitHub

하지만 더 나은 해결책이 있을 수도 있고, 확신은 못 하겠네요. :slightly_smiling_face:

정말 영리한 해결책이지만, 코어에 그런 기능이 기본적으로(또는 커스터마이징 가능하게) 포함되면 좋겠다는 데 동의합니다. 현재 의도는 publish.scss에서 볼 수 있듯이 테마의 색상을 사용하여 기본 배경을 명시적으로 사용하는 것입니다:

.published-page {
  background-color: var(--secondary);
  color: var(--primary);

커스텀 카테고리 배경 이미지 URL을 CSS 변수로 저장하면, 우리가 작성하는 커스텀 CSS에서 쉽게 접근할 수 있을 텐데 어떨까요? 적어도 CSS에서 전체 이미지 URL을 사용할 필요가 없어질 것입니다.


여기에 기능 요청을 등록했습니다: Published pages could inherit categories' background image setting