> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li.fi/llms.txt
> Use this file to discover all available pages before exploring further.

# 国际化

> 通过轻松的国际支持解锁全球社区

**LI.FI 组件** 支持国际化（i18n），在我们的社区帮助下，已翻译成多种语言，为您的用户提供本地化的用户体验，使他们更容易理解和与组件交互。

查看支持的语言并通过[**加入**](https://crowdin.com/project/lifi-widget)我们在 [**Crowdin**](https://crowdin.com/project/lifi-widget) 上的翻译项目来帮助我们翻译：

![https://crowdin.com/project/lifi-widget](https://badges.crowdin.net/lifi-widget/localized.svg)

## 配置语言

默认情况下，组件为英文。您可以配置默认语言、要在组件内显示的语言，或者如果您隐藏内置语言选择，用户可以看到组件的语言。

语言配置有 `allow`、`deny` 和 `default` 选项。

```typescript theme={"system"}
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  // hide the language selection part of the UI
  // hiddenUI: ['language'],
  languages: {
    // default to German
    default: 'de',
    // allow German and Spanish languages only
    allow: ['de', 'es'],
    // disable Chinese from being shown in the languages list
    // deny: ['zh'],
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};
```

## Language Resources

You can customize the widget to support any language that your dApp needs by providing language resources.

Rather than trying to add a language via config, it's best to first consider helping us to translate the language you need by joining our [Crowdin translation project](https://crowdin.com/project/lifi-widget). 🙂

<CodeGroup>
  ```typescript widget.tsx theme={"system"}
  import { LiFiWidget, WidgetConfig } from '@lifi/widget';
  import es from './i18n/es.json';

  const widgetConfig: WidgetConfig = {
    languageResources: {
      es,
    },
  };

  export const WidgetPage = () => {
    return (
      <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
    );
  };
  ```

  ```json i18n/es.json theme={"system"}
  {
    "language": {
      "name": "Español",
      "title": "Idioma"
    }
  }
  ```
</CodeGroup>

Also, you can customize the existing language resources if you want to adjust some text. Find the complete list of key-value pairs 中 reference `en.json` in our repository [here](https://github.com/lifinance/widget/blob/main/packages/widget/src/i18n/en.json).

```typescript theme={"system"}
import { LiFiWidget, WidgetConfig } from '@lifi/widget';

const widgetConfig: WidgetConfig = {
  languageResources: {
    en: {
      button: { swap: 'Test swap' },
    },
  },
};

export const WidgetPage = () => {
  return (
    <LiFiWidget integrator="Your dApp/company name" config={widgetConfig} />
  );
};
```