adminJS 튜토리얼 - 국제화(i18n) (공식 사이트 번역)

주의!!!!) 이 문서는 오래되었으며 더 이상 최신 정보가 아닌 정보를 포함할 수 있습니다. 곧 다시 쓸 예정입니다!

 

AdminJS에는 영어로 준비된 기본 텍스트 세트가 있습니다. 그러나 각각을 변경하거나 AdminJS를 다른 언어로 번역하는 데 방해가 되는 것은 없습니다.

 

로케일 옵션 및 기본 번역

모든 번역은 AdminJSOptions#locale 속성을 사용하여 재정의 할 수 있습니다.

따라서 new 액션의 이름을 정의하려면 액션의 번역을 재정의하면 됩니다.

const options = {
  locale: {
    translations: {
      actions: {
        new: 'Let\'s create',
      }
    }
  }
}

const adminJs = new AdminJS(options)
...

 

그러나 특정 리소스에 대해서만 new 액션 이름을 재정의 할 수도 있습니다.

const options = {
  locale: {
    translations: {
      actions: {
        new: 'New',
      },
      resources: {
        Article: {
          actions: {
            new: 'New Article'
          }
        }
      }
    }
  }
}

 

 

네임스페이스

모든 번역 키는 다음 그룹으로 나뉩니다.

• actions - 모든 action에 대한 번역 - 기본 action과 사용자가 생성한 action 모두.
• 버튼 - 모든 종류의 버튼에 대한 번역
• 메시지 - 앱의 모든 메시지에 대한 번역
• 레이블 - 모든 레이블에 대한 번역 - 일반적으로 한 단어. 레이블은 리소스 이름을 번역하는 데 사용됩니다.
• 속성 - 모든 속성에 대한 번역.

 

더 자세한 예

관리자 패널을 폴란드어로 번역하고 싶다고 가정해 봅시다. 다음과 같이 보일 수 있습니다.

특정 속성에 대한 새 항목 추가 버튼 번역 또는 데이터베이스 열거형 레이블 번역과 같은 다른 경우가 포함되어 있으므로 이 예를 자세히 살펴보세요.

const options = {
  locale: {
    language: 'pl',
    translations: {
      actions: {
        new: 'Stwórz nowy',
        edit: 'Edytuj',
        show: 'Detale',
        ...,
      },
      buttons: {
        save: 'zapisz',
        // We use i18next with its pluralization logic.
        confirmRemovalMany_1: 'Potwierdź usunięcie {{count}} rekordu',
        confirmRemovalMany_2: 'Potwierdź usunięcie {{count}} rekordów',
        ...
      },
      properties: {
        // labels of properties in all resources with name "name"
        // will be translated to "Nazwa".
        name: 'Nazwa',
        nested: 'Zagniezdzone',
        // this is how nested properties (for nested schemas) can be provided
        'nested.width': 'Szerokość',
        // translate values of boolean property
        'isAdmin.true': 'admin',
        'isAdmin.false': 'normalny'
        // translate values of enums:
        'companySize.small': 'mała',
        'companySize.medium': 'średnia',
        'companySize.big': 'duza',
        // tags is an array and we translate button for this array:
        'tags.addNewItem': 'Dodaj nowy tag',

      },
      labels: {
        // here we translate the name of a resource.
        Comment: 'Komentarze',
      },
      resources: {
        Comment: {
          properties: {
            // this will override the name only for Comment resource.
            name: 'Tytuł'
          }
        }
      }
    }
  }
}

 

 

 

 

 

애플리케이션 및 AdminJS에서 i18n 사용

앱에서 이미 i18next를 사용하는 경우 i18next 초기화 콜백에서 AdminJS를 초기화해야 합니다. 이러한 방식으로 AdminJS는 기존 번역에 새 번역을 추가합니다.

const loadAdminJS = () => {
  const { adminJs, adminRouter } = admin()
  app.use(adminJs.options.rootPath, adminMiddleware, adminRouter)
  app.use('/admin', adminMiddleware, adminController)
}

i18next.init({...}, (err, t) => {
  loadAdminJS()
})

 

 

내 custom actions / 컴포넌트에서 번역을 사용하는 방법

Action#before과 Action#after Hook은 Action#ActionContext 매개변수와 함께 제공됩니다. translateButton, translateLabel 등과 같은 모든 TranslateFunctions를 결합합니다.

// before Hook
{
  after: async (response, request, context) => {
    const { translateMessage } = context
    ...
  }
}

컴포넌트에서 번역기능을 더 사용하고싶다면 useTranslate Hook을 사용할 수 있습니다.

 

 

다른 옵션들

백엔드에서는 http://www.i18next.com/라이브러리를 사용합니다. 따라서 가능한 모든 옵션에 대한 자세한 내용은 해당 문서를 확인하십시오.