duranmla
2월 12, 2020, 2:53오후
1
모두 안녕하세요,
기본 Discourse의 여러 측면을 커스터마이징하기 위해 테마를 작업하고 있습니다. 이 관점에서, 커스터마이징해야 할 것 중 하나는 topic-list-item이며, 이는 비교적 간단해 보입니다. 제 테마의 javascripts/discourse/templates/components/topic-list-item.hbs 경로 아래에 파일을 추가하고 해당 위치에 코드를 넣을 수 있습니다. 그러나 여기서 질문이 시작됩니다.
해당 템플릿의 컴포넌트에는 renderTopicListItem이라는 메서드가 있으며, 이 메서드는 기본적으로 렌더링되는 topicListItemContents 속성을 설정합니다. 확인해 보세요:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/topic-list-item.hbs
didReceiveAttrs() {
this._super(...arguments);
this.renderTopicListItem();
},
@observes("topic.pinned")
renderTopicListItem() {
const template = findRawTemplate("list/topic-list-item");
if (template) {
this.set("topicListItemContents", template(this).htmlSafe());
}
},
didInsertElement() {
this._super(...arguments);
if (this.includeUnreadIndicator) {
this.messageBus.subscribe(this.unreadIndicatorChannel, data => {
const nodeClassList = document.querySelector(
`.indicator-topic-${data.topic_id}`
첫 번째 질문은 왜인가요? 왜 그렇게 해야 하나요? 그냥 보통처럼 handlebars 코드를 사용하면 안 되나요?
코어 코드에 과도하게 개입하지 않기 위해, 저는 topic-list-item을 그대로 두는 대신 제 테마에서 topic-list-item.raw.hbs를 교체하기로 결정했고, 이는 문제없이 작동합니다.
그러나 제 테마에 javascripts/discourse/templates/mobile/list/topic-list-item.raw.hbs와 같은 파일을 추가하면 모바일 뷰가 교체될 것으로 기대했지만, 실제로는 그렇지 않습니다.
findRawTemplate 메서드는 여전히 discourse의 기본 모바일 템플릿을 반환하고 있으며, 그 안에는 다음 내용이 포함되어 있습니다:
로컬 Discourse 프로젝트 내에서 수동으로 편집해도 모바일 버전이 변경 사항으로 업데이트되지 않습니다.
설명이 합리적으로 들리기를 바라며, 이 부분에 대해 아는 분이 계신다면 도움을 주셨으면 합니다. 지금은 정말 깨진 것처럼 보이며, 실제로 깨진 것이라면 수정하고 싶습니다 (조금 더 파악되면 제가 할 수도 있습니다)
그동안 저는 스스로 답을 찾아가며 새로운 소식 업데이트를 하겠습니다. 아래는 제 로컬 환경에서 확인되는 작은 gif입니다.
http://g.recordit.co/AtOJlltJ8o
업데이트: 최근 커밋에서 파일이 변경되었기 때문에 raw를 .hbr로 업데이트하기도 했지만, 여전히 작동하지 않습니다.
방금 테스트해 봤는데 동일한 문제가 발생합니다… 해당 템플릿을 전혀 오버라이드할 수 없습니다. 지난 하루 이틀 사이에 발생한 것 같습니다. hbr로 전환한 것과 관련이 있을까요? @markvanlan
duranmla
2월 12, 2020, 4:03오후
3
제가 이 주제를 만들었을 당시, 제 로컬 Discourse 버전은 기억이 정확하지는 않지만 1월 17일경이었던 것 같습니다. 말씀드리자면, 해당 버전에서 이미 문제가 있었고, 최신 변경 사항으로 업데이트하고 raw.hbs를 hbr로 이름 변경한 후에도 여전히 동일한 문제가 발생하고 있습니다.
현재까지 제가 취한 조치는 javascripts/discourse/templates/components/topic-list-item.hbs 파일을 커스터마이징하는 것입니다. 하지만 이상적으로는 raw 템플릿도 다른 템플릿과 동일하게 동작해야 합니다 (대체 및 커스터마이징 측면에서) .
@awesomerobot hbr 변경 바로 이전 커밋을 체크아웃하면 작동하나요?
아, 그래, 날짜 알려줘서 고마워 @duranmla … @markvanlan 이거 좀 오래된 문제인데, 지금 추적 중이야
음, 커스터마이징을 되돌린 후 문제를 재현하려면 커스터마이징을 제거했다가 다시 적용해야 해서 문제를 추적하는 데 조금 애를 먹었습니다.
실제로는 @markvanlan 님의 hbr 커밋(DEV: Use .hbr for raw template file extension (#8883) · discourse/discourse@3e89774 · GitHub ) 때문인 것 같습니다. 이 부분에 대해 오락가락해서 죄송합니다.
테스트를 위해 관리자 패널의 커스터마이즈 섹션을 통해 현재 테마의 </head> 태그에 아래 코드를 추가했습니다:
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
test
</script>
해당 커밋 이전 버전에서는 정상적으로 작동하는데, 해당 커밋을 적용한 후 커스터마이징을 다시 적용하면 템플릿이 무시됩니다.
duranmla
2월 12, 2020, 5:49오후
8
아마도 내가 혼동한 건가 보다. 그보다 더 오래된 줄 알았거든.@awesomerobot
최신 코드를 가져오면 이제 수정된 상태입니다.
committed 06:45PM - 12 Feb 20 UTC
마크는 이 문제가 깨져 있음에도 불구하고 테스트가 통과한 이유를 파악하기 위해 추가 작업을 진행할 예정입니다.
duranmla
2월 13, 2020, 11:51오전
10
그럼에도 불구하고 업데이트를 진행했지만, 테마 프로젝트 구조로 작업할 때 *(중대형 프로젝트에서 가장 많이 사용되는 구조일 가능성이 높음)*에도 여전히 오류가 발생합니다. 오류를 시연하는 영상을 여기에 올리겠습니다: https://www.loom.com/share/d3f437347c8f4d5aa4dd1c7ce08e1bf9
참고: 문제가 무엇인지 이해하고 재현하는 데 도움이 될 수 있도록 영상을 잠시 유지하겠습니다. 몇 주 후에는 영상을 삭제해야 합니다.
참고: topic-list-item.hbr 대신 topic-list-item.raw.hbs로 이름을 다시 변경해 보았지만, 문제는 동일합니다.
저는 javascripts 디렉터리(구버전 또는 신규 확장자 모두)에서 잘 작동하고 있습니다.
어젯밤에 겪은 일이 하나 있는데, 파일을 편집한 후 저장하거나, 파일을 삭제했다가 다시 추가해야 할 수 있습니다(템플릿은 저장 시 컴파일되므로, 일시적으로 버그가 있는 상태에 머물러 있을 수 있습니다).
