# 기본 템플릿에 사용자 지정 변경 사항 적용하기

**URL:** <https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004>\
**Category:** Development\
**Created:** [7월 27, 2023, 4:33오전 UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004 "2023-07-27T04:33:03Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![boltronics](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/boltronics/32/122375_2.png) [@boltronics](https://meta.discourse.org/u/boltronics)\
**Post date:** [7월 27, 2023, 4:33오전 UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/1 "2023-07-27T04:33:03Z")

</div>

현재 주제 목록 페이지에서는 각 주제의 주요 참여자들의 아바타와 해당 사용자의 프로필 페이지로 연결되는 링크가 표시됩니다. 아래에서 확인할 수 있습니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/d/21d165c9386f5a16cba282deeebf8f9ed7cf0413.png)  
사용자가 로그인되어 있지 않은 경우, 로그인 페이지로 리다이렉트되므로 이 링크는 클릭할 수 없습니다.

문제는 SEO 컨설턴트가 이것이 우리에게 문제가 된다고 판단하여, Google에서 해당 프로필 페이지 링크가 전혀 보이지 않도록 하기를 원한다는 점입니다.

주제 게시물 등에도 비슷한 문제가 있지만, 이 경우 모두 위젯 내부에 있었으며 `api.reopenWidge()` 등을 사용하여 비교적 쉽게 해결했습니다.

주제 목록 페이지는 다릅니다. 여기서는 [raw-templates/list/posters-column.hbr](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/raw-templates/list/posters-column.hbr)의 내용을 변경해야 합니다!

이제 제가 시도해 본 것들을 설명하겠습니다. 이미 답을 알고 계신다면 끝부분으로 건너뛰셔도 좋습니다.

처음에는 [입문자 가이드](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648/1)의 지시에 따라 위젯을 마운트해 보았습니다.

```plaintext
<script type="text/x-handlebars" data-template-name="list/posters-column">
    <td class='posters topic-list-data'>
        {{#each posters as |poster|}}
            {{#if poster.moreCount}}
                <a class="posters-more-count">{{poster.moreCount}}</a>
            {{else}}
              {{mount-widget widget="custom-list-avatar"}}
            {{/if}}
        {{/each}}
    </td>
</script>

```

이것은 아무런 효과가 없었습니다. 결국 `data-template-name` 값에 `.raw` 확장자를 사용하는 테마를 발견했는데, 가이드가 단순히 구식이 된 것 같았습니다. _raw_ 템플릿에 대한 언급이 없었기 때문입니다. `.raw`를 사용하면 위의 변경 사항이 렌더링되지만, 제 사용자 정의 위젯은 로드되지 않았습니다.

이것은 이상합니다. `list/posters-column`은 `topic-list-item.hbr`에 의해만 참조되며, 이 또한 raw 템플릿이고 그 가이드에서 사용된 템플릿 중 하나이기 때문입니다. 하지만… 역시 구식이 된 것일까요? 결국 어딘가에서 raw 템플릿에서는 위젯을 마운트할 수 없다는 것을 읽었습니다. 따라서 이것이 작동할 수 없었던 것 같습니다.

다음으로, 부분 템플릿(partials)을 발견하고 사용해 보았습니다. 해당 부분이 raw 템플릿이 아니므로 더 잘 작동할 것 같았습니다.

```plaintext
<script type="text/x-handlebars" data-template-name="components/custom-avatar">
    <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
</script>

<script type="text/x-handlebars" data-template-name="list/posters-column.raw">
    <td class='posters topic-list-data'>
        {{#each posters as |poster|}}
            {{#if poster.moreCount}}
                <a class="posters-more-count">{{poster.moreCount}}</a>
            {{else}}
                {{partial 'components/custom-avatar'}}
            {{/if}}
        {{/each}}
    </td>
</script>

```

불행히도 raw 템플릿에서는 부분 템플릿도 사용할 수 없는 것 같아, 이 접근 방식도 실패했습니다.

그런 다음, 제가 필요로 하는 정보가 있을 것 같은 [이](https://meta.discourse.org/t/override-template-only-on-specific-page/132288) 스레드를 발견했습니다. 그 접근 방식과 `list/topic-list-item`(이것이 `list/posters-column`을 호출함)이 [topic-list-item](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list-item.js) 컴포넌트에서 사용된다는 점을 알고, 다음과 같은 코드를 작성했습니다:

```plaintext
<script type="text/x-handlebars" data-template-name="list/posters-column.raw">
    <td class='posters topic-list-data'>
        {{#each posters as |poster|}}
            {{#if poster.moreCount}}
                <a class="posters-more-count">{{poster.moreCount}}</a>
            {{else}}
                {{#if hideFromAnonUser}}
                    <div data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</div>
                {{else}}
                    <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
                {{/if}}
            {{/if}}
        {{/each}}
    </td>
</script>

<script type="text/discourse-plugin" version="1.1.0">
    const settings = Discourse.SiteSettings;
    const user = api.getCurrentUser();
    const hideFromAnonUser = settings.hide_user_profiles_from_public && !user;
    const topicListItemComponent = require('discourse/components/topic-list-item').default;
    topicListItemComponent.reopen({
        hideFromAnonUser: function() {
            return hideFromAnonUser
        }.property()
    });
</script>

```

불행히도 `hideFromAnonUser`는 raw 템플릿에서 결코 보이지 않는 것 같습니다. 아마 `hideFromAnonUser` 키에 할당된 함수 내부에서 계산해야 하는 걸까요? 그렇지 않은 것 같습니다. 처음 세 줄의 `const` 할당을 주석 처리하고 단순히 `False`를 반환하도록 설정하거나, return 문 앞에 `console.log()` 호출을 추가해도, 그 함수가 아무것도 의해 실행되지 않는 것을 볼 수 있습니다.

이 시점에서 저는 막막합니다. 이 기술들을 이전에 사용해 본 적이 없어서, 제 능력 이상인 것 같습니다. 무언가를 놓쳤을 수도 있지만, 많은 정보가 오도하거나 구식이거나, 제가 잘못된 곳을 보고 있거나, 아니면 단순히 무언가를 오해하고 있는 것 같습니다.

주제 목록 페이지에서 아바타의 `<a></a>` 태그를 `<div></div>` 태그로 대체하는 방법은 무엇인가요? 감사합니다.

---

_[View the full topic](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004)._