7장. 동적 플러그인

프로세스

1. 이름 충돌을 방지하려면 name에 plugin__ 접두사를 추가합니다. 플러그인 템플릿은 기본적으로 plugin__console-plugin-template 네임스페이스를 사용하며, plugin__my-plugin 과 같은 플러그인 이름을 바꿀 때 업데이트해야 합니다. useTranslation 후크를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

   conster Header: React.FC = () => {
     const { t } = useTranslation('plugin__console-demo-plugin');
     return <h1>{t('Hello, World!')}</h1>;
   };

   Copy to Clipboard Toggle word wrap
   중요

   i18n 네임스페이스와 ConsolePlugin 리소스 이름을 일치시켜야 합니다.

2. 필요한 동작을 기반으로 spec.i18n.loadType 필드를 설정합니다.

   예 7.1. plugin__console-demo-plugin

   spec:
     backend:
       service:
         basePath: /
         name: console-demo-plugin
         namespace: console-demo-plugin
         port: 9001
       type: Service
     displayName: OpenShift Console Demo Plugin
     i18n:
       loadType: Preload 

   1

   Copy to Clipboard Toggle word wrap

   1

   로드 중 동적 플러그인 후 i18n 네임스페이스에서 모든 플러그인의 현지화 리소스를 로드합니다.

3. console-extensions.json 의 라벨에 %plugin__console-plugin-template~My Label% 형식을 사용합니다. 콘솔은 plugin__console-plugin-template 네임스페이스에서 현재 언어의 메시지로 값을 대체합니다. 예를 들면 다음과 같습니다.

     {
       "type": "console.navigation/section",
       "properties": {
         "id": "admin-demo-section",
         "perspective": "admin",
         "name": "%plugin__console-plugin-template~Plugin Template%"
       }
     }

   Copy to Clipboard Toggle word wrap

4. i18next-parser 의 TypeScript 파일에 주석을 포함하여 console-extensions.json 의 메시지를 메시지 카탈로그에 추가합니다. 예를 들면 다음과 같습니다.

   // t('plugin__console-demo-plugin~Demo Plugin')

   Copy to Clipboard Toggle word wrap

5. 메시지를 추가하거나 변경할 때 플러그인 템플릿의 locales 폴더에 있는 JSON 파일을 업데이트하려면 다음 명령을 실행합니다.

   $ yarn i18n

   Copy to Clipboard Toggle word wrap