테마 '맵'이 있나요? (플러그인 출력 포트 등을 쉽게 찾는 방법)

훌륭한 플러그인과 테마 컴포넌트 가이드를 모두 살펴봤지만, 필요한 템플릿/컴포넌트/위젯/플러그인 아웃렛을 빠르게 찾을 수 있는 위치가 여전히 조금 막막합니다.

간단한 수정 3가지를 시작해 보려는데, 방향을 잡아 주시면 큰 도움이 될 것입니다 :blush:

다음 항목들을 수정하려면 어떤 템플릿, 컴포넌트 또는 플러그인 아웃렛을 사용해야 하나요?

  1. 쇼 토픽(토픽 보기) 페이지 HTML의 안에 있는 태그입니다. 봇과 인간 모두에게 변경 사항이 표시되어야 합니다.
  2. 카테고리 박스의 마크업입니다. 어디에 표시되든 상관없이요. (해당 항목: AdminCP > 설정 > 카테고리 스타일.)
  3. About 페이지(Admin 및 Moderator 블록의 내용을 변경하는 위치)

다른 포럼 소프트웨어에서 테마를 적용할 때는 보통 해당 페이지를 구성하는 모든 요소에 대한 참조를 포함하는 상위(parent) 파일이 있어, 수정해야 할 템플릿을 빠르게 찾는 것이 쉬웠습니다. 예를 들어, forumdisplay(Discourse에서 카테고리 보기) 파일/템플릿에는 메인 HTML이 포함되어 있고 다른 모든 템플릿을 참조했습니다. showthread 페이지(Discourse의 토픽 보기 페이지)용 파일도 있었고, 회원 프로필 페이지용 파일도 있었습니다. 이러한 파일들은 무엇을 어디에서 찾아야 하는지 알려주는 목록이나 지도 역할을 했습니다. 따라서 예를 들어 게시글 마크업을 수정하려면 showthread(즉, 토픽 보기) 파일이나 템플릿으로 가서 살펴보면 postbit 템플릿을 수정하거나 살펴봐야 한다는 것을 알아차릴 수 있었습니다.

Discourse에도 이와 유사한 것이 있나요? 없다면 팀에서 비슷한 기능을 추가하는 것을 고려해 주시겠습니까? 큰 도움이 될 것입니다 :slight_smile:

그걸 봤어요 (아, 언급했어야 했는데 죄송합니다!). 눈에 잘 보이는 플러그인 아웃렛에는 정말 유용한데, 템플릿/컴포넌트/위젯 같은 경우에는 어떨까요? 로버트님은 그것들을 어떻게 빠르고 쉽게 찾나요? 첫 번째 게시물에 언급된 것들이 어디에 있는지 혹시 아는 게 있을까요?

제 조언은 항상 간단하게 시작하라는 것입니다. 먼저 간단한 요구사항부터 작업하고, 어떻게 구현할지 파악하세요. 그 다음 다음 단계로 넘어가면 됩니다.

테마 설정(Theme-ing)에 대해서는, 대부분 CSS 수정으로 해결될 것이라고 생각합니다. 보통 사용하는 리소스를 이용하세요. CSS로 해결되지 않는 경우, jQuery를 사용하여 템플릿을 수정하거나, 최후의 수단으로 템플릿을 오버라이드(overriding)해야 합니다. 새로운 사용 사례에 맞춰 자체 구성 요소나 위젯을 구축하고 첨부하세요.

소스 코드는 항상 당신의 친구입니다. discourse/discourse의 GitHub 디렉터리 구조를 살펴보면 앱의 각 부분이 어떻게 구성되어 있는지 확인할 수 있습니다. 템플릿 쪽이 이해하기가 더 쉽다고 생각합니다. Ember 디렉터리 구조에 익숙하지 않다면, 지금이 익숙해질 좋은时机입니다.

네, 꼭 그렇습니다. 저는 Discourse가 존재한 거의 대부분의 기간 동안 테마를 개발해 왔으며, 항상 별도의 창에서 소스 코드를 참고하고 있습니다.

