이런 걸 어떻게 구현할 수 있을까요?
https://gyazo.com/973b2e2525e43beeb9000b67bbae803e
카테고리에 사진을 추가하면 전부 작아지고 보기 흉해져요.
관련된 커스텀 플러그나 방법이 있을까요?
Category Banners 을 확인해 보세요. 이 주제는 사이트에 설치하여 카테고리에 배너를 추가할 수 있는 테마 컴포넌트입니다. 주제 하단의 “추가 CSS 스타일링” 섹션에는 배너의 배경 이미지를 설정하는 방법에 대한 자세한 내용이 나와 있습니다.
보아하니 그게 카테고리 배너인 것 같은데, 제가 더 잘 설명드리자면… 섹션을 보여주는 배너가 필요합니다.
이런 걸 원합니다.
이 작업에는 일부 커스텀 작업이 필요합니다. 직접 해보고 싶으시다면 테마 가이드를 확인해 보시고, 대신 누군가에게 의뢰하고 싶으시다면 Marketplace 카테고리에 주제를 생성하세요.
이것이 그들이 사용하는 방법인데, 제가 작동시킬 수 없습니다
discourse-misc-html-css (2).zip (2.5 KB)
CSS와 Head 탭에서 수정해야 할 링크와 항목이 많습니다. 해당 작업을 완료하셨나요?
그것이 현재 Fivem에서 사용하는 커스텀 CSS이고, 관리팀에서 보내준 것이 바로 그것인데, 어떻게 작동하게 해야 할지 모르겠습니다.
discourse-misc-html-css (2).zip (2.5 KB)
일주일 정도 이 문제를 가지고 씨름하다가 겨우 동작하게 만들었습니다.
사진
솔직히 지금은 아주 잘 작동하고 있어요.
하지만 상단에서 왜인지 일부 카테고리가 중복으로 표시되네요.
이걸 어떻게 고쳐야 할까요? 카테고리 중복을 막으려면 어떻게 해야 하나요?
제 설정 파일입니다.
discourse-misc-html-css.zip (2.5 KB)
그래서 적어도 나 자신에 대해서는 이제 수정을 완료했습니다
우선 이 파일을 다운로드하세요
discourse-misc-html-css (2).zip (2.5 KB)
사이트에 이 파일을 추가하는 방법을 잘 모르겠다면 먼저 이 가이드를 확인해 보세요
Misc/HTML+CSS 공통(Common) 섹션으로 이동한 후, CSS에서 몇 가지 설정을 조정해야 합니다
우선 이 줄을 복사해야 합니다
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
그리고 배너 이름을 원하는 것으로 변경해야 합니다
제 예시에서는 test1을 사용하겠습니다
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
이제 CSS 섹션에서는 끝입니다
그 다음 섹션으로 이동하세요
그리고 아래로 내려가서
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
이름이 다음과 같은 섹션을 찾으세요
<div class="category-thing fivem">
그리고 복사하세요
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
그리고 설정에 맞게 변경하세요. 제 예시에서는 test1을 사용했습니다
여기서도 같은 작업을 수행할 것입니다
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
그 다음 아래로 내려가서
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
섹션을 찾으세요
그리고 다음을 찾으세요
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
그리고 설정에 맞게 변경하세요. 제 예시에서는 fivem을 test1로 변경하겠습니다
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
그 다음 더 아래로 내려가서 이 코드가 있는 섹션을 찾으세요
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
여기서 위에서 생성한 카테고리 플래그를 추가해야 합니다. 이렇게 해야 제가 겪었던 문제처럼 카테고리가 중복되지 않습니다
그래서 제 예시에서는 test1을 추가할 것입니다
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
그 다음 아래로 내려가서 이름이 다음과 같은 섹션을 찾으세요
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
여기서 fivem을 원하는 것으로 다시 변경해야 합니다. 제 예시에서는 test1을 추가할 것입니다
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
그리고 이제 끝입니다
이제 해야 할 일은 카테고리 슬러그(Category Slug)를 변경하는 것입니다. 제 예시는 다음과 같습니다
그리고 해당 카테고리가 test1 배너 아래에 위치하게 됩니다
그리고 이 예시에서는 모든 다른 카테고리가 core CFX.RE 배너 아래에 위치하게 됩니다
참고로 현재 제 사이트에서 사용하고 있는 설정은 다음과 같습니다
discourse-misc-html-css.zip (2.5 KB)
확인해 보고 싶다면 여기 있습니다
https://forum.tgacommunity.com/
이제 이 주제를 해결됨으로 표시할 수 있을까요?
이 글이 도움이 되었기를 바라며, 궁금한 점이 있다면 여기나 쪽지로 물어봐 주세요
여러분 안녕하세요. @manuel 님이 이 코드를 확장한 테마 컴포넌트를 만들어 주셨습니다. 이를 통해 다른 분들이 자신의 포럼에서 더 쉽게 이 기능을 사용할 수 있게 되었습니다.
두 가지 방법 모두 작동하며, 어떤 방식을 사용할지는 전적으로 여러분에게 달려 있습니다. 두 방법 모두 동일한 결과를 제공합니다.