# 특정 페이지에서만 템플릿 오버라이드

**URL:** https://meta.discourse.org/t/override-template-only-on-specific-page/132288
**Category:** Development
**Created:** [10월 30, 2019, 10:50오후 UTC](https://meta.discourse.org/t/override-template-only-on-specific-page/132288 "2019-10-30T22:50:00Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 31, 2019, 8:15오전 UTC](https://meta.discourse.org/t/override-template-only-on-specific-page/132288/2 "2019-10-31T08:15:02Z")

</div>

우선 이 부분을 명확히 하겠습니다.

> [@Antichrist](#):
>
> 테마의 사용자 정의 HTML/CSS에서 이것이 올바른 방법인지조차 확신이 서지 않습니다. (업데이트 시 변경 사항이 사라진다는 것은 알고 있습니다.)

이것은 잘못된 정보입니다. 테마 내에서 변경 사항을 수행한 경우 업데이트 시 변경 사항이 사라지지 않습니다. 변경 사항은 유지됩니다. 변경 사항이 사라지는 유일한 경우는 서버에서 파일을 직접 편집할 때이며, 당연히 이렇게 해서는 안 됩니다.

이제, 템플릿을 오버라이드하는 데에는 특정 수준의 리스크가 수반됩니다. 코어 업데이트로 인해 변경 사항이 더 이상 호환되지 않아 업데이트가 필요할 수 있기 때문입니다. 이러한 리스크를 감수할 수 있다면, 여기에서 요청하신 것을 기술적으로 달성할 수 있습니다.

시작하려면 사용자가 홈페이지에 있는지 구별하는 방법이 필요합니다. 카테고리 전용 컴포넌트の場合, searchContext를 확인하는 한 가지 방법이 있습니다. 하위 카테고리 페이지에 있을 때 검색 컨텍스트는 "category"로 설정됩니다. 검색 컨텍스트가 없다면 홈페이지에 있는 것입니다.

이를 템플릿에 전달하는 방법은 다음과 같은 코드를 추가하는 것입니다.

```javascript
<script type="text/discourse-plugin"
        version="0.8">
  const categoriesOnlyComponent = require('discourse/components/categories-only').default;
  categoriesOnlyComponent.reopen({
    isHomepage: function() {
      return !this.parentView.searchService.contextType
    }.property()
  });
</script>

```

이 코드는 `categories-only` 템플릿에서 `isHomepage`를 사용할 수 있게 해줍니다. 검색 컨텍스트가 없으면(즉, 홈페이지에 있으면) `true`를 반환하고, 그렇지 않으면 false를 반환합니다.

다음으로, 기본 템플릿을 다음과 같이 복사해야 합니다.

```markdown
<script type='text/x-handlebars'
        data-template-name='components/categories-only'>
  {{#if categories}}
  ... 템플릿의 나머지 부분
  {{/if}}
</script>

```

그리고 방금 추가한 `isHomepage`를 사용합니다. 이를 위해 handlebars의 `{{#if}}` 헬퍼를 사용해야 합니다. 기본적으로 필요한 것은 다음과 같은 것입니다.

```markdown
<script type='text/x-handlebars'
        data-template-name='components/categories-only'>
  {{#if categories}}
    {{#if isHomepage}}
      ... 홈페이지 전용 템플릿
    {{else}}
    ... 홈페이지가 아닌 경우 기본 템플릿의 나머지 부분
  {{/if}}
</script>

```

이제 `isHomepage` 섹션에서 원하는 것을 사용할 수 있습니다. 바로在那里 편집하거나, 다음과 같이 해당 섹션을 위한 새로운 템플릿을 만들 수도 있습니다.

```markdown
<script type='text/x-handlebars'
        data-template-name='components/categories-only-homepage'>
  <h1>홈페이지에 계십니다!</h1>
  <p>
    사용자가 홈페이지에 있을 때 카테고리 전용 컴포넌트 템플릿을 렌더링하는 데 이 섹션을 사용하세요.
  </p>
</script>

```

마지막으로 해야 할 일은 `categories-only` 템플릿의 `isHomepage` 섹션 내에서 해당 템플릿을 부분 템플릿(partial)으로 호출하는 것입니다.

```markdown
<script type='text/x-handlebars'
        data-template-name='components/categories-only'>
  {{#if categories}}
    {{#if isHomepage}}
      {{partial 'components/categories-only-homepage'}}
    {{else}}
    ... 홈페이지가 아닌 경우 기본 템플릿의 나머지 부분
  {{/if}}
</script>

```

그 결과, 홈페이지를 방문하면 다음과 같은 화면이 표시됩니다.

 ![homepage001](https://global.discourse-cdn.com/meta/original/3X/0/3/03b368ceb82e16bb2b4977e20148c370f1db2eeb.png)

하지만 하위 카테고리에서의 컴포넌트는 변경되지 않은 상태로 유지됩니다.

이것은 선택 사항이지만, 다음과 같은 링크를 확인하는 것도 도움이 될 수 있습니다.

> [@Split up theme Javascript into multiple files](https://meta.discourse.org/t/splitting-up-theme-javascript-into-multiple-files/119369):
>
> Complex theme javascript can be split into multiple files, to keep things nicely organised. To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited from the Discourse UI, so you must use the [Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) or [source the theme from git](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). Javascript files are treated exactly the same as they are in core/plugins, so you should follow the same file/folder structure. Theme files are loaded after core/plugins, so if the filenames match,…

이것은 테마를 작업하고 script 태그 사용을 피하기 위한 새로운 권장 방식이기 때문입니다.

---

_[View the full topic](https://meta.discourse.org/t/override-template-only-on-specific-page/132288)._