# 테마에 맞는 검색 아이콘 만들기

**URL:** https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929
**Category:** Support
**Created:** [8월 3, 2022, 4:21오전 UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929 "2022-08-03T04:21:04Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [8월 3, 2022, 7:46오전 UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/2 "2022-08-03T07:46:07Z")

</div>

안녕하세요,

제 이해가 맞다면 검색 페이지에 검색 아이콘을 추가하고 싶으신 것이죠 🔽

 ![Screenshot 2022-08-03 at 9.16.37](https://global.discourse-cdn.com/meta/original/4X/7/e/e/7ee2e8f8feeebac2d9f744411049ed97a13cb852.png) ![Screenshot 2022-08-03 at 10.22.31](https://global.discourse-cdn.com/meta/original/4X/7/8/0/78088e67d49b1e37dfcc6eda4a7b36f9d974aa82.png)

이 작업을 위해 Discourse 템플릿을 오버라이드해야 할 것 같습니다.  
방법은 다음과 같습니다: [Discourse 템플릿 오버라이드](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#overriding-discourse-templates-23) 하지만 전체 문서를 읽어보시는 것을 권장합니다.

* * *

이 경우 다음과 같이 보입니다. 먼저 검색 페이지 템플릿을 찾아야 합니다. 템플릿 목록은 여기 있습니다: [https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates)

우리가 찾는 템플릿은 `full-page-search.hbs`이며, 이 변경 사항을 위해 어떤 부분을 편집해야 하는지 명확히 볼 수 있습니다.

편집할 템플릿의 헤더 부분은 다음과 같습니다… 하지만 아직 조금 더 기다려야 합니다…

```xml
    <h1 class="search-page-heading">
      {{#if this.hasResults}}
        <div class="result-count" id="search-result-count" aria-live="polite">
          {{html-safe this.resultCountLabel}}
        </div>
      {{else}}
        {{i18n "search.full_page_title"}}
      {{/if}}
    </h1>

```

이제 위에서 언급한 문서에 따르면, 다음과 같이 시작해야 합니다:

템플릿은 **header** 섹션에 위치합니다.

```xml
<script type="text/x-handlebars" data-template-name="full-page-search">

</script>

```

그 다음 내부에 전체 템플릿을 복사해야 합니다:

> **다음과 같은 모습입니다**
>
> ```xml
> <script type="text/x-handlebars" data-template-name="full-page-search">
> <DSection @pageClass="search" @class="search-container">
> <ScrollTracker @name="full-page-search" @tag={{this.searchTerm}} @class="hidden" />
> <div class="search-header" role="search">
> <h1 class="search-page-heading">
> {{#if this.hasResults}}
> <div class="result-count" id="search-result-count" aria-live="polite">
> {{html-safe this.resultCountLabel}}
> </div>
> {{else}}
> {{i18n "search.full_page_title"}}
> {{/if}}
> </h1>
> <div class="search-bar">
> <SearchTextField @value={{this.searchTerm}} @class="full-page-search search no-blur search-query" @aria-label={{i18n "search.search_term_label"}} @enter={{action "search" (hash collapseFilters=true)}} @hasAutofocus={{this.hasAutofocus}} @aria-controls="search-result-count" />
> <ComboBox @id="search-type" @value={{this.search_type}} @content={{this.searchTypes}} @onChange={{action (mut this.search_type)}} @options={{hash
> castInteger=true
> }} />
> <DButton @action={{action "search" (hash collapseFilters=true)}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{this.searchButtonDisabled}} />
> </div>
> {{#if this.usingDefaultSearchType}}
> {{!-- context is only provided when searching from mobile view --}}
> {{#if this.context}}
> <div class="search-context">
> <label>
> <Input @type="checkbox" name="searchContext" @checked={{this.searchContextEnabled}} /> {{this.searchContextDescription}}
> </label>
> </div>
> {{/if}}
> 
> <div class="search-filters">
> <SearchAdvancedOptions @searchTerm={{readonly this.searchTerm}} @onChangeSearchTerm={{action (mut this.searchTerm)}} @search={{action "search" (hash collapseFilters=true)}} @searchButtonDisabled={{this.searchButtonDisabled}} @expandFilters={{this.expandFilters}} />
> </div>
> {{/if}}
> 
> <div class="search-notice">
> {{#if this.invalidSearch}}
> <div class="fps-invalid">
> {{i18n "search.too_short"}}
> </div>
> {{/if}}
> </div>
> 
> </div>
> 
> <div class="search-advanced">
> {{#if this.hasResults}}
> {{#if this.usingDefaultSearchType}}
> <div class={{this.searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
> {{#if this.canBulkSelect}}
> <DButton @icon="list" @class="btn-default bulk-select" @title="topics.bulk.toggle" @action={{action "toggleBulkSelect"}} />
> {{#if this.selected}}
> <DButton @class="btn-default bulk-select-btn" @selected={{this.selected}} @action={{action "showBulkActions"}} @icon="wrench" />
> {{/if}}
> {{/if}}
> 
> {{#if this.bulkSelectEnabled}}
> {{#if this.hasUnselectedResults}}
> <DButton @icon="check-square" @class="btn-default" @action={{action "selectAll"}} @label="search.select_all" />
> {{/if}}
> 
> {{#if this.hasSelection}}
> <DButton @icon="far-square" @class="btn-default" @action={{action "clearAll"}} @label="search.clear_all" />
> {{/if}}
> {{/if}}
> 
> <div class="sort-by inline-form">
> <label>
> {{i18n "search.sort_by"}}
> </label>
> <ComboBox @value={{this.sortOrder}} @content={{this.sortOrders}} @onChange={{action (mut this.sortOrder)}} @id="search-sort-by" @options={{hash
> castInteger=true
> }} />
> </div>
> </div>
> {{/if}}
> {{/if}}
> 
> <PluginOutlet @name="full-page-search-below-search-info" @tagName="span" @connectorTagName="div" @args={{hash search=this.searchTerm}} />
> 
> {{#if this.searching}}
> {{loading-spinner size="medium"}}
> {{else}}
> <div class="search-results" role="region">
> <LoadMore @selector=".fps-result" @action={{action "loadMore"}}>
> {{#if this.usingDefaultSearchType}}
> <SearchResultEntries @posts={{this.model.posts}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @selected={{this.selected}} @highlightQuery={{this.highlightQuery}} @searchLogId={{this.model.grouped_search_result.search_log_id}} />
> 
> <ConditionalLoadingSpinner @condition={{this.loading}}>
> {{#unless this.hasResults}}
> {{#if this.searchActive}}
> <h3>{{i18n "search.no_results"}}</h3>
> 
> {{#if this.model.grouped_search_result.error}}
> <div class="warning">
> {{this.model.grouped_search_result.error}}
> </div>
> {{/if}}
> 
> {{#if this.showSuggestion}}
> <div class="no-results-suggestion">
> {{i18n "search.cant_find"}}
> {{#if this.canCreateTopic}}
> <a href {{action "createTopic" this.searchTerm}}>{{i18n "search.start_new_topic"}}</a>
> {{#unless this.siteSettings.login_required}}
> {{i18n "search.or_search_google"}}
> {{/unless}}
> {{else}}
> {{i18n "search.search_google"}}
> {{/if}}
> </div>
> 
> <GoogleSearch @searchTerm={{this.searchTerm}} />
> {{/if}}
> {{/if}}
> {{/unless}}
> 
> {{#if this.hasResults}}
> <h3 class="search-footer">
> {{#if this.model.grouped_search_result.more_full_page_results}}
> {{#if this.isLastPage}}
> {{i18n "search.more_results"}}
> {{/if}}
> {{else}}
> {{i18n "search.no_more_results"}}
> {{/if}}
> </h3>
> {{/if}}
> </ConditionalLoadingSpinner>
> {{else}}
> <ConditionalLoadingSpinner @condition={{this.loading}}>
> {{#if this.hasResults}}
> {{#if this.model.categories.length}}
> <h4 class="category-heading">
> {{i18n "search.categories"}}
> </h4>
> <div class="category-items">
> {{#each this.model.categories as |category|}}
> {{category-link category extraClasses="fps-category-item"}}
> {{/each}}
> </div>
> {{/if}}
> 
> {{#if this.model.tags.length}}
> <h4 class="tag-heading">
> {{i18n "search.tags"}}
> </h4>
> 
> <div class="tag-items">
> {{#each this.model.tags as |tag|}}
> <div class="fps-tag-item">
> <a href={{tag.url}}>
> {{tag.id}}
> </a>
> </div>
> {{/each}}
> </div>
> {{/if}}
> 
> {{#if this.model.users}}
> <div class="user-items">
> {{#each this.model.users as |user|}}
> <UserLink @user={{user}} @class="fps-user-item">
> {{avatar user imageSize="large"}}
> 
> <div class="user-titles">
> {{#if user.name}}
> <span class="name">
> {{user.name}}
> </span>
> {{/if}}
> 
> <span class="username">
> {{user.username}}
> </span>
> </div>
> </UserLink>
> {{/each}}
> </div>
> {{/if}}
> {{else}}
> {{#if this.searchActive}}
> <h3>{{i18n "search.no_results"}}</h3>
> {{/if}}
> {{/if}}
> </ConditionalLoadingSpinner>
> {{/if}}
> </LoadMore>
> </div>
> {{/if}}
> </div>
> </DSection>
> </script>
> 
> ```

* * *

이제 이전에 언급했던 헤더 부분을 편집할 수 있습니다. 이 경우 변경 사항은 정말로 간단하지만 더 복잡한 변경 사항도 가능합니다. 커스텀 템플릿이 항상 최신 상태인지 확인하십시오. 코어 템플릿에 변경 사항이 있으면 모든 것이 정상적으로 작동하도록 커스텀 템플릿도 업데이트해야 합니다. 🙂

이 경우 우리는 전체 페이지 제목과 결과 수 앞에 아이콘 `{{d-icon "search"}}`만 추가하면 됩니다.

전체 템플릿은 다음과 같습니다 🔽

```xml
<script type="text/x-handlebars" data-template-name="full-page-search">
  <DSection @pageClass="search" @class="search-container">
    <ScrollTracker @name="full-page-search" @tag={{this.searchTerm}} @class="hidden" />
    <div class="search-header" role="search">
      <h1 class="search-page-heading">
        {{#if this.hasResults}}
          <div class="result-count" id="search-result-count" aria-live="polite">
            {{d-icon "search"}}
            {{html-safe this.resultCountLabel}}
          </div>
        {{else}}
          {{d-icon "search"}}
          {{i18n "search.full_page_title"}}
        {{/if}}
      </h1>
      <div class="search-bar">
        <SearchTextField @value={{this.searchTerm}} @class="full-page-search search no-blur search-query" @aria-label={{i18n "search.search_term_label"}} @enter={{action "search" (hash collapseFilters=true)}} @hasAutofocus={{this.hasAutofocus}} @aria-controls="search-result-count" />
        <ComboBox @id="search-type" @value={{this.search_type}} @content={{this.searchTypes}} @onChange={{action (mut this.search_type)}} @options={{hash
            castInteger=true
          }} />
        <DButton @action={{action "search" (hash collapseFilters=true)}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{this.searchButtonDisabled}} />
      </div>
      {{#if this.usingDefaultSearchType}}
        {{!-- context is only provided when searching from mobile view --}}
        {{#if this.context}}
          <div class="search-context">
            <label>
              <Input @type="checkbox" name="searchContext" @checked={{this.searchContextEnabled}} /> {{this.searchContextDescription}}
            </label>
          </div>
        {{/if}}

        <div class="search-filters">
          <SearchAdvancedOptions @searchTerm={{readonly this.searchTerm}} @onChangeSearchTerm={{action (mut this.searchTerm)}} @search={{action "search" (hash collapseFilters=true)}} @searchButtonDisabled={{this.searchButtonDisabled}} @expandFilters={{this.expandFilters}} />
        </div>
      {{/if}}

      <div class="search-notice">
        {{#if this.invalidSearch}}
          <div class="fps-invalid">
            {{i18n "search.too_short"}}
          </div>
        {{/if}}
      </div>

    </div>

    <div class="search-advanced">
      {{#if this.hasResults}}
        {{#if this.usingDefaultSearchType}}
          <div class={{this.searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
            {{#if this.canBulkSelect}}
              <DButton @icon="list" @class="btn-default bulk-select" @title="topics.bulk.toggle" @action={{action "toggleBulkSelect"}} />
              {{#if this.selected}}
                <DButton @class="btn-default bulk-select-btn" @selected={{this.selected}} @action={{action "showBulkActions"}} @icon="wrench" />
              {{/if}}
            {{/if}}

            {{#if this.bulkSelectEnabled}}
              {{#if this.hasUnselectedResults}}
                <DButton @icon="check-square" @class="btn-default" @action={{action "selectAll"}} @label="search.select_all" />
              {{/if}}

              {{#if this.hasSelection}}
                <DButton @icon="far-square" @class="btn-default" @action={{action "clearAll"}} @label="search.clear_all" />
              {{/if}}
            {{/if}}

            <div class="sort-by inline-form">
              <label>
                {{i18n "search.sort_by"}}
              </label>
              <ComboBox @value={{this.sortOrder}} @content={{this.sortOrders}} @onChange={{action (mut this.sortOrder)}} @id="search-sort-by" @options={{hash
                  castInteger=true
                }} />
            </div>
          </div>
        {{/if}}
      {{/if}}

      <PluginOutlet @name="full-page-search-below-search-info" @tagName="span" @connectorTagName="div" @args={{hash search=this.searchTerm}} />

      {{#if this.searching}}
        {{loading-spinner size="medium"}}
      {{else}}
        <div class="search-results" role="region">
          <LoadMore @selector=".fps-result" @action={{action "loadMore"}}>
            {{#if this.usingDefaultSearchType}}
              <SearchResultEntries @posts={{this.model.posts}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @selected={{this.selected}} @highlightQuery={{this.highlightQuery}} @searchLogId={{this.model.grouped_search_result.search_log_id}} />

              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#unless this.hasResults}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>

                    {{#if this.model.grouped_search_result.error}}
                      <div class="warning">
                        {{this.model.grouped_search_result.error}}
                      </div>
                    {{/if}}

                    {{#if this.showSuggestion}}
                      <div class="no-results-suggestion">
                        {{i18n "search.cant_find"}}
                        {{#if this.canCreateTopic}}
                          <a href {{action "createTopic" this.searchTerm}}>{{i18n "search.start_new_topic"}}</a>
                          {{#unless this.siteSettings.login_required}}
                            {{i18n "search.or_search_google"}}
                          {{/unless}}
                        {{else}}
                          {{i18n "search.search_google"}}
                        {{/if}}
                      </div>

                      <GoogleSearch @searchTerm={{this.searchTerm}} />
                    {{/if}}
                  {{/if}}
                {{/unless}}

                {{#if this.hasResults}}
                  <h3 class="search-footer">
                    {{#if this.model.grouped_search_result.more_full_page_results}}
                      {{#if this.isLastPage}}
                        {{i18n "search.more_results"}}
                      {{/if}}
                    {{else}}
                      {{i18n "search.no_more_results"}}
                    {{/if}}
                  </h3>
                {{/if}}
              </ConditionalLoadingSpinner>
            {{else}}
              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#if this.hasResults}}
                  {{#if this.model.categories.length}}
                    <h4 class="category-heading">
                      {{i18n "search.categories"}}
                    </h4>
                    <div class="category-items">
                      {{#each this.model.categories as |category|}}
                        {{category-link category extraClasses="fps-category-item"}}
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.tags.length}}
                    <h4 class="tag-heading">
                      {{i18n "search.tags"}}
                    </h4>

                    <div class="tag-items">
                      {{#each this.model.tags as |tag|}}
                        <div class="fps-tag-item">
                          <a href={{tag.url}}>
                            {{tag.id}}
                          </a>
                        </div>
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.users}}
                    <div class="user-items">
                      {{#each this.model.users as |user|}}
                        <UserLink @user={{user}} @class="fps-user-item">
                          {{avatar user imageSize="large"}}

                          <div class="user-titles">
                            {{#if user.name}}
                              <span class="name">
                                {{user.name}}
                              </span>
                            {{/if}}

                            <span class="username">
                              {{user.username}}
                            </span>
                          </div>
                        </UserLink>
                      {{/each}}
                    </div>
                  {{/if}}
                {{else}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>
                  {{/if}}
                {{/if}}
              </ConditionalLoadingSpinner>
            {{/if}}
          </LoadMore>
        </div>
      {{/if}}
    </div>
  </DSection>
</script>

```

도움이 되길 바랍니다 🙂

---

_[View the full topic](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929)._