# Add localizable strings to themes and theme components
**URL:** https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867
**Category:** Developer Guides
**Tags:** how-to, theme-guides
**Created:** [2월 22, 2019, 10:21오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867 "2019-02-22T22:21:45Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2월 22, 2019, 10:21오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/1 "2019-02-22T22:21:45Z")
For those looking to add custom languages and translations to a Discourse theme or theme component, they [can now include](https://github.com/discourse/discourse/commit/880311dd4d2b367e54cc8244fba60fce69e121c3) localised strings, which are made available for use in UI components. Translations are stored in the same format as core/plugin translations, and can be used in almost the same way.
Themes can supply translation files in a format like `/locales/{locale}.yml`. These files should be valid YAML, with a single top level key equal to the locale being defined. These can be defined using the `discourse_theme` CLI, importing a `.tar.gz`, installing from a GIT repository, or via the editor on [theme-creator.discourse.org](http://theme-creator.discourse.org).
An example locale file might look like
```yaml
en:
theme_metadata:
description: "This is a description for my theme"
settings:
theme_setting_name: "This is a description for the setting `theme_setting_name`"
another_theme_setting_name:
description: "This is a description for the setting `another_theme_setting_name`"
sidebar:
welcome: "Welcome"
back: "back,"
welcome_subhead: "We're glad you're here!"
likes_header: "Share the Love"
badges_header: "Your Top Badges"
full_profile: "View your full profile"
```
Administrators can override individual keys on a per-theme basis in the /admin/customize/themes user interface. Fallback is handled in the same way as core, so it is ok to have incomplete translations for non-english languages will make use of the english keys.
In the background, these translations are stored alongside the core translations, under a theme-specific namespace. For example:
```plaintext
theme_translation.{theme_id}.sidebar.welcome
```
You should never hardcode the theme\_id in your theme code. To dynamically build the translation key, use the `themePrefix` helper:
```gjs
import { i18n } from "discourse-i18n";
import { themePrefix } from "virtual:theme";
// In JS code:
const result = i18n(themePrefix("my_translation_key"));
console.log("From Javascript", result);
// In a template tag:
{{i18n (themePrefix "blah")}}
```
For a complete example of using translations in a theme, check out @awesomerobot’s Fakebook theme: [GitHub - discourse/Fakebook · GitHub](https://github.com/awesomerobot/Fakebook)
* * *
This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/14-localizable-strings.md).
---
### Author:  [@evantill](https://meta.discourse.org/u/evantill)
#### Post date: [3월 18, 2020, 11:37오전 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/2 "2020-03-18T11:37:34Z")
CSS에서 테마 번역을 사용하는 방법은 무엇인가요? 테마 매개변수는 사용할 수 있다는 것을 알고 있지만, 테마 번역이 필요합니다.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [3월 18, 2020, 11:41오전 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/3 "2020-03-18T11:41:55Z")
그렇게 할 수 없어요. 해당 기능은 템플릿과 JavaScript에서만 사용할 수 있습니다. 이는 코어/플러그인 번역과 동일한 원리입니다.
이상적으로는 문자열이 템플릿에서 설정되도록 리팩토링하는 것이 좋습니다. 하지만 CSS 파일에서 사용자 정의 가능한 문자열이 정말 필요하다면 테마 설정을 사용할 수 있습니다: [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-d)
---
### Author:  [@evantill](https://meta.discourse.org/u/evantill)
#### Post date: [3월 18, 2020, 11:47오전 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/4 "2020-03-18T11:47:11Z")
그리고 테마 설정을 사용하는 경우, 번역이 가능한가요?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [3월 18, 2020, 11:48오전 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/5 "2020-03-18T11:48:26Z")
아니요, 여러 언어로 번역하는 것은 아니지만, 관리자가 자신의 사이트에 맞게 사용자 정의할 수 있도록 해 줄 것입니다.
---
### Author:  [@Mikhail\_Tyuftyaev](https://meta.discourse.org/u/Mikhail_Tyuftyaev)
#### Post date: [4월 23, 2021, 8:27오전 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/6 "2021-04-23T08:27:13Z")
안녕하세요, 여러분.
저는 템플릿 [upload-selector.hbs](https://github.com/discourse/discourse/blob/dc6b547ed89f652b5406489d76140b76cf8e0d1d/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs)를 재정의하고 있습니다.
번역 가능한 문구를 추가하려고 합니다.
새로운 변수 `upload_selector.upload_images`를 생성했습니다.
예를 들어
다음으로 무엇을 해야 하는지 알려 주실 수 있을까요?
---
### Author:  [@Theudebart](https://meta.discourse.org/u/Theudebart)
#### Post date: [9월 12, 2021, 1:19오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/7 "2021-09-12T13:19:31Z")
안녕하세요,
discourse 테마 제작자([여기](https://theme-creator.discourse.org/?preview_theme_id=5390))에서 이 기법을 사용해 보니 이 게시물에 설명된 대로 모든 것이 정상적으로 작동합니다.
그러나 동일한 테마를 제 서버에 가져오면 "[en.theme\_translations.12.blog]"만 표시됩니다. 또한 테마 설정 페이지에도 테마 제작자와 달리 “테마 번역” 섹션이 없습니다.
이 오류를 어디서 찾아야 할지 정말 모르겠습니다. 혹시 힌트를 주실 수 있는 분이 계신가요?
[편집]
저는 docker 환경에서 discourse 2.6.7([f73cdbbd2f])을 사용하고 있습니다.
---
### Author:  [@IAmGav](https://meta.discourse.org/u/IAmGav)
#### Post date: [9월 12, 2021, 1:32오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/8 "2021-09-12T13:32:24Z")
> [@Theudebart](#):
>
> Docker 환경에서 discourse 2.6.7( [f73cdbbd2f] )을 사용 중입니다.
discourse를 업데이트할 수 있나요?
구버전을 사용하고 있습니다.
---
### Author:  [@Theudebart](https://meta.discourse.org/u/Theudebart)
#### Post date: [9월 12, 2021, 1:52오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/9 "2021-09-12T13:52:05Z")
> [@IAmGav](#):
>
> discourse를 업데이트할 수 있나요?
>
> 구버전을 사용 중입니다.
네, 저도 시도하고 있습니다. 이건 제가 도움이 필요한 또 다른 부분이지만, 여기에 게시하고 싶지 않아요. 이건 다른 주제니까요.
어쨌든 번역 기능은 2.2.0.beta9 버전부터 포함되었으므로 문제가 되지 않을 것이라 생각했습니다. [커밋](https://github.com/discourse/discourse/commit/880311dd4d2b367e54cc8244fba60fce69e121c3)을 참고해 주세요.
---
### Author:  [@Jerome\_Hordies](https://meta.discourse.org/u/Jerome_Hordies)
#### Post date: [7월 16, 2022, 1:25오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/10 "2022-07-16T13:25:25Z")
안녕하세요, 초보자의 질문을 해서 미리 죄송합니다.
HTML과 CSS만으로 헤더를 만들었습니다.
```plaintext
```
그리고 "Download"라는 단어를 번역하려고 합니다.
영어 번역 파일을 만들었습니다.
```plaintext
en:
top-navbar:
download: "Yeah"
```
그 다음 페이스북 예시처럼 HTML 코드를 변경했습니다.
```plaintext
```
이렇게 하면 "Yeah"로 번역되고 출력되지만 레이아웃이 깨집니다. 아마도 "/connectors/discovery-below/sidebar"를 사용하고 있기 때문인 것 같습니다. 저는 템플릿을 건드리지 않고 번역만 적용하고 싶은데, 인라인으로 번역을 적용하는 방법을 이해하지 못하겠습니다.
테마의 사용자 정의 HTML에서 번역을 사용하는 간단한 예를 제공해 주시겠어요?
감사합니다!
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [7월 16, 2022, 2:32오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/11 "2022-07-16T14:32:26Z")
안녕하세요,
문제는 `data-template-name`이 고유한 이름이어야 한다는 점입니다. [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#modifying-discourse-templates-22). 다음과 같이 사용해야 합니다: `data-template-name="/connectors/PLUGIN-OUTLET-NAME/UNIQUE-NAME"` 현재 예시에서는 `sidebar` 이름을 사용하고 있는데, 이는 Fakebook 사이드바 템플릿을 오버라이드하는 것으로 보입니다.
예를 들어 이렇게 하면 작동할 것입니다 🙂
```xml
```
---
### Author:  [@Jerome\_Hordies](https://meta.discourse.org/u/Jerome_Hordies)
#### Post date: [7월 16, 2022, 10:17오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/12 "2022-07-16T22:17:36Z")
@Don 감사합니다.
그 플러그인이 설치되어 있지 않다는 점, 그리고 data-template-name을 무작위로 생성된 고유한 UNIQUE-NAME으로 변경해 보았지만 결과가 동일하거나, PLUGIN-OUTLET-NAME을 임의로 지어 넣으면 배너가 아예 표시되지 않는다는 점을 언급하지 못했습니다.
지금쯤 아시겠지만, 저는 handlebars/ember에 전혀 익숙하지 않습니다. 🙂
제 이해를 따르면, HTML 내에서 미리 지정된 위치를 가진 템플릿을 커스터마이징하고 있는데, 그 결과 커스텀 HTML이 더 이상 /html/body/section main 아래에 있지 않고 훨씬 깊은 곳에 위치하게 되어 이전에 없던 CSS 상속 문제가 발생하고 있습니다.
번역을 사용하려고 하는데 왜 템플릿을 커스터마이징해야 하는지 이해하기 어렵습니다.
[Ember inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)를 사용하여 [여기](https://meta.discourse.org/t/best-strategy-for-finding-the-right-template-to-edit/153598/2)에서 조언받은 대로 커스터마이징할 템플릿을 식별하는 데는 성공했습니다.
그리고 plugin-outlet에 대한 답변과 링크 덕분에 data-template-name="/connectors/above-site-header/my-navbar"라는 올바른 값을 찾았습니다.
다시 한번 도움 주셔서 감사합니다.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [7월 16, 2022, 11:20오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/13 "2022-07-16T23:20:47Z")
아, 그렇군요… [Fakebook 테마](https://meta.discourse.org/t/fakebook-a-theme-for-social-media-lovers/109079)를 사용 중이라고 생각하고, 사이드바 섹션 아래에 코드를 배치하려는 거라고 생각했어요. 🙂
플러그인 아웃렛의 위치를 시각적으로 확인하는 좋은 방법은 [Plugin Outlet Locations](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673) 테마 컴포넌트를 사용하는 것입니다.
---
### Author:  [@Jerome\_Hordies](https://meta.discourse.org/u/Jerome_Hordies)
#### Post date: [7월 19, 2022, 1:15오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/14 "2022-07-19T13:15:33Z")
안녕하세요 @Don,
저는 다음 이유 때문에 그 facebook 예시를 사용했습니다:
> [@david](#):
>
> 테마에서 번역을 사용하는 완전한 예시를 확인하려면 @awesomerobot의 Fakebook 테마를 확인해 보세요: [GitHub - discourse/Fakebook](https://github.com/awesomerobot/Fakebook)
다시 한번 감사합니다!
---
### Author:  [@misham](https://meta.discourse.org/u/misham)
#### Post date: [12월 14, 2022, 1:10오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/15 "2022-12-14T13:10:35Z")
단수와 복수는 어떻게 처리하나요? {{theme-i18n}}을 사용하여 단수형과 복수형이 다른 텍스트를 번역하는 방법은 무엇인가요? 예를 들어 "Result"와 “Results” 같은 경우 말입니다.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [12월 15, 2022, 10:45오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/16 "2022-12-15T22:45:47Z")
Discourse 소스에서 이렇게 처리하는 예시가 몇 가지 있습니다. 보통 두 개의 문자열을 가지고 정수 값에 따라 전환하는 방식으로 구현합니다.
테마에서도 이 방식이 작동해야 하며, 일반적으로 JS 코드는 다음과 같은 형태가 됩니다:
```js
I18n.t(themePrefix("confirm_remove_tags"), {
count: exampleCountValue,
});
```
---
### Author:  [@misham](https://meta.discourse.org/u/misham)
#### Post date: [12월 19, 2022, 12:42오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/18 "2022-12-19T12:42:41Z")
그렇다면 hbs는 어떻게 되나요? hbs 템플릿으로 구현할 수 있을까요?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [12월 19, 2022, 12:43오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/19 "2022-12-19T12:43:28Z")
네, 가능합니다:
```handlebars
{{theme-i18n "confirm_remove_tags" count=this.exampleCountValue}}
```
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [6월 18, 2024, 5:18오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/20 "2024-06-18T17:18:07Z")
> [@Discourse](#):
>
> ``
테마(Theme)의 .gjs 컴포넌트 템플릿에서 이렇게 하면 다음 오류가 발생합니다:
`Error: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-prefix`
그래서 이를 import하려고 합니다:
`import themePrefix from "discourse/helpers/theme-prefix";`
하지만 다음과 같은 오류가 나요:
`Identifier 'themePrefix' has already been declared`
(허브(hub)에서 예제를 찾아봤는데, 그런 예제가 있는 것 같지 않아요)
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [6월 18, 2024, 7:05오후 UTC](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867/21 "2024-06-18T19:05:17Z")
업데이트: `{{i18n (themePrefix "`을(를) 사용해야 합니다
[Next page](https://meta.discourse.org/t/add-localizable-strings-to-themes-and-theme-components/109867.md?page=2)