일반적으로 템플릿의 경우 여기 https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates 를 확인해야 합니다.

위젯의 경우 여기 https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets. 를 확인하세요.

때로는 템플릿이 어디에 있는지 바로 명확하지 않을 수 있습니다. 예를 들어 다른 템플릿 안에 중첩되는 컴포넌트일 수도 있기 때문입니다… 기억이 나지 않을 때 제가 하는 일은 소스에서 특정 마크업 조각을 검색하는 것입니다…

예를 들어, 소개 페이지에 무언가를 추가하려고 할 때… 소개 페이지의 본문에 고유한 클래스 about-page가 있음을 알 수 있으므로, about과 body-page(페이지에 있는 또 다른 클래스)를 검색하기 시작합니다.

질문에 대한 답변을 드릴게요:

이것은 플러그인이 필요할 것 같고, 제 전문 분야를 벗어납니다… 다른 누군가가 더 도움을 줄 수 있을지도 모르겠네요.

서로 다른 페이지 레이아웃을 위한 템플릿이 있지만, “박스 with…” 레이아웃 중 하나에 대해 이야기하고 있다고 가정한다면

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

둘 다 답변해 주셔서 감사합니다 :slight_smile:

저도 그렇게 하고 있다고 생각했습니다 (타이틀 태그를 수정하는 것보다 더 간단한 작업은 없을 거라고 생각하거든요). 다른 포럼 소프트웨어라면 ‘showthread’ 페이지의 파일/템플릿을 열어 수정하기만 하면 되는데, 정말 1분도 걸리지 않습니다. Discourse 테마 작업도 이렇게 쉬웠으면 좋겠습니다 (물론 지금은 Discourse 테마 작업에 익숙하지 않아서 헤매고 있는 걸 수도 있겠지만요).

첫 번째 게시물에 있는 항목들에 대해서는 모두 기존 콘텐츠를 수정해야 하므로(특정 위치에 추가하거나 붙여넣는 것이 아니라, 플러그인 아웃렛이 주로 처리하는 방식과 달리) 이것이 필요하다고 생각합니다.

이것이 아마도 문제의 핵심일 수 있습니다. 저는 Ember를 잘 모르는데, 이것이 이 작업이 다소 낯설게 느껴지는 이유일지도 모릅니다. (deprecated) Plugin outlet locations theme component 같은 것이 템플릿과 커스터마이징 가능한 모든 것에 적용되었으면 좋겠습니다. 그러면 큰 도움이 될 것 같습니다.

그런데 Kris님은 필요한 것을 어떻게 찾으시나요?

아, 감사합니다. 정말 좋은 조언입니다!

정말인가요, Kris님? 플러그인(또는 플러그인 아웃렛)은 해당 아웃렛의 위치에 무언가를 추가하는 것만 가능하다고 생각했는데, 타이틀 태그 형식을 변경하려면 기존 템플릿(또는 컴포넌트 또는 위젯)을 열어 복사/수정해야 한다고 생각했습니다. 적어도 플러그인과 테마에 관한 두 가지 가이드를 읽은 후 제 이해는 그렇습니다.

감사합니다! 제가 필요로 하는 것 같네요 :smiley:

다시 한번 감사합니다, 하하! 둘 다 네이밍이 명확하고 알려주셨으니 이제 찾기 relativamente 간단해 보입니다. 타이틀 태그 변경에 막혀 있던 것이 영향을 미쳤을 수도 있겠네요 :relaxed:

지금은 무언가를 놓치고 있는 것 같은 느낌이 듭니다. @merefield님이 지적하셨듯이, Ember에 익숙하지 않은 것이 원인일 수도 있습니다. 빠르게 안내해 주는 유튜브 영상이 있는지 아는 분 계신가요? 혹시 당신이나 @merefield님이 하나 만들어 주실 수 있을까요? :blush:

Ember는 정말 배워볼 가치가 있습니다. 매우 강력하고 확장성이 뛰어나며 빠릅니다.

