여러분 안녕하세요,
저희 사이트의 마스터 테마 컴포넌트에서 여러 스타일에 대해 아주 사소한 일반적인 편집을 진행하고 있습니다. 이렇게 하면 다음 업데이트 시 편집 내용이 지워질까 봐 걱정하지 않고 원격 스타일을 포크하거나 수정할 필요가 없습니다. 지금까지 한 편집들은 좋아요 버튼 변경과 같은 범용적인 내용들이었습니다.
테마 컴포넌트에서 다른 스타일에 영향을 주지 않고 딱 하나의 스타일만 지정하여 수정할 수 있는지 궁금합니다. 혹시 데이터 변수를 통해 가능할까요?
이렇게 사소한 일을 위해 별도의 테마 컴포넌트를 만들고 싶지 않습니다. 범용적인 편집을 위해 하나의 테마 컴포넌트를 사용하는 아이디어가 좋습니다.
보통은 CSS 내에서 특이성(specificity)에 의존할 수 있습니다. CSS에 익숙하지 않다면, 이는 다음과 같은 의미로 요약할 수 있습니다: 동일한 요소를 대상으로 하는 여러 스타일 중 더 구체적인 스타일이 우선 적용됩니다.
<div class="custom-container"
<a class="custom-link">link here</a>
</div>
따라서 변경하려는 컴포넌트의 해당 요소(또는 부모 요소) 어딘가에 고유한 클래스가 있는지 확인해야 합니다. 예를 들어 다음과 같은 경우:
위 예시에서는 .custom-link를 사용할 수 있거나, 요소에 직접 클래스가 없다면 .custom-container a처럼 부모 요소를 활용할 수 있습니다. 컴포넌트가 원래 .custom-link로 스타일을 정의했다면, a.custom-link로 더 구체적으로 지정하여 오버라이드되도록 할 수 있습니다.
컴포넌트 어딘가에 고유한 클래스가 없다면 플러그인 아웃렛 컨테이너를 사용할 수도 있습니다. 커스터마이징에서 플러그인 아웃렛이 사용되면 컨테이너에 커스텀 클래스가 추가됩니다. 다시 링크 스타일링을 예로 들면, .above-site-header-outlet.brand-header a와 같이 보일 수 있으며, 여기서 "brand-header"는 컴포넌트에서 추가된 템플릿의 이름입니다.
최악의 경우, 원하는 것을 스타일링할 쉬운 방법을 찾을 수 없다면 해당 컴포넌트를 만든 사람에게 클래스를 추가해 달라고 요청할 수도 있습니다.
이 설명이 이해하기 어렵다면, 스타일링하려는 컴포넌트의 구체적인 예를 들어 주시면 도움이 될 것입니다.
정말 감사합니다. 정말 도움이 됩니다.
예를 들어, 저는 Graceful을 설치해 두었습니다. Graceful Theme 이제 보니 이것이 이전 스타일의 연속으로 게시된 것이었군요.
제 유니버설 테마 컴포넌트에서 배경 자산 업로드, 좋아요 버튼 변경 등 몇 가지 작업을 수행했지만, 다크 팔레트를 사용하는 경우의 배경색을 원하는 대로 변경하되 라이트 팔레트를 사용하는 경우에는 영향을 주지 않도록 해야 한다는 것을 깨달았습니다.
정확히 말하면 이 부분입니다:
background-color: $primary-very-low;
이제, 기술적으로 동일한 스타일이기 때문에 가능한 한 하나의 테마 컴포넌트에서 처리하려 했습니다. 하지만 이러한 사소한 문제들이 보편적인 변경 사항이 아닌 경우들이 발생하기 시작했거든요. 가능하다면 “Dark” 컴포넌트와 “Light” 컴포넌트를 따로 만들어야 하는 상황을 피하고 싶습니다.
여기서의 목표는 팔레트 수정을 제외하고 Graceful 자체에는 손을 대지 않고, 모든 작업을 저희의 컴포넌트에서 수행하는 것입니다.这样您就可以, 귀하나 다른 사람이 업데이트를 푸시할 때 저희가 편집 내용을 다시 적용할 필요가 없게 됩니다.
Discourse가 변수를 많이 사용한다는 점을 알아차렸고, 이 점은 매우 마음에 듭니다. 테마 가이드를 읽는 것은 즐거웠습니다. [data-topic-id=“117”]와 같은 것이 존재한다는 것을 알아차렸으므로, [data-theme-id]와 같은 것을 제안해 볼 수 있을까요?
@awesomerobot 오해가 없도록 명확히 말씀드리면, 다른 게시판에서 큰 보드를 가져오는 작업이 아직 진행 중이라서, 전체 테마를 스타일이라고 부르는 데 익숙합니다. 그런데 스타일이라고 한 건 실제로는 테마를 의미한 거였어요. 죄송합니다!