i18n - docs translations (#22420)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
committed by
GitHub
parent
795785653d
commit
128abcc433
@@ -1,21 +1,18 @@
|
||||
---
|
||||
title: الترجمات
|
||||
description: قم بشحن تطبيقك بعدة لغات — ترجم تسميات ملف manifest وسلاسل واجهة المستخدم من خلال كتالوج محليات واحد.
|
||||
description: قدّم تطبيقك بعدة لغات — ترجم تسميات ملف البيان وسلاسل واجهة المستخدم عبر كتالوج إعدادات محلية واحد.
|
||||
icon: language
|
||||
---
|
||||
|
||||
Twenty تطبيقًا مكتوبًا باللغة **English**: السلاسل في المصدر وملف manifest
|
||||
هي نص المصدر باللغة الإنجليزية، و `en` هي لغة المصدر التي تترجم *منها*، وأي
|
||||
إعداد محلي لا تتم ترجمته يعود إليها افتراضيًا.
|
||||
تُكتب تطبيقات Twenty باللغة **الإنجليزية**: السلاسل في شفرتك وملف البيان هي نص المصدر بالإنجليزية، و`en` هي الإعداد المحلي الذي تترجم منه، وأي إعداد محلي يُترك دون ترجمة يعود إليه افتراضيًا.
|
||||
|
||||
يحتوي تطبيقك على نوعين من النصوص القابلة للترجمة، وكلاهما يمر عبر نفس
|
||||
كتالوج `locales/`:
|
||||
|
||||
* **Manifest labels** — أسماء الكائنات والحقول، وعناوين العروض، وعناصر القوائم، و
|
||||
السلاسل الأخرى المصرّح بها في بيانات التعريف لتطبيقك.
|
||||
* **تسميات ملف البيان** — أسماء الكائنات والحقول، وعناوين العروض، وعناصر القوائم، وسلاسل أخرى مُعلَنة في بيانات التعريف لتطبيقك.
|
||||
* **سلاسل الواجهة الأمامية (front-component)** — نص واجهة المستخدم الذي تقوم مكوّنات React الأمامية لديك بعرضه.
|
||||
|
||||
أنت تقوم بوضع علامة على السلاسل القابلة للترجمة، واستخراجها إلى كتالوجات لكل لغة (locale)، ثم تترجم هذه الكتالوجات، ويقوم البناء (build) بتقديم اللغة الصحيحة للمستخدم الحالي — بدون أي توصيل إضافي.
|
||||
تضع علامات على السلاسل القابلة للترجمة، وتستخرجها إلى كتالوجات لكل إعداد محلي، ثم تترجم هذه الكتالوجات، وتتولّى عملية البناء تقديم اللغة الصحيحة للمستخدم الحالي — دون أي إعداد إضافي.
|
||||
|
||||
## وضع علامات على سلاسل الواجهة الأمامية (front-component)
|
||||
|
||||
@@ -53,14 +50,11 @@ const Card = ({ count, name }: { count: number; name: string }) => {
|
||||
|
||||
### متى تستخدم أيًّا منها
|
||||
|
||||
* **`<Trans>…</Trans>`** — نص ثابت في JSX. استخدم الخاصيتين `message` و`values`
|
||||
من أجل الاستبدال (interpolation) (`<Trans message="Hi {name}" values={{ name }} />`);
|
||||
لا يمكن استخراج الاستبدال مباشرة في العناصر الأبناء (children) بشكل ثابت.
|
||||
* **`<Trans>…</Trans>`** — نص ثابت في JSX. استخدم الخاصيتين `message` و`values` من أجل الاستبدال (interpolation) (`<Trans message="Hi {name}" values={{ name }} />`); لا يمكن استخراج الاستبدال مباشرة في العناصر الفرعية (children) بشكل ثابت.
|
||||
* **`useTranslate().t`** — سلاسل ديناميكية داخل المكوّن. يُعيد التصيير عندما يغيّر المستخدم اللغة. يفضّل استخدامه داخل التصيير (render).
|
||||
* **`t(...)`** (مستوردة مباشرة) — ترجمة فورية (eager) يمكن استخدامها **في أي مكان**،
|
||||
بما في ذلك معالجات الأحداث (event handlers)، والبرامج المساعدة (helpers)، ونطاق الوحدة (module scope) — وليس فقط داخل التصيير.
|
||||
* **`msg(...)`** — واصف كسول (lazy descriptor) للسلاسل المصرّح بها كبيانات (ثوابت،
|
||||
إعدادات config). قم بحلّه لاحقًا باستخدام `t(descriptor)`.
|
||||
* **`msg(...)`** — واصف مؤجَّل للسلاسل المُعلَنة كبيانات (ثوابت، التهيئة (config)). قم بحلّه لاحقًا باستخدام `t(descriptor)`.
|
||||
|
||||
### السياق
|
||||
|
||||
@@ -81,9 +75,7 @@ twenty dev:translations-extract # collect strings into locales/
|
||||
twenty dev:translations-extract --locale fr-FR # also scaffold a target locale
|
||||
```
|
||||
|
||||
يقوم الاستخراج بجمع كل من تسميات ملف البيان (manifest labels) وسلاسل `t()`/`msg()`/`\<Trans>`
|
||||
من شفرة الواجهة الأمامية (front-component) إلى `locales/\<locale>.json`، مفهرسة حسب
|
||||
سلسلة المصدر. املأ الترجمات:
|
||||
يقوم الاستخراج بجمع كل من تسميات ملف البيان (manifest labels) وسلاسل `t()`/`msg()`/`\<Trans>` من شفرة الواجهة الأمامية (front-component) في `locales/\<locale>.json`، مفهرسة حسب سلسلة المصدر. املأ الترجمات:
|
||||
|
||||
```json
|
||||
// locales/fr-FR.json
|
||||
|
||||
@@ -13,15 +13,15 @@ Ihre App enthält zwei Arten von übersetzbarem Text, und beide laufen durch den
|
||||
|
||||
* **Manifest-Labels** – Objekt- und Feldnamen, Sichtetitel, Menüpunkte und
|
||||
andere Zeichenketten, die in den Metadaten Ihrer App deklariert sind.
|
||||
* **Front-Component-Zeichenketten** – der UI-Text, den Ihre React-Front-Components rendern.
|
||||
* **Front-Komponenten-Zeichenketten** – der UI-Text, den Ihre React-Front-Komponenten rendern.
|
||||
|
||||
Sie markieren die übersetzbaren Zeichenketten, extrahieren sie in sprachspezifische Kataloge,
|
||||
übersetzen diese Kataloge, und der Build stellt die richtige Sprache für den
|
||||
aktuellen Benutzer bereit – ohne zusätzlichen Aufwand.
|
||||
|
||||
## Markieren von Front-Component-Zeichenketten
|
||||
## Markieren von Front-Komponenten-Zeichenketten
|
||||
|
||||
Importieren Sie die Übersetzungs-Helfer aus `twenty-sdk/front-component`:
|
||||
Importieren Sie die Übersetzungshelfer aus `twenty-sdk/front-component`:
|
||||
|
||||
```tsx
|
||||
import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';
|
||||
@@ -53,7 +53,7 @@ const Card = ({ count, name }: { count: number; name: string }) => {
|
||||
};
|
||||
```
|
||||
|
||||
### Wann Sie was verwenden sollten
|
||||
### Wann Sie welches verwenden sollten
|
||||
|
||||
* **`<Trans>…</Trans>`** – statischer Text in JSX. Verwenden Sie die Props `message` und `values`
|
||||
zur Interpolation (`<Trans message="Hi {name}" values={{ name }} />`);
|
||||
@@ -85,9 +85,7 @@ twenty dev:translations-extract # collect strings into locales/
|
||||
twenty dev:translations-extract --locale fr-FR # also scaffold a target locale
|
||||
```
|
||||
|
||||
Die Extraktion sammelt sowohl Ihre Manifest-Labels als auch die `t()`-/`msg()`-/`\<Trans>`-
|
||||
Zeichenketten aus Ihrem Front-Component-Quellcode in `locales/\<locale>.json`, indiziert nach der
|
||||
Quellzeichenkette. Füllen Sie die Übersetzungen aus:
|
||||
Die Extraktion sammelt sowohl Ihre Manifest-Labels als auch die `t()`-/`msg()`-/`\<Trans>`-Zeichenketten aus Ihrem Front-Komponenten-Quellcode in `locales/\<locale>.json`, indiziert nach der Quellzeichenkette. Füllen Sie die Übersetzungen aus:
|
||||
|
||||
```json
|
||||
// locales/fr-FR.json
|
||||
@@ -101,11 +99,9 @@ Quellzeichenkette. Füllen Sie die Übersetzungen aus:
|
||||
Platzhalter wie `{name}` werden zur Laufzeit ersetzt – behalten Sie sie in der
|
||||
Übersetzung bei. Jede Zeichenkette, die leer bleibt, fällt auf den Quelltext zurück.
|
||||
|
||||
## Wie sie ausgeführt wird
|
||||
## Wie es ausgeführt wird
|
||||
|
||||
`twenty dev:build` kompiliert die Kataloge und stellt die richtige Sprache für den
|
||||
aktuellen Benutzer bereit: Manifest-Labels werden serverseitig aufgelöst und Front-Component-
|
||||
Kataloge werden in jedes Komponenten-Bundle eingebunden. Zur Laufzeit liest eine Komponente die
|
||||
`twenty dev:build` kompiliert die Kataloge und stellt die richtige Sprache für den aktuellen Benutzer bereit: Manifest-Labels werden serverseitig aufgelöst und Front-Komponenten-Kataloge werden in jedes Komponenten-Bundle eingebunden. Zur Laufzeit liest eine Komponente die
|
||||
Locale aus ihrem Ausführungskontext (der aktuellen Sprache des Hosts) und löst
|
||||
jede Zeichenkette gegen ihren Katalog auf, wobei auf die Quelle zurückgegriffen
|
||||
wird, wenn eine Übersetzung fehlt. Das Umschalten der Sprache im Host rendert `\<Trans>`- und
|
||||
@@ -120,6 +116,4 @@ kontinuierliche `twenty dev`-Watch zeigt Quellzeichenketten an, daher sollten Si
|
||||
mit einem einmaligen Build testen.
|
||||
</Note>
|
||||
|
||||
`<Trans>`-Text-Children können sich über mehrere Zeilen erstrecken – Leerzeichen werden auf dieselbe Weise zusammengefasst,
|
||||
wie JSX sie zusammenfasst, sodass sowohl `<Trans>Welcome\n back</Trans>` als auch der extrahierte
|
||||
Schlüssel `Welcome back` werden.
|
||||
`<Trans>`-Text-Children können sich über mehrere Zeilen erstrecken – Leerraum wird auf dieselbe Weise zusammengefasst, wie JSX ihn zusammenfasst, sodass sowohl `<Trans>Welcome\n back</Trans>` als auch der extrahierte Schlüssel zu `Welcome back` werden.
|
||||
|
||||
@@ -4,7 +4,7 @@ description: "Lanza tu aplicación en varios idiomas: traduce las etiquetas del
|
||||
icon: language
|
||||
---
|
||||
|
||||
Twenty aplicaciones están creadas en **English**: las cadenas de tu código fuente y del manifiesto son el texto fuente en inglés, `en` es la configuración regional de origen desde la que traduces, y cualquier configuración regional que quede sin traducir recurrirá a ella como copia de seguridad.
|
||||
Las aplicaciones de Twenty están creadas en **inglés**: las cadenas de tu código fuente y del manifiesto son el texto original en inglés, `en` es la configuración regional de origen desde la que traduces y cualquier configuración regional que quede sin traducir volverá a esa configuración.
|
||||
|
||||
Tu aplicación tiene dos tipos de texto traducible, y ambos pasan por el mismo catálogo `locales/`:
|
||||
|
||||
|
||||
@@ -15,9 +15,9 @@ catalogue `locales/` :
|
||||
autres chaînes déclarées dans les métadonnées de votre application.
|
||||
* **Chaînes de front-component** — le texte d’interface utilisateur que vos composants React front affichent.
|
||||
|
||||
Vous marquez les chaînes traduisibles, vous les extrayez dans des catalogues par locale,
|
||||
vous traduisez ces catalogues, et la build sert la bonne langue pour
|
||||
l’utilisateur actuel — sans câblage supplémentaire.
|
||||
Vous marquez les chaînes traduisibles, les extrayez dans des catalogues par locale,
|
||||
traduisez ces catalogues, et le build sert la bonne langue pour
|
||||
l’utilisateur actuel — sans configuration supplémentaire.
|
||||
|
||||
## Marquer les chaînes de front-component
|
||||
|
||||
@@ -105,14 +105,14 @@ traduction. Toute chaîne laissée vide revient au texte source.
|
||||
|
||||
`twenty dev:build` compile les catalogues et sert la bonne langue pour
|
||||
l’utilisateur actuel : les libellés du manifeste sont résolus côté serveur, et les catalogues
|
||||
front-component sont intégrés à chaque bundle de composant. Lors de l'exécution, un composant lit la locale
|
||||
depuis son contexte d'exécution (la langue courante de l'hôte) et résout
|
||||
chaque chaîne de caractères par rapport à son catalogue, retour à la source lorsqu'une traduction
|
||||
est manquante. Changement de langue dans les chaînes de re-rendu d'hôte `\<Trans>` et
|
||||
`useTranslate().t` en direct.
|
||||
front-component sont intégrés à chaque bundle de composant. À l’exécution, un composant lit la
|
||||
locale depuis son contexte d’exécution (la langue actuelle de l’hôte) et résout
|
||||
chaque chaîne à partir de son catalogue, en revenant à la source lorsqu’une traduction
|
||||
manque. Changer la langue dans l’hôte réaffiche en direct les chaînes `\<Trans>` et
|
||||
`useTranslate().t`.
|
||||
|
||||
Parce que les catalogues sont compilés au moment de la compilation, mettre à jour une traduction signifie
|
||||
réexécute `vingt dev:build` (et redéploiement), la même chose que tout autre changement.
|
||||
Comme les catalogues sont compilés au moment de la build, mettre à jour une traduction implique
|
||||
de relancer `twenty dev:build` (et de redéployer), comme pour toute autre modification.
|
||||
|
||||
<Note>
|
||||
Les traductions sont compilées par `twenty dev:build` (et `twenty apply`). La
|
||||
|
||||
@@ -14,7 +14,7 @@ Twenty 应用均以**英文**编写:你的源码和 manifest 中的字符串
|
||||
在应用元数据中声明的其他字符串。
|
||||
* **前端组件字符串** —— 你的 React 前端组件渲染的 UI 文本。
|
||||
|
||||
你标记可翻译字符串,将它们提取到按语言环境划分的目录中,翻译这些目录,然后构建过程会为当前用户提供正确的语言——不需要额外的接线。
|
||||
你标记可翻译字符串,将它们提取到按语言环境划分的目录中,翻译这些目录,然后构建过程会为当前用户提供正确的语言——无需额外配置。
|
||||
|
||||
## 标记前端组件字符串
|
||||
|
||||
@@ -59,7 +59,7 @@ const Card = ({ count, name }: { count: number; name: string }) => {
|
||||
|
||||
### 上下文
|
||||
|
||||
传入 `context` 以区分那些来源字符串相同但翻译不同的情况:
|
||||
传入 `context` 以区分那些源字符串相同但译法不同的情况:
|
||||
|
||||
```tsx
|
||||
t({ message: 'Open', context: 'door' });
|
||||
|
||||
Reference in New Issue
Block a user