목에 담이와서 너무 힘들어요
- 경원튜터님 피드백 : 기존 각각의 템플릿과 API 추가 작성해야되는 기능말고, 장고의 기능을 이용하여 템플릿을 번역하는 기능 (장고 공식문서 참고)
- 장고 DB에 메뉴별 저장
- 장고 설정 파일 수정
-
# settings.py # 이 설정을 추가 또는 수정합니다. LANGUAGE_CODE = 'en-us' # 기본 언어 설정 USE_I18N = True # 국제화 기능 사용 여부 USE_L10N = True # 지역화 기능 사용 여부 USE_TZ = True # 시간대 사용 여부 # 번역을 지원할 언어를 설정합니다. LANGUAGES = [ ('en', 'English'), ('ko', 'Korean'), # 필요한 다른 언어를 추가합니다. ] # 번역 파일을 저장할 경로를 설정합니다. LOCALE_PATHS = [ BASE_DIR / 'locale', ]
- 템플릿 파일에 번역 태그 추가
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
- 번역 문자열 추출
-
# 생성된 .po 파일을 열어 각 문자열을 번역합니다. python manage.py makemessages -l ko
- 번역 적용
-
python manage.py compilemessages
- 언어 설정
-
# views.py from django.utils import translation from django.http import HttpResponse def set_language(request): user_language = 'ko' translation.activate(user_language) response = HttpResponse("Language set to Korean") response.set_cookie(settings.LANGUAGE_COOKIE_NAME, user_language) return response
- settings.py
-
# settings.py MIDDLEWARE = [ # 기존 미들웨어 설정 'django.middleware.locale.LocaleMiddleware', # 기타 미들웨어 ]
- URL 설정
-
# urls.py from django.conf.urls.i18n import i18n_patterns from django.urls import path from . import views urlpatterns = [ # 기본 URL 패턴 ] urlpatterns += i18n_patterns( path('set-language/', views.set_language, name='set_language'), # 기타 URL 패턴 )
→ 위에 있는 건 기본 설정 코드
- en
-
# SOME DESCRIPTIVE TITLE. # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER # This file is distributed under the same license as the PACKAGE package. # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR. # #, fuzzy msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\\n" "Report-Msgid-Bugs-To: \\n" "POT-Creation-Date: 2024-05-30 16:13+0900\\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n" "Language-Team: LANGUAGE <LL@li.org>\\n" "Language: \\n" "MIME-Version: 1.0\\n" "Content-Type: text/plain; charset=UTF-8\\n" "Content-Transfer-Encoding: 8bit\\n" "Plural-Forms: nplurals=2; plural=(n != 1);\\n" #: .\\orders\\templates\\orders\\menu.html:349 msgid "선택한 상품" msgstr "Selected Items" #: .\\orders\\templates\\orders\\menu.html:352 #: .\\orders\\templates\\orders\\menu.html:420 msgid "음성입력" msgstr "Voice Input" #: .\\orders\\templates\\orders\\menu.html:368 msgid "총 금액" msgstr "Total Amount" #: .\\orders\\templates\\orders\\menu.html:368 #: .\\orders\\templates\\orders\\menu.html:421 msgid "원" msgstr "Won" # "Won" is the currency of South Korea #: .\\orders\\templates\\orders\\menu.html:371 msgid "전체삭제" msgstr "Delete All" #: .\\orders\\templates\\orders\\menu.html:372 msgid "결제하기" msgstr "Make Payment" #: .\\orders\\templates\\orders\\menu.html:379 msgid "AI기능이 필요하시면 음성입력을 눌러주세요." msgstr "Press voice input if AI functionality is required." #: .\\orders\\templates\\orders\\menu.html:417 msgid "input" msgstr "en-US" #: .\\orders\\templates\\orders\\menu.html:418 msgid "output" msgstr "en-US" #: .\\orders\\templates\\orders\\menu.html:419 msgid "음성입력중" msgstr "Inputting voice"
- ja
-
# SOME DESCRIPTIVE TITLE. # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER # This file is distributed under the same license as the PACKAGE package. # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR. # #, fuzzy msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\\n" "Report-Msgid-Bugs-To: \\n" "POT-Creation-Date: 2024-05-30 16:09+0900\\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n" "Language-Team: LANGUAGE <LL@li.org>\\n" "Language: \\n" "MIME-Version: 1.0\\n" "Content-Type: text/plain; charset=UTF-8\\n" "Content-Transfer-Encoding: 8bit\\n" "Plural-Forms: nplurals=1; plural=0;\\n" #: .\\orders\\templates\\orders\\menu.html:349 msgid "선택한 상품" msgstr "選択した商品" #: .\\orders\\templates\\orders\\menu.html:352 #: .\\orders\\templates\\orders\\menu.html:420 msgid "음성입력" msgstr "音声入力" #: .\\orders\\templates\\orders\\menu.html:368 msgid "총 금액" msgstr "合計金額" #: .\\orders\\templates\\orders\\menu.html:368 #: .\\orders\\templates\\orders\\menu.html:421 msgid "원" msgstr "ウォン" #: .\\orders\\templates\\orders\\menu.html:371 msgid "전체삭제" msgstr "全削除" #: .\\orders\\templates\\orders\\menu.html:372 msgid "결제하기" msgstr "支払う" #: .\\orders\\templates\\orders\\menu.html:379 msgid "AI기능이 필요하시면 음성입력을 눌러주세요." msgstr "AI機能が必要な場合は、音声入力を押してください。" #: .\\orders\\templates\\orders\\menu.html:417 msgid "input" msgstr "ja-JP" #: .\\orders\\templates\\orders\\menu.html:418 msgid "output" msgstr "ja-JP" #: .\\orders\\templates\\orders\\menu.html:419 msgid "음성입력중" msgstr "音声入力中"
- ko
-
# SOME DESCRIPTIVE TITLE. # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER # This file is distributed under the same license as the PACKAGE package. # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR. # #, fuzzy msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\\n" "Report-Msgid-Bugs-To: \\n" "POT-Creation-Date: 2024-05-30 16:09+0900\\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n" "Language-Team: LANGUAGE <LL@li.org>\\n" "Language: \\n" "MIME-Version: 1.0\\n" "Content-Type: text/plain; charset=UTF-8\\n" "Content-Transfer-Encoding: 8bit\\n" "Plural-Forms: nplurals=1; plural=0;\\n" #: .\\orders\\templates\\orders\\menu.html:349 msgid "선택한 상품" msgstr "선택한 상품" #: .\\orders\\templates\\orders\\menu.html:352 #: .\\orders\\templates\\orders\\menu.html:420 msgid "음성입력" msgstr "음성입력" #: .\\orders\\templates\\orders\\menu.html:368 msgid "총 금액" msgstr "총 금액" #: .\\orders\\templates\\orders\\menu.html:368 #: .\\orders\\templates\\orders\\menu.html:421 msgid "원" msgstr "원" #: .\\orders\\templates\\orders\\menu.html:371 msgid "전체삭제" msgstr "전체삭제" #: .\\orders\\templates\\orders\\menu.html:372 msgid "결제하기" msgstr "결제하기" #: .\\orders\\templates\\orders\\menu.html:379 msgid "AI기능이 필요하시면 음성입력을 눌러주세요." msgstr "AI기능이 필요하시면 음성입력을 눌러주세요." #: .\\orders\\templates\\orders\\menu.html:417 msgid "input" msgstr "ko-KR" #: .\\orders\\templates\\orders\\menu.html:418 msgid "output" msgstr "en-US" #: .\\orders\\templates\\orders\\menu.html:419 msgid "음성입력중" msgstr "음성입력중"
- cn
-
# SOME DESCRIPTIVE TITLE. # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER # This file is distributed under the same license as the PACKAGE package. # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR. # #, fuzzy msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\\n" "Report-Msgid-Bugs-To: \\n" "POT-Creation-Date: 2024-05-30 16:09+0900\\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n" "Language-Team: LANGUAGE <LL@li.org>\\n" "Language: \\n" "MIME-Version: 1.0\\n" "Content-Type: text/plain; charset=UTF-8\\n" "Content-Transfer-Encoding: 8bit\\n" #: .\\orders\\templates\\orders\\menu.html:349 msgid "선택한 상품" msgstr "选择的商品" #: .\\orders\\templates\\orders\\menu.html:352 #: .\\orders\\templates\\orders\\menu.html:420 msgid "음성입력" msgstr "语音输入" #: .\\orders\\templates\\orders\\menu.html:368 msgid "총 금액" msgstr "总金额" #: .\\orders\\templates\\orders\\menu.html:368 #: .\\orders\\templates\\orders\\menu.html:421 msgid "원" msgstr "韩元" #: .\\orders\\templates\\orders\\menu.html:371 msgid "전체삭제" msgstr "全部删除" #: .\\orders\\templates\\orders\\menu.html:372 msgid "결제하기" msgstr "付款" #: .\\orders\\templates\\orders\\menu.html:379 msgid "AI기능이 필요하시면 음성입력을 눌러주세요." msgstr "如果需要AI功能,请按语音输入。" #: .\\orders\\templates\\orders\\menu.html:417 msgid "input" msgstr "zh-CN" #: .\\orders\\templates\\orders\\menu.html:418 msgid "output" msgstr "zh-CN" #: .\\orders\\templates\\orders\\menu.html:419 msgid "음성입력중" msgstr "输入语音"
- html(언어별 버튼
-
# 버튼 위치 <div id="language-buttons" class="flex" style="position: fixed;top: 35px;right: 60px;"> <button class="btn btn-light btn-lg" data-lang="ko">한국어</button> <button class="btn btn-light btn-lg" data-lang="en">English</button> <button class="btn btn-light btn-lg" data-lang="ja">日本語</button> <button class="btn btn-light btn-lg" data-lang="zh-hans">中文</button> </div> # 언어 변경 자바스크립트 document.addEventListener("DOMContentLoaded", function () { const languageButtons = document.querySelectorAll(".btn-light"); languageButtons.forEach(button => { button.addEventListener("click", function () { const lang = this.dataset.lang; switchLanguage(lang); }); }); function switchLanguage(lang) { fetch(`/orders/switch-language/?lang=${lang}`) .then(response => { if (response.ok) { window.location.reload(); } else { console.error('Failed to switch language.'); } }) .catch(error => console.error('Error:', error)); } }); function getCsrfToken() { const csrfTokenElement = document.querySelector('input[name="csrfmiddlewaretoken"]'); if (csrfTokenElement) { return csrfTokenElement.value; } else { console.error('CSRF 토큰을 찾을 수 없습니다.'); return null; } } const languageCodeIn = '{% trans 'input' %}'; // 음성입력 언어 선택 const languageCodeOut = '{% trans 'output' %}'; // 음성입력 언어 선택 const speechInputIn = "{% trans '음성입력중' %}"; // 음성입력 중 표시 const speechInput = "{% trans '음성입력' %}"; // 음성입력 표시 const won = "{% trans '원' %}"; // 원 표시
'코딩 교육 TIL' 카테고리의 다른 글
2024-06-03 AI 코딩 TIL (1) | 2024.06.03 |
---|---|
2024-05-31 AI 코딩 TIL (1) | 2024.05.31 |
2024-05-29 AI 코딩 TIL (0) | 2024.05.29 |
2024-05-28 AI 코딩 TIL (0) | 2024.05.28 |
2024-05-27 AI 코딩 TIL (0) | 2024.05.27 |