아래 글을 읽으면 소스 코드가 훨씬 더 명확하게 이해될 것입니다:

Templates, Computed Properties, Router, Components에 대해 자세히 알아보세요.

Discourse는 순수한 Ember 앱과는 정확히 같지 않지만, 가이드는 어떤 경우에도 큰 도움이 됩니다.

또 하나 중요한 팁: 원하는 것과 비슷한 기능을 구현하는 기존(좋은) 플러그인을 찾아보세요. 그 코드를 살펴보고 접근 방식을 참고하세요.

로버트, 감사합니다! 그 버전의 가이드가 오래되었다고 나와요. 디스코스가 그 버전을 사용하는 건가요, 아니면 최신 버전인 3.15 가이드를 읽어야 하나요?

일단 3.10을 참고하세요. 현재 Discourse에서 사용 중인 버전입니다. JavaScript 콘솔을 열면 해당 인스턴스에서 실행 중인 Ember와 jQuery 버전을 확인할 수 있습니다.

또한 코드 장식(코딩 스타일)이 여러 가지라는 점도 유의하세요. 따라서 소스 코드의 일부는 경우에 따라 약간 다를 수 있습니다.

불행히도 그게 아닙니다 :–(

다음도 시도해 보았지만:

테마 컴포넌트를 생성하고 여기에 다음을 추가했습니다:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

하지만 data-template-name을 위 항목들로 변경해도 효과가 없습니다. (components/topic-list로 변경하면 작동합니다.)

이 템플릿이 어디에 있는지 아이디어가 있을까요?

편집하고 싶은 부분은 이것입니다(단, box 형식이 표시될 때, 관리자 설정 > 설정 > 카테고리 스타일에서):

도움을 주시면 감사하겠습니다.

결국 테마 컴포넌트로는 이것이 불가능한 것 같습니다. 관련 템플릿/컴포넌트가 존재하지 않는 것으로 보이거든요 :sob:

이 Ruby 모듈이 인라인 스타일을 주입하는 것으로 보입니다: discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

이것은 일시적인 조치였나요? 아니라면, @sam 님, 우리가 커스텀 스타일을 지정할 수 있도록 해주는 것이 가능할까요?

기존의 none 옵션에 연결하여, 관리자 설정 패널에 두 개의 필드를 추가하고 각각에 스타일을 붙여넣을 수 있게 하면 어떨까요? (스타일을 붙여넣지 않으면 현재 none 옵션이 작동하는 것과 동일하게 작동합니다):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

그리고

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="A category exclusive to members with trust level 3 and higher."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Lounge</span></span>

이 스니펫에서:

우리는 일반적인 카테고리 편집 페이지에서 배경색과 텍스트색 변수에 접근할 수만 있으면 됩니다.

아니면 Sam 님, 이것을 편집할 다른 방법이 있을까요? 저는 단순히 배경색을 제거하고, 텍스트와 동일한 색상의 테두리를 추가하고 싶습니다 (일반적인 카테고리 편집 페이지에서 지정된 것과 같이).

도움이 되면 정말 감사하겠습니다.

수정: 결국 그 Ruby 파일이 아니었던 것 같습니다 (개발 설치 환경에서 수정했지만 아무 변화가 없었음).. 더 조사해보니 이것이 원인인 것 같습니다: discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub 이것을 수정할 플러그인을 만드는 방법이 있을까요?

이 작업을 수행하는 방법은 여러 가지가 있을 수 있습니다.

다음과 같이 시도해 보세요:

  • 해당 헬퍼를 호출하는 템플릿을 오버라이드합니다.
  • 자체 헬퍼로 교체합니다.

해당 템플릿: discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

계층 구조에서 매우 낮은 위치의 템플릿을 오버라이드하는 것은 비교적 위험이 낮습니다.

또 다른 방법으로는 topic-list-item 컴포넌트의 오버라이드 내에서 jQuery를 사용하여 필요한 수정 작업을 수행하는 것입니다.