koa의 i18n 대응

12916 단어 Node.jsKoaI18nJavaScript

개요


koa의 i18n에 대응하는 샘플입니다.nodev4 이상 대응.
현재 언어 환경에 따라 표시할 메시지를 전환합니다.
기본값은 일본어

QueryString에서 en를 지정하면 영어 태그가 됩니다.

라이브러리 작업

  • koa
  • koa-swig
  • koa-i18n
  • koa-route(이번 내용에 직접적인 영향을 주지 않음)

    • 코드 해설


    설명 같은 건 필요 없어요. 어쨌든 원본 코드를 보고 싶어요!이렇게 하면
    참조https://github.com/Kazunori-Kimura/koa-i18n-sample.
  • 폴더 구조
    • ./koa-i18n-sample
│
│  app.js
│  package.json
│  
├─locales
│      en.js
│      ja.js
│      
└─views
        index.html
        layout.html

    locale 파일 만들기

    ./locales 아래에 사용자locale에 대응하는 정의 파일을 만듭니다.
    파일 이름은 {locale名}.json이고locale에 대응하는 문장 정의는 json 형식으로 기술되어 있습니다.
    ja.json
    {
    "title": "こんにちは Koa",
    "message": "こんにちは、世界！"
}
    en.json
    {
  "title": "Hello Koa",
  "message": "Hello, world!"
}
    koa-i18n에서 파일 읽기
    대응하는locale의 데이터를view에 건네줍니다.
    koa-i18n 열기i18n-2
    코아를 위해 포장한 것 같아요.

    템플릿 생성


    이번에view의 템플릿 엔진 사용swig.
    koa용 koa-swig 모듈 사용
    대신 사용하고 싶습니다co-views와swig도 마찬가지입니다.
    이번에는 전체적인 레이아웃layout.html과
    내용index.html을 삽입할 두 개의 템플릿 파일을 준비합니다.
    layout.html
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}koa-i18n-sample{% endblock %}</title>
  <style>
    html, body {
      margin: 0px;
      padding: 0px;
      background-color: #E9ECF5;
    }
    #content {
      margin: 40px auto;
      padding: 10px;
      width: 60vw;
      height: 40vh;
      background-color: #73BFB8;
      color: #eaeaea;
      font-size: 4em;
    }
  </style>
</head>
<body>
  <section id="content">
    {% block content %}
      <p>Missing content!</p>
    {% endblock %}
  </section>
</body>
</html>
    템플릿 파일에서 i18n 값을 사용하려면 {{ __("key") }} 형식으로 기술하십시오.
    index.html
    {% extends 'layout.html' %}

{% block title %}{{ __("title") }}{% endblock %}


{% block content %}
  <p>{{ __("message") }}</p>
{% endblock %}

    app.js


    우선, i18n은localles 폴더 내의 json 파일을
    를 참고하십시오.
    appjs
    "use strict";
const koa = require("koa");
const route = require("koa-route");
const render = require("koa-swig");
const locale = require("koa-locale");
const i18n = require("koa-i18n");
const path = require("path");
const app = koa();
const PORT = 3000;

locale(app);

// i18nの設定
app.use(i18n(app, {
  directory: path.resolve(__dirname, "locales"),
  locales: ["ja", "en"],
  extension: ".json",
  modes: [
    "query",  // optional detect querystring - `/?locale=en`
    "cookie", // optional detect cookie      - `Cookie: locale=zh-TW`
    "header"  // optional detect header      - `Accept-Language: zh-CN,zh;q=0.5`
  ]
}));
    이번에 구상한 것은 일본어(ja)와 영어(en)의 전환이다.
    기본값locales에서 지정한 그룹의 첫 번째 요소에 지정된localedefaultLocale에서 지정할 수도 있습니다.extension에서 .json를 지정합니다.
    이 지정이 없으면 기본 확장자는 .js입니다..js의 확장자로 json 파일을 만드는 것은 구역질이 난다
    정확히 지목하는 게 좋겠지.modes 클라이언트locale를 가져오는 방법을 지정합니다.
    이번에는 쉽게 언어 전환을 하려고 하니 큐리스트링의 판단이 우선이다.
    만약 통상적으로 구상한 사용이라면 상술한 설정만으로도 충분하다
    자세한 설정은 i18n-2의 README를 참조하십시오.
    appjs
    // swigの設定
app.context.render = render({
  root: path.resolve(__dirname, "views"),
  ext: "html"
});
    다음은 스웨그의 설정.
    이번에는 템플릿 파일의 저장 위치와 확장자를 지정했습니다.
    세부 설정koa-swig의 README 및
    swig의 문서를 참조하십시오.
    appjs
    // ルーティングの設定
// [get] /:view
app.use(route.get("/:view", function*(view){
  this.body = yield this.render(view);
}));
    마지막으로 라우팅 설정입니다.
    이번엔 index.html만 준비했으니까 의미가 없어요.
    고객의 요청에 따라 표시되는 보기를 전환합니다.
    여기:view에 들어간 것은http://localhost:3000/index의index부분이다.render 방법에서 확장자 이외의basename을 지정합니다.

    실행

    node app.js를 입력하고 서버를 실행하십시오.
    적절한 브라우저에서 액세스http://localhost:3000/index일본어 정보가 표시되는지 확인합니다.

    이어서 액세스http://localhost:3000/index?locale=en확인 정보는 영어입니다.
    koa-i18n의 다국적 언어 견본에 대해 설명하였다.
    문장의 오류와 "이렇게 해야 한다!"만약 이런 의견이 있으면 제출해 주십시오.
    [순차적 점진적 Python] 대상에 대해 얼마나 알고 있는지, 클래스와 대상.
    Riot.js에서 Tour of Heroes – Part1 새 프로젝트 제작 테스트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage