클래스를 다시 열고 함수를 오버라이드하는 방법이 있을까요?
오버라이드해야 하는 함수는 javascripts/discourse/helpers/category-link.js.es6 파일의 15번째 줄에 있는 function categoryStripe(color, classes) {}입니다.
클래스를 다시 열고 함수를 오버라이드하는 방법이 있을까요?
오버라이드해야 하는 함수는 javascripts/discourse/helpers/category-link.js.es6 파일의 15번째 줄에 있는 function categoryStripe(color, classes) {}입니다.
그렇다고 생각합니다. Developing Discourse Themes & Theme Components 을 확인해 보셨나요?
요청하신 작업을 수행하는 방법은 여러 가지가 있습니다. categoryStripe를 덮어쓰려는 목적은 무엇인가요?
다음과 같이 변경하고 싶습니다:
function categoryStripe(color, classes) {
var style = color ? "style='background-color: #" + color + ";'" : "";
return "<span class='" + classes + "' " + style + "></span>";
}
다음으로:
function categoryStripe(color, classes) {
var style = color ? "style='border: 1px solid #" + color + ";'" : "";
return "<span class='" + "my-class" + classes + "' " + style + "></span>";
}
즉, 배경색을 테두리로 변경하고 클래스를 추가하는 것입니다.
Justin, 이를 달성하는 가장 좋은 방법은 무엇인가요?
그것은 읽었습니다. 다만 기억이 정확하지는 않지만, 템플릿(과 위젯)을 덮어쓰는 기능만 다루고 헬퍼에 대한 언급은 없는 것 같던데요?
첫 게시물에서 그런 내용이 명확하게 드러나지 않았습니다. 이제 유용한 답변을 받으실 것 같은데, 저도 그 답변이 궁금합니다!
JavaScript를 통해 클래스를 추가하거나, 스타일시트에서 !important를 사용하여 인라인 스타일을 오버라이드하는 방법을 고려해 보셨나요? 이 방법을 오버라이드하는 작업은 가능하지만, 결국 깨질 수 있습니다. DOM에 JavaScript를 통해 추가하는 것이 아마도 가장 안정적인 방법일 것입니다.
며칠 전 제가 파악하려고 했던 내용은 사실상 그것과 비슷했습니다. 모든 주제의 게시글(단, 주제/원본 게시글은 제외)에 사용자 정의 클래스를 추가하고 싶었습니다. 사용자 그룹과 주제 생성 시각(created_at)에 따라 해당 사용자 정의 클래스를 켜고 끌 수 있으면 좋겠지만, 일단 게시글에 사용자 정의 클래스를 추가하는 방법을 파악하면 나머지 부분은 알아서 해결할 수 있을 것 같았습니다. 제가 찾고 있던 정확한 예시를 바로 찾지는 못했지만, 예시를 찾기 전에 다른 몇 가지 사항에 시선이 끌려갔을 수도 있습니다.
그렇게 하면 안 될 것 같습니다. 색상은 카테고리 설정에서 가져와야 하니까요. 즉, 카테고리마다 테두리 색상이 달라져야 합니다. (위 글을 이 내용으로 업데이트했습니다.)
JS를 통해 DOM에 추가하는 방식으로 가져올 수 없나요? (가능하다면 예시를 보여줄 수 있을까요?)
정확한 내용을 살펴봐야 JS 선택만으로도 여러분이 하려는 것이 가능한지 확인할 수 있을 것 같습니다(아쉽게도 지금은 시간이 없습니다).
하지만 여기서 클래스를 추가하는 방법을 볼 수 있습니다: discourse-knowledge-base-theme/javascripts/discourse/components/knowledge-base.js.es6 at 4694d4a8ad788f8884e3341c852d3f77b2c1d103 · discourse/discourse-knowledge-base-theme · GitHub
JS를 사용하여 인라인 스타일을 수정하는 것도 가능합니다: Setting CSS Styles using JavaScript
Justin, 감사합니다. 확인해 보겠습니다.
혹시 템플릿/컴포넌트/위젯처럼 헬퍼를 오버라이드할 수 있는 방법이 있을까요? (discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub)
필요하다면 해당 파일의 향후 변경 사항을 주시하는 것은 괜찮습니다 ![]()
테마에서 javascripts/discourse/helpers/category-link.js.es6 파일을 만들고, 해당 함수의 수정된 버전을 여기에 추가해 보세요. 제가 그 정도 깊이까지 손을 대본 지 꽤 됐기 때문에, 실제로 동작할지는 보장할 수 없습니다! ![]()
네, 그렇게 하면 작동할 거예요.
둘 다 감사합니다!
마지막 질문입니다(바라건대!): 거기에 파일을 어떻게 만들까요? ![]()
플러그인에서는 간단합니다. 폴더를 만들고 복사해서 붙여넣기만 하면 됩니다!
아!!! 로버트 씨, 감사합니다!
지금 잠시 나가야 해서, 돌아오면 바로 시도해볼게요 ![]()
JavaScript 콘솔에서 오류가 발생하고 있나요?
_전체 파일_을 포함했나요?
참고로 플러그인 생성기는 사용하지 않았고, 전부 수동으로 작성했습니다.
글을 쓸 당시에는 포함하지 않았습니다(Justin이 해당 함수만 포함하라는 뜻인 줄 알았기 때문이죠). 하지만 전체 파일을 포함하니 작동은 했습니다. 다만, 파일을 직접 수정했을 때와는 달랐습니다.
예를 들어 latest 페이지에서는 작동했지만, all categories 드롭다운에서는 작동하지 않았습니다… 그런데 파일을 직접 수정했을 때는 작동했죠!
그래서 결국 엉망진창인 CSS
로 필요한 변경 사항을 처리했고, 일부 타협도 해야 했습니다. 아예 할 수 없었던 것보다는 확실히 낫지만, 이상적으로는 카테고리 스타일을 변경하는 것이 템플릿을 편집하는 것만큼 간단했으면 좋았을 텐데 ![]()
저도 그렇게 해보고 싶습니다.
테마 컴포넌트에서 오버라이드하려고 하는 파일의 경로는 다음과 같습니다:
custom_loader\javascripts\discourse\helpers\loading-spinner.js
하지만 해당 JS 파일이 로드되지 않습니다. 제가 놓치고 있는 부분이 무엇일까요?