# 어떤 HTML을 커스터마이징할 수 있나요?

**URL:** https://meta.discourse.org/t/what-html-can-you-customize/149176
**Category:** Development
**Created:** [4월 24, 2020, 4:50오후 UTC](https://meta.discourse.org/t/what-html-can-you-customize/149176 "2020-04-24T16:50:26Z")
**Posts on this page:** 1
**Showing post:** 7

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [4월 24, 2020, 5:20오후 UTC](https://meta.discourse.org/t/what-html-can-you-customize/149176/7 "2020-04-24T17:20:35Z")

</div>

> [@JQ331](#):
>
> 간단한 예시가 있을까요?

simon이 붙여넣은 링크를 부분적으로 인용합니다:

큰 빨간색 사각형으로 아웃렛을 채우는 간단한 예시입니다. 여기서 아웃렛은 토픽 보기에서 게시물 목록 위에 위치합니다:

```html
<script type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name">
  <div style="height: 200px; width: 200px;background: red"></div>
</script>

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/5/0521fb4eead7632e80dfa2c629cfc93ca5e03fc6.png)

`data-template-name` 속성을 주목해 주세요.

내비게이션 바 템플릿을 오버라이드하는 간단한 예시:

```html
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
    {{#each navItems as |navItem|}}
      {{navigation-item content=navItem filterMode=filterMode category=category}}
    {{/each}}
    <div style="background: red; padding: 10px; float: left;">I added this block in the navigation bar template</div>
    {{custom-html name="extraNavItem" tagName="li"}}
    {{!- this is done to avoid DIV in the UL, originally {{plugin-outlet name="extra-nav-item"}}
    {{#each connectors as |c|}}
      {{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
    {{/each}}
</script>

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/1/31f4f0324d42aca4165d5f3e63a5e482282b098d.png)

다시 한번, `data-template-name` 속성을 주목해 주세요.

템플릿 목록은 여기 있습니다: [https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates](https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates)

그리고 모든 아웃렛 위치를 강조하는 유용한 테마 컴포넌트입니다: [(deprecated) Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673)

---

_[View the full topic](https://meta.discourse.org/t/what-html-can-you-customize/149176)._