@intlayer/docs 7.3.11 → 7.3.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/generated/docs.entry.cjs +19 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +19 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_with_nuxt.md +294 -438
- package/docs/ar/intlayer_with_react_router_v7.md +33 -4
- package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +516 -0
- package/docs/ar/intlayer_with_tanstack.md +2 -12
- package/docs/ar/intlayer_with_vite+vue.md +1 -0
- package/docs/de/intlayer_with_nuxt.md +284 -410
- package/docs/de/intlayer_with_react_router_v7.md +33 -4
- package/docs/de/intlayer_with_react_router_v7_fs_routes.md +573 -0
- package/docs/de/intlayer_with_tanstack.md +1 -0
- package/docs/de/intlayer_with_vite+vue.md +1 -0
- package/docs/en/intlayer_with_nuxt.md +237 -341
- package/docs/en/intlayer_with_react_router_v7.md +24 -0
- package/docs/en/intlayer_with_react_router_v7_fs_routes.md +570 -0
- package/docs/en/intlayer_with_tanstack.md +2 -12
- package/docs/en/intlayer_with_vite+vue.md +49 -48
- package/docs/en-GB/intlayer_with_nuxt.md +254 -378
- package/docs/en-GB/intlayer_with_react_router_v7.md +33 -4
- package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +513 -0
- package/docs/en-GB/intlayer_with_tanstack.md +2 -12
- package/docs/en-GB/intlayer_with_vite+vue.md +1 -0
- package/docs/es/intlayer_with_nuxt.md +271 -390
- package/docs/es/intlayer_with_react_router_v7.md +33 -4
- package/docs/es/intlayer_with_react_router_v7_fs_routes.md +575 -0
- package/docs/es/intlayer_with_tanstack.md +1 -0
- package/docs/es/intlayer_with_vite+vue.md +1 -2
- package/docs/fr/intlayer_with_nuxt.md +278 -405
- package/docs/fr/intlayer_with_react_router_v7.md +34 -5
- package/docs/fr/intlayer_with_react_router_v7_fs_routes.md +574 -0
- package/docs/fr/intlayer_with_tanstack.md +1 -0
- package/docs/fr/intlayer_with_vite+vue.md +1 -0
- package/docs/hi/intlayer_with_nuxt.md +303 -447
- package/docs/hi/intlayer_with_react_router_v7.md +33 -4
- package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +518 -0
- package/docs/hi/intlayer_with_tanstack.md +2 -12
- package/docs/hi/intlayer_with_vite+vue.md +1 -0
- package/docs/id/intlayer_with_nuxt.md +266 -395
- package/docs/id/intlayer_with_react_router_v7.md +29 -4
- package/docs/id/intlayer_with_react_router_v7_fs_routes.md +521 -0
- package/docs/id/intlayer_with_tanstack.md +2 -12
- package/docs/id/intlayer_with_vite+vue.md +1 -0
- package/docs/it/intlayer_with_nuxt.md +299 -423
- package/docs/it/intlayer_with_react_router_v7.md +33 -4
- package/docs/it/intlayer_with_react_router_v7_fs_routes.md +574 -0
- package/docs/it/intlayer_with_tanstack.md +1 -0
- package/docs/ja/intlayer_with_nuxt.md +309 -432
- package/docs/ja/intlayer_with_react_router_v7.md +33 -4
- package/docs/ja/intlayer_with_react_router_v7_fs_routes.md +574 -0
- package/docs/ja/intlayer_with_tanstack.md +2 -12
- package/docs/ja/intlayer_with_vite+vue.md +1 -0
- package/docs/ko/intlayer_with_nuxt.md +295 -422
- package/docs/ko/intlayer_with_react_router_v7.md +33 -4
- package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +515 -0
- package/docs/ko/intlayer_with_tanstack.md +2 -12
- package/docs/ko/intlayer_with_vite+vue.md +1 -0
- package/docs/pl/intlayer_with_nuxt.md +273 -476
- package/docs/pl/intlayer_with_react_router_v7.md +32 -5
- package/docs/pl/intlayer_with_react_router_v7_fs_routes.md +615 -0
- package/docs/pl/intlayer_with_tanstack.md +2 -12
- package/docs/pl/intlayer_with_vite+vue.md +1 -0
- package/docs/pt/intlayer_with_nuxt.md +277 -420
- package/docs/pt/intlayer_with_react_router_v7.md +28 -0
- package/docs/pt/intlayer_with_tanstack.md +1 -0
- package/docs/ru/intlayer_with_nuxt.md +287 -425
- package/docs/ru/intlayer_with_react_router_v7.md +33 -4
- package/docs/ru/intlayer_with_react_router_v7_fs_routes.md +574 -0
- package/docs/ru/intlayer_with_tanstack.md +1 -0
- package/docs/ru/intlayer_with_vite+vue.md +1 -0
- package/docs/tr/intlayer_with_nuxt.md +313 -406
- package/docs/tr/intlayer_with_react_router_v7.md +33 -4
- package/docs/tr/intlayer_with_react_router_v7_fs_routes.md +572 -0
- package/docs/tr/intlayer_with_tanstack.md +2 -12
- package/docs/tr/intlayer_with_vite+vue.md +1 -0
- package/docs/vi/intlayer_with_nuxt.md +273 -418
- package/docs/vi/intlayer_with_react_router_v7.md +29 -4
- package/docs/vi/intlayer_with_react_router_v7_fs_routes.md +523 -0
- package/docs/vi/intlayer_with_tanstack.md +2 -12
- package/docs/vi/intlayer_with_vite+vue.md +1 -0
- package/docs/zh/intlayer_with_nuxt.md +300 -461
- package/docs/zh/intlayer_with_react_router_v7.md +33 -4
- package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +516 -0
- package/docs/zh/intlayer_with_tanstack.md +2 -12
- package/docs/zh/intlayer_with_vite+vue.md +1 -0
- package/package.json +10 -11
- package/src/generated/docs.entry.ts +19 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-06-18
|
|
3
|
-
updatedAt: 2025-
|
|
4
|
-
title:
|
|
3
|
+
updatedAt: 2025-12-07
|
|
4
|
+
title: अपने Nuxt और Vue ऐप का अनुवाद कैसे करें – i18n गाइड 2025
|
|
5
5
|
description: जानें कि अपनी Nuxt और Vue वेबसाइट को बहुभाषी कैसे बनाएं। अंतरराष्ट्रीयकरण (i18n) और अनुवाद के लिए दस्तावेज़ का पालन करें।
|
|
6
6
|
keywords:
|
|
7
7
|
- अंतरराष्ट्रीयकरण
|
|
@@ -14,35 +14,62 @@ slugs:
|
|
|
14
14
|
- doc
|
|
15
15
|
- environment
|
|
16
16
|
- nuxt-and-vue
|
|
17
|
-
applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-template
|
|
17
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-nuxt-4-template
|
|
18
|
+
youtubeVideo: https://www.youtube.com/watch?v=nhUcUAVQ6eQ
|
|
18
19
|
history:
|
|
20
|
+
- version: 7.3.11
|
|
21
|
+
date: 2025-12-07
|
|
22
|
+
changes: LocaleSwitcher, SEO, मेटाडेटा अपडेट करें
|
|
19
23
|
- version: 5.5.10
|
|
20
24
|
date: 2025-06-29
|
|
21
|
-
changes:
|
|
25
|
+
changes: इतिहास प्रारंभ करें
|
|
22
26
|
---
|
|
23
27
|
|
|
24
|
-
# Intlayer
|
|
28
|
+
# Intlayer का उपयोग करके अपनी Nuxt और Vue वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)
|
|
25
29
|
|
|
26
|
-
|
|
30
|
+
## सामग्री तालिका
|
|
31
|
+
|
|
32
|
+
<TOC/>
|
|
27
33
|
|
|
28
34
|
## Intlayer क्या है?
|
|
29
35
|
|
|
30
|
-
**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब
|
|
36
|
+
**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
|
|
31
37
|
|
|
32
38
|
Intlayer के साथ, आप कर सकते हैं:
|
|
33
39
|
|
|
34
|
-
- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कंपोनेंट स्तर पर होते हैं।
|
|
35
|
-
- **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत
|
|
36
|
-
- **TypeScript समर्थन सुनिश्चित करें** ऑटो-जेनरेटेड प्रकारों के साथ,
|
|
37
|
-
- **उन्नत
|
|
40
|
+
- **घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें** जो कि कंपोनेंट स्तर पर होते हैं।
|
|
41
|
+
- **मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत करें।**
|
|
42
|
+
- **TypeScript समर्थन सुनिश्चित करें** ऑटो-जेनरेटेड प्रकारों के साथ, जिससे ऑटो-कम्प्लीशन और त्रुटि पहचान में सुधार होता है।
|
|
43
|
+
- **उन्नत सुविधाओं का लाभ उठाएं**, जैसे गतिशील लोकल डिटेक्शन और स्विचिंग।
|
|
38
44
|
|
|
39
45
|
---
|
|
40
46
|
|
|
41
47
|
## Nuxt एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
|
|
42
48
|
|
|
43
|
-
|
|
49
|
+
<Tab defaultTab="video">
|
|
50
|
+
<TabItem label="वीडियो" value="video">
|
|
51
|
+
|
|
52
|
+
<iframe title="अपने Nuxt और Vue ऐप को Intlayer का उपयोग करके कैसे अनुवादित करें? Intlayer की खोज करें" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/nhUcUAVQ6eQ?autoplay=0&origin=http://intlayer.org&controls=0&rel=1"/>
|
|
53
|
+
|
|
54
|
+
</TabItem>
|
|
55
|
+
<TabItem label="कोड" value="code">
|
|
56
|
+
|
|
57
|
+
<iframe
|
|
58
|
+
src="https://stackblitz.com/github/aymericzip/intlayer-nuxt-4-template?embed=1&ctl=1&file=intlayer.config.ts"
|
|
59
|
+
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
60
|
+
title="डेमो कोडसैंडबॉक्स - Intlayer का उपयोग करके अपने एप्लिकेशन का अंतरराष्ट्रीयकरण कैसे करें"
|
|
61
|
+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
62
|
+
loading="lazy"
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
</TabItem>
|
|
66
|
+
</Tab>
|
|
44
67
|
|
|
45
|
-
|
|
68
|
+
GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-nuxt-4-template) देखें।
|
|
69
|
+
|
|
70
|
+
### चरण 1: Dependencies इंस्टॉल करें
|
|
71
|
+
|
|
72
|
+
npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
|
|
46
73
|
|
|
47
74
|
```bash packageManager="npm"
|
|
48
75
|
npm install intlayer vue-intlayer
|
|
@@ -61,10 +88,10 @@ yarn add --save-dev nuxt-intlayer
|
|
|
61
88
|
|
|
62
89
|
- **intlayer**
|
|
63
90
|
|
|
64
|
-
|
|
91
|
+
कोर पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md), ट्रांसपाइलेशन, और [CLI कमांड्स](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/cli/index.md) के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
|
|
65
92
|
|
|
66
93
|
- **vue-intlayer**
|
|
67
|
-
वह पैकेज जो Intlayer को Vue एप्लिकेशन के साथ एकीकृत करता है। यह Vue कंपोनेंट्स के लिए
|
|
94
|
+
वह पैकेज जो Intlayer को Vue एप्लिकेशन के साथ एकीकृत करता है। यह Vue कंपोनेंट्स के लिए कॉम्पोज़ेबल्स प्रदान करता है।
|
|
68
95
|
|
|
69
96
|
- **nuxt-intlayer**
|
|
70
97
|
Nuxt मॉड्यूल जो Intlayer को Nuxt एप्लिकेशन के साथ एकीकृत करता है। यह स्वचालित सेटअप, लोकल डिटेक्शन के लिए मिडलवेयर, कुकी प्रबंधन, और URL पुनर्निर्देशन प्रदान करता है।
|
|
@@ -86,9 +113,6 @@ const config: IntlayerConfig = {
|
|
|
86
113
|
],
|
|
87
114
|
defaultLocale: Locales.ENGLISH,
|
|
88
115
|
},
|
|
89
|
-
content: {
|
|
90
|
-
contentDir: ["."], // क्योंकि डिफ़ॉल्ट रूप से Intlayer `./src` डायरेक्टरी से सामग्री घोषणा फ़ाइलों को देखेगा
|
|
91
|
-
},
|
|
92
116
|
};
|
|
93
117
|
|
|
94
118
|
export default config;
|
|
@@ -108,9 +132,6 @@ const config = {
|
|
|
108
132
|
],
|
|
109
133
|
defaultLocale: Locales.ENGLISH,
|
|
110
134
|
},
|
|
111
|
-
content: {
|
|
112
|
-
contentDir: ["."],
|
|
113
|
-
},
|
|
114
135
|
};
|
|
115
136
|
|
|
116
137
|
export default config;
|
|
@@ -130,15 +151,12 @@ const config = {
|
|
|
130
151
|
],
|
|
131
152
|
defaultLocale: Locales.ENGLISH,
|
|
132
153
|
},
|
|
133
|
-
content: {
|
|
134
|
-
contentDir: ["."],
|
|
135
|
-
},
|
|
136
154
|
};
|
|
137
155
|
|
|
138
156
|
module.exports = config;
|
|
139
157
|
```
|
|
140
158
|
|
|
141
|
-
> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत
|
|
159
|
+
> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URLs, मिडलवेयर रीडायरेक्शन, कुकी नाम, आपकी कंटेंट घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग्स को अक्षम कर सकते हैं, और भी बहुत कुछ। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, कृपया [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md) देखें।
|
|
142
160
|
|
|
143
161
|
### चरण 3: अपने Nuxt कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
|
|
144
162
|
|
|
@@ -153,258 +171,46 @@ export default defineNuxtConfig({
|
|
|
153
171
|
});
|
|
154
172
|
```
|
|
155
173
|
|
|
156
|
-
> `nuxt-intlayer` मॉड्यूल स्वचालित रूप से Intlayer को Nuxt के साथ एकीकृत करता है। यह
|
|
174
|
+
> `nuxt-intlayer` मॉड्यूल स्वचालित रूप से Intlayer को Nuxt के साथ एकीकृत करता है। यह कंटेंट घोषणा निर्माण सेट करता है, विकास मोड में फ़ाइलों की निगरानी करता है, स्थानीय पहचान के लिए मिडलवेयर प्रदान करता है, और स्थानीयकृत रूटिंग का प्रबंधन करता है।
|
|
157
175
|
|
|
158
176
|
### चरण 4: अपनी सामग्री घोषित करें
|
|
159
177
|
|
|
160
|
-
अनुवाद संग्रहीत करने के लिए अपनी
|
|
178
|
+
अनुवाद संग्रहीत करने के लिए अपनी कंटेंट घोषणाएँ बनाएं और प्रबंधित करें:
|
|
161
179
|
|
|
162
|
-
```tsx fileName="
|
|
163
|
-
import {
|
|
180
|
+
```tsx fileName="content/home-page.content.ts" contentDeclarationFormat="typescript"
|
|
181
|
+
import { type Dictionary, t } from "intlayer";
|
|
164
182
|
|
|
165
|
-
const
|
|
166
|
-
key: "
|
|
167
|
-
content: {
|
|
168
|
-
count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
|
|
169
|
-
edit: t({
|
|
170
|
-
en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
|
|
171
|
-
fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
|
|
172
|
-
es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
|
|
173
|
-
}),
|
|
174
|
-
checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
|
|
175
|
-
nuxtIntlayer: t({
|
|
176
|
-
en: "Nuxt Intlayer documentation",
|
|
177
|
-
fr: "Documentation de Nuxt Intlayer",
|
|
178
|
-
es: "Documentación de Nuxt Intlayer",
|
|
179
|
-
}),
|
|
180
|
-
learnMore: t({
|
|
181
|
-
en: "Learn more about Nuxt in the ",
|
|
182
|
-
fr: "En savoir plus sur Nuxt dans la ",
|
|
183
|
-
es: "Aprenda más sobre Nuxt en la ",
|
|
184
|
-
}),
|
|
185
|
-
nuxtDocs: t({
|
|
186
|
-
en: "Nuxt Documentation",
|
|
187
|
-
fr: "Documentation Nuxt",
|
|
188
|
-
es: "Documentación de Nuxt",
|
|
189
|
-
}),
|
|
190
|
-
readTheDocs: t({
|
|
191
|
-
en: "Click on the Nuxt logo to learn more",
|
|
192
|
-
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
|
|
193
|
-
es: "Haga clic en el logotipo de Nuxt para obtener más información",
|
|
194
|
-
}),
|
|
195
|
-
},
|
|
196
|
-
} satisfies Dictionary;
|
|
197
|
-
|
|
198
|
-
export default helloWorldContent;
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
```javascript fileName="components/helloWorld.content.mjs" contentDeclarationFormat="esm"
|
|
202
|
-
import { t } from "intlayer";
|
|
203
|
-
|
|
204
|
-
/** @type {import('intlayer').Dictionary} */
|
|
205
|
-
const helloWorldContent = {
|
|
206
|
-
key: "helloworld",
|
|
183
|
+
const content = {
|
|
184
|
+
key: "home-page",
|
|
207
185
|
content: {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
|
|
213
|
-
es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
|
|
214
|
-
}),
|
|
215
|
-
checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
|
|
216
|
-
nuxtIntlayer: t({
|
|
217
|
-
en: "Nuxt Intlayer documentation",
|
|
218
|
-
fr: "Documentation de Nuxt Intlayer",
|
|
219
|
-
es: "Documentación de Nuxt Intlayer",
|
|
220
|
-
}),
|
|
221
|
-
learnMore: t({
|
|
222
|
-
en: "Learn more about Nuxt in the ",
|
|
223
|
-
fr: "En savoir plus sur Nuxt dans la ",
|
|
224
|
-
es: "Aprenda más sobre Nuxt en la ",
|
|
225
|
-
}),
|
|
226
|
-
nuxtDocs: t({
|
|
227
|
-
en: "Nuxt Documentation",
|
|
228
|
-
fr: "Documentation Nuxt",
|
|
229
|
-
es: "Documentación de Nuxt",
|
|
186
|
+
title: t({
|
|
187
|
+
en: "Hello world",
|
|
188
|
+
fr: "Bonjour le monde",
|
|
189
|
+
es: "Hola mundo",
|
|
230
190
|
}),
|
|
231
|
-
|
|
232
|
-
en: "
|
|
233
|
-
fr: "
|
|
234
|
-
es: "
|
|
191
|
+
metaTitle: t({
|
|
192
|
+
en: "Welcome | My Application",
|
|
193
|
+
fr: "Bienvenue | Mon Application",
|
|
194
|
+
es: "Bienvenido | Mi Aplicación",
|
|
235
195
|
}),
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
|
|
241
|
-
es: "Haga clic en el logotipo de Nuxt para obtener más información",
|
|
196
|
+
metaDescription: t({
|
|
197
|
+
en: "Discover your multilingual Nuxt app homepage powered by Intlayer.",
|
|
198
|
+
fr: "Découvrez la page d'accueil multilingue de votre application Nuxt propulsée par Intlayer.",
|
|
199
|
+
es: "Descubre la página de inicio multilingüe de tu aplicación Nuxt impulsada por Intlayer.",
|
|
242
200
|
}),
|
|
243
201
|
},
|
|
244
202
|
} satisfies Dictionary;
|
|
245
203
|
|
|
246
|
-
export default
|
|
247
|
-
```
|
|
248
|
-
|
|
249
|
-
```javascript fileName="components/helloWorld.content.mjs" contentDeclarationFormat="esm"
|
|
250
|
-
import { t } from "intlayer";
|
|
251
|
-
|
|
252
|
-
/** @type {import('intlayer').Dictionary} */
|
|
253
|
-
const helloWorldContent = {
|
|
254
|
-
key: "helloworld",
|
|
255
|
-
content: {
|
|
256
|
-
count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
|
|
257
|
-
edit: t({
|
|
258
|
-
en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
|
|
259
|
-
fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
|
|
260
|
-
es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
|
|
261
|
-
}),
|
|
262
|
-
checkOut: t({
|
|
263
|
-
en: "Check out ",
|
|
264
|
-
hi: "देखें ",
|
|
265
|
-
fr: "Vérifiez ",
|
|
266
|
-
es: "Compruebe ",
|
|
267
|
-
}),
|
|
268
|
-
nuxtIntlayer: t({
|
|
269
|
-
en: "Nuxt Intlayer documentation",
|
|
270
|
-
hi: "Nuxt Intlayer दस्तावेज़",
|
|
271
|
-
fr: "Documentation de Nuxt Intlayer",
|
|
272
|
-
es: "Documentación de Nuxt Intlayer",
|
|
273
|
-
}),
|
|
274
|
-
learnMore: t({
|
|
275
|
-
en: "Learn more about Nuxt in the ",
|
|
276
|
-
hi: "Nuxt के बारे में अधिक जानें ",
|
|
277
|
-
fr: "En savoir plus sur Nuxt dans la ",
|
|
278
|
-
es: "Aprenda más sobre Nuxt en la ",
|
|
279
|
-
}),
|
|
280
|
-
nuxtDocs: t({
|
|
281
|
-
en: "Nuxt Documentation",
|
|
282
|
-
hi: "Nuxt दस्तावेज़",
|
|
283
|
-
fr: "Documentation Nuxt",
|
|
284
|
-
es: "Documentación de Nuxt",
|
|
285
|
-
}),
|
|
286
|
-
readTheDocs: t({
|
|
287
|
-
en: "Click on the Nuxt logo to learn more",
|
|
288
|
-
hi: "अधिक जानने के लिए Nuxt लोगो पर क्लिक करें",
|
|
289
|
-
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
|
|
290
|
-
es: "Haga clic en el logotipo de Nuxt para obtener más información",
|
|
291
|
-
}),
|
|
292
|
-
},
|
|
293
|
-
};
|
|
294
|
-
|
|
295
|
-
export default helloWorldContent;
|
|
296
|
-
```
|
|
297
|
-
|
|
298
|
-
```javascript fileName="components/helloWorld.content.cjs" contentDeclarationFormat="commonjs"
|
|
299
|
-
const { t } = require("intlayer");
|
|
300
|
-
|
|
301
|
-
/** @type {import('intlayer').Dictionary} */
|
|
302
|
-
const helloWorldContent = {
|
|
303
|
-
key: "helloworld",
|
|
304
|
-
content: {
|
|
305
|
-
count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
|
|
306
|
-
edit: t({
|
|
307
|
-
en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
|
|
308
|
-
fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
|
|
309
|
-
es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
|
|
310
|
-
}),
|
|
311
|
-
checkOut: t({ en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
|
|
312
|
-
nuxtIntlayer: t({
|
|
313
|
-
en: "Nuxt Intlayer documentation",
|
|
314
|
-
fr: "Documentation de Nuxt Intlayer",
|
|
315
|
-
es: "Nuxt Intlayer दस्तावेज़ीकरण",
|
|
316
|
-
}),
|
|
317
|
-
learnMore: t({
|
|
318
|
-
en: "Nuxt के बारे में अधिक जानें ",
|
|
319
|
-
fr: "En savoir plus sur Nuxt dans la ",
|
|
320
|
-
es: "Aprenda más sobre Nuxt en la ",
|
|
321
|
-
}),
|
|
322
|
-
nuxtDocs: t({
|
|
323
|
-
en: "Nuxt दस्तावेज़ीकरण",
|
|
324
|
-
fr: "Documentation Nuxt",
|
|
325
|
-
es: "Documentación de Nuxt",
|
|
326
|
-
}),
|
|
327
|
-
readTheDocs: t({
|
|
328
|
-
en: "अधिक जानने के लिए Nuxt लोगो पर क्लिक करें",
|
|
329
|
-
fr: "Cliquez sur le logo Nuxt pour en savoir plus",
|
|
330
|
-
es: "Haga clic en el logotipo de Nuxt para obtener más información",
|
|
331
|
-
}),
|
|
332
|
-
},
|
|
333
|
-
};
|
|
334
|
-
|
|
335
|
-
module.exports = helloWorldContent;
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
```json fileName="components/helloWorld.content.json" contentDeclarationFormat="json"
|
|
339
|
-
{
|
|
340
|
-
"$schema": "https://intlayer.org/schema.json",
|
|
341
|
-
"key": "helloworld",
|
|
342
|
-
"content": {
|
|
343
|
-
"count": {
|
|
344
|
-
"nodeType": "translation",
|
|
345
|
-
"translation": {
|
|
346
|
-
"en": "count is ",
|
|
347
|
-
"hi": "गिनती है ",
|
|
348
|
-
"fr": "le compte est ",
|
|
349
|
-
"es": "el recuento es "
|
|
350
|
-
}
|
|
351
|
-
},
|
|
352
|
-
"edit": {
|
|
353
|
-
"nodeType": "translation",
|
|
354
|
-
"translation": {
|
|
355
|
-
"en": "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
|
|
356
|
-
"hi": "परीक्षण के लिए <code>components/HelloWorld.vue</code> संपादित करें और HMR को सहेजें",
|
|
357
|
-
"fr": "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
|
|
358
|
-
"es": "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR"
|
|
359
|
-
}
|
|
360
|
-
},
|
|
361
|
-
"checkOut": {
|
|
362
|
-
"nodeType": "translation",
|
|
363
|
-
"translation": {
|
|
364
|
-
"en": "Check out ",
|
|
365
|
-
"hi": "देखें ",
|
|
366
|
-
"fr": "Vérifiez ",
|
|
367
|
-
"es": "Compruebe "
|
|
368
|
-
}
|
|
369
|
-
},
|
|
370
|
-
"nuxtIntlayer": {
|
|
371
|
-
"nodeType": "translation",
|
|
372
|
-
"translation": {
|
|
373
|
-
"hi": "Nuxt Intlayer प्रलेखन"
|
|
374
|
-
}
|
|
375
|
-
},
|
|
376
|
-
"learnMore": {
|
|
377
|
-
"nodeType": "translation",
|
|
378
|
-
"translation": {
|
|
379
|
-
"hi": "Nuxt के बारे में अधिक जानें "
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
"nuxtDocs": {
|
|
383
|
-
"nodeType": "translation",
|
|
384
|
-
"translation": {
|
|
385
|
-
"hi": "Nuxt प्रलेखन"
|
|
386
|
-
}
|
|
387
|
-
},
|
|
388
|
-
"readTheDocs": {
|
|
389
|
-
"nodeType": "translation",
|
|
390
|
-
"translation": {
|
|
391
|
-
"hi": "अधिक जानने के लिए Nuxt लोगो पर क्लिक करें"
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
|
-
"es": "Haga clic en el logotipo de Nuxt para obtener más información"
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
}
|
|
204
|
+
export default content;
|
|
399
205
|
```
|
|
400
206
|
|
|
401
|
-
> आपकी
|
|
207
|
+
> आपकी कंटेंट घोषणाएँ आपकी एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब तक कि वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल हों। और कंटेंट घोषणा फ़ाइल एक्सटेंशन से मेल खाती हों (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`)।
|
|
402
208
|
|
|
403
|
-
> अधिक विवरण के लिए, [
|
|
209
|
+
> अधिक विवरण के लिए, [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें।
|
|
404
210
|
|
|
405
211
|
### चरण 5: अपने कोड में Intlayer का उपयोग करें
|
|
406
212
|
|
|
407
|
-
अपने Nuxt एप्लिकेशन में `useIntlayer`
|
|
213
|
+
अपने Nuxt एप्लिकेशन में `useIntlayer` composable का उपयोग करके अपनी कंटेंट डिक्शनरीज़ तक पहुँचें:
|
|
408
214
|
|
|
409
215
|
```vue fileName="components/HelloWorld.vue"
|
|
410
216
|
<script setup lang="ts">
|
|
@@ -453,86 +259,76 @@ const countRef = ref(0);
|
|
|
453
259
|
</template>
|
|
454
260
|
```
|
|
455
261
|
|
|
456
|
-
#### Intlayer में
|
|
262
|
+
#### Intlayer में कंटेंट तक पहुँच
|
|
457
263
|
|
|
458
|
-
Intlayer आपकी
|
|
264
|
+
Intlayer आपकी कंटेंट तक पहुँचने के लिए विभिन्न APIs प्रदान करता है:
|
|
459
265
|
|
|
460
|
-
- **कंपोनेंट-आधारित सिंटैक्स** (
|
|
461
|
-
|
|
266
|
+
- **कंपोनेंट-आधारित सिंटैक्स** (सिफारिश की गई):
|
|
267
|
+
`<myContent />`, या `<Component :is="myContent" />` सिंटैक्स का उपयोग करके कंटेंट को Intlayer Node के रूप में रेंडर करें। यह [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) और [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) के साथ सहजता से एकीकृत होता है।
|
|
462
268
|
|
|
463
269
|
- **स्ट्रिंग-आधारित सिंटैक्स**:
|
|
464
|
-
|
|
270
|
+
कंटेंट को प्लेन टेक्स्ट के रूप में रेंडर करने के लिए `{{ myContent }}` का उपयोग करें, बिना Visual Editor सपोर्ट के।
|
|
465
271
|
|
|
466
272
|
- **रॉ HTML सिंटैक्स**:
|
|
467
|
-
|
|
273
|
+
कंटेंट को रॉ HTML के रूप में रेंडर करने के लिए `<div v-html="myContent" />` का उपयोग करें, बिना Visual Editor सपोर्ट के।
|
|
468
274
|
|
|
469
275
|
- **डिस्ट्रक्चरिंग सिंटैक्स**:
|
|
470
|
-
`useIntlayer` कॉम्पोज़ेबल
|
|
471
|
-
-
|
|
472
|
-
- या
|
|
276
|
+
`useIntlayer` कॉम्पोज़ेबल कंटेंट के साथ एक Proxy लौटाता है। इस Proxy को डिस्ट्रक्चर करके कंटेंट तक पहुंचा जा सकता है जबकि रिएक्टिविटी बनी रहती है।
|
|
277
|
+
- `const content = useIntlayer("myContent");` का उपयोग करें और `{{ content.myContent }}` / `<content.myContent />`।
|
|
278
|
+
- या `const { myContent } = useIntlayer("myContent");` का उपयोग करें और `{{ myContent}}` / `<myContent/>` से कंटेंट को डीस्ट्रक्चर करें।
|
|
473
279
|
|
|
474
280
|
### (वैकल्पिक) चरण 6: अपनी सामग्री की भाषा बदलें
|
|
475
281
|
|
|
476
|
-
अपनी सामग्री की भाषा बदलने के लिए, आप `useLocale` कॉम्पोज़ेबल द्वारा प्रदान
|
|
282
|
+
अपनी सामग्री की भाषा बदलने के लिए, आप `useLocale` कॉम्पोज़ेबल द्वारा प्रदान किए गए `setLocale` फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपको एप्लिकेशन की लोकल सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।
|
|
477
283
|
|
|
478
|
-
भाषाओं के बीच स्विच करने के लिए एक कॉम्पोनेंट
|
|
284
|
+
`NuxtLink` का उपयोग करके भाषाओं के बीच स्विच करने के लिए एक कॉम्पोनेंट बनाएं। **लोकल स्विचिंग के लिए बटन के बजाय लिंक का उपयोग करना SEO और पेज की खोज योग्यता के लिए एक सर्वोत्तम अभ्यास है**, क्योंकि यह खोज इंजन को आपकी सभी स्थानीयकृत पृष्ठों के संस्करणों को क्रॉल और इंडेक्स करने की अनुमति देता है:
|
|
479
285
|
|
|
480
286
|
```vue fileName="components/LocaleSwitcher.vue"
|
|
481
|
-
<template>
|
|
482
|
-
<div class="locale-switcher">
|
|
483
|
-
<select v-model="selectedLocale" @change="changeLocale">
|
|
484
|
-
<option v-for="loc in availableLocales" :key="loc" :value="loc">
|
|
485
|
-
{{ getLocaleName(loc) }}
|
|
486
|
-
</option>
|
|
487
|
-
</select>
|
|
488
|
-
</div>
|
|
489
|
-
</template>
|
|
490
|
-
|
|
491
287
|
<script setup lang="ts">
|
|
492
|
-
import {
|
|
493
|
-
import { getLocaleName } from "intlayer";
|
|
288
|
+
import { getLocaleName, getLocalizedUrl } from "intlayer";
|
|
494
289
|
import { useLocale } from "vue-intlayer";
|
|
495
290
|
|
|
496
|
-
//
|
|
291
|
+
// Nuxt स्वचालित रूप से useRoute को इम्पोर्ट करता है
|
|
292
|
+
const route = useRoute();
|
|
497
293
|
const { locale, availableLocales, setLocale } = useLocale();
|
|
498
|
-
|
|
499
|
-
// चयनित लोकल को ref के साथ ट्रैक करें
|
|
500
|
-
const selectedLocale = ref(locale.value);
|
|
501
|
-
|
|
502
|
-
// चयन बदलने पर लोकल अपडेट करें
|
|
503
|
-
const changeLocale = () => setLocale(selectedLocale.value);
|
|
504
|
-
|
|
505
|
-
// global locale के साथ selectedLocale को सिंक में रखें
|
|
506
|
-
watch(
|
|
507
|
-
() => locale.value,
|
|
508
|
-
(newLocale) => {
|
|
509
|
-
selectedLocale.value = newLocale;
|
|
510
|
-
}
|
|
511
|
-
);
|
|
512
294
|
</script>
|
|
295
|
+
|
|
296
|
+
<template>
|
|
297
|
+
<nav class="locale-switcher">
|
|
298
|
+
<NuxtLink
|
|
299
|
+
v-for="localeEl in availableLocales"
|
|
300
|
+
:key="localeEl"
|
|
301
|
+
:to="getLocalizedUrl(route.fullPath, localeEl)"
|
|
302
|
+
class="locale-link"
|
|
303
|
+
:class="{ 'active-locale': localeEl === locale }"
|
|
304
|
+
@click="setLocale(localeEl)"
|
|
305
|
+
>
|
|
306
|
+
{{ getLocaleName(localeEl) }}
|
|
307
|
+
</NuxtLink>
|
|
308
|
+
</nav>
|
|
513
309
|
</template>
|
|
310
|
+
```
|
|
514
311
|
|
|
515
|
-
|
|
516
|
-
.locale-switcher {
|
|
517
|
-
margin: 1rem 0;
|
|
518
|
-
}
|
|
312
|
+
> `NuxtLink` का उपयोग उचित `href` गुणों के साथ (जो `getLocalizedUrl` के माध्यम से होता है) यह सुनिश्चित करता है कि सर्च इंजन आपकी पृष्ठों के सभी भाषा संस्करणों को खोज सकें। यह केवल JavaScript-आधारित locale स्विचिंग की तुलना में बेहतर है, जिसे सर्च इंजन क्रॉलर शायद फॉलो न करें।
|
|
519
313
|
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
314
|
+
फिर, अपने `app.vue` को लेआउट्स का उपयोग करने के लिए सेट करें:
|
|
315
|
+
|
|
316
|
+
```vue fileName="app.vue"
|
|
317
|
+
<template>
|
|
318
|
+
<NuxtLayout>
|
|
319
|
+
<NuxtPage />
|
|
320
|
+
</NuxtLayout>
|
|
321
|
+
</template>
|
|
526
322
|
```
|
|
527
323
|
|
|
528
|
-
|
|
324
|
+
### (वैकल्पिक) चरण 6b: नेविगेशन के साथ एक लेआउट बनाएं
|
|
529
325
|
|
|
530
|
-
|
|
326
|
+
Nuxt लेआउट्स आपको अपने पृष्ठों के लिए एक सामान्य संरचना परिभाषित करने की अनुमति देते हैं। एक डिफ़ॉल्ट लेआउट बनाएं जिसमें locale स्विचर और नेविगेशन शामिल हो:
|
|
327
|
+
|
|
328
|
+
```vue fileName="layouts/default.vue"
|
|
531
329
|
<script setup lang="ts">
|
|
532
|
-
import
|
|
330
|
+
import Links from "~/components/Links.vue";
|
|
533
331
|
import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
|
|
534
|
-
|
|
535
|
-
const content = useIntlayer("app"); // संबंधित intlayer घोषणा फ़ाइल बनाएँ
|
|
536
332
|
</script>
|
|
537
333
|
|
|
538
334
|
<template>
|
|
@@ -541,15 +337,20 @@ const content = useIntlayer("app"); // संबंधित intlayer घोष
|
|
|
541
337
|
<LocaleSwitcher />
|
|
542
338
|
</header>
|
|
543
339
|
<main>
|
|
544
|
-
<
|
|
340
|
+
<slot />
|
|
545
341
|
</main>
|
|
342
|
+
|
|
343
|
+
<Links href="/">Home</Links>
|
|
344
|
+
<Links href="/about">About</Links>
|
|
546
345
|
</div>
|
|
547
346
|
</template>
|
|
548
347
|
```
|
|
549
348
|
|
|
349
|
+
`Links` कंपोनेंट (नीचे दिखाया गया) यह सुनिश्चित करता है कि आंतरिक नेविगेशन लिंक स्वचालित रूप से स्थानीयकृत हों।
|
|
350
|
+
|
|
550
351
|
### (वैकल्पिक) चरण 7: अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें
|
|
551
352
|
|
|
552
|
-
|
|
353
|
+
जब आप `nuxt-intlayer` मॉड्यूल का उपयोग करते हैं, तो Nuxt स्वचालित रूप से स्थानीयकृत रूटिंग को संभालता है। यह आपकी pages डायरेक्टरी संरचना के आधार पर प्रत्येक भाषा के लिए स्वचालित रूप से रूट बनाता है।
|
|
553
354
|
|
|
554
355
|
उदाहरण:
|
|
555
356
|
|
|
@@ -561,266 +362,321 @@ pages/
|
|
|
561
362
|
└── index.vue → /contact, /fr/contact, /es/contact
|
|
562
363
|
```
|
|
563
364
|
|
|
564
|
-
|
|
365
|
+
स्थानीयकृत पेज बनाने के लिए, बस `pages/` डायरेक्टरी में अपने Vue फाइलें बनाएं। यहाँ दो उदाहरण पेज दिए गए हैं:
|
|
565
366
|
|
|
566
|
-
|
|
367
|
+
**होम पेज (`pages/index.vue`):**
|
|
368
|
+
|
|
369
|
+
```vue fileName="pages/index.vue"
|
|
567
370
|
<script setup lang="ts">
|
|
568
371
|
import { useIntlayer } from "vue-intlayer";
|
|
569
372
|
|
|
570
|
-
const content = useIntlayer("
|
|
373
|
+
const content = useIntlayer("home-page");
|
|
374
|
+
|
|
375
|
+
useHead({
|
|
376
|
+
title: content.metaTitle.value,
|
|
377
|
+
meta: [
|
|
378
|
+
{
|
|
379
|
+
name: "description",
|
|
380
|
+
content: content.metaDescription.value,
|
|
381
|
+
},
|
|
382
|
+
],
|
|
383
|
+
});
|
|
571
384
|
</script>
|
|
572
385
|
|
|
573
386
|
<template>
|
|
574
|
-
<
|
|
575
|
-
<h1>{{ content.title }}</h1>
|
|
576
|
-
<p>{{ content.description }}</p>
|
|
577
|
-
</div>
|
|
387
|
+
<h1><content.title /></h1>
|
|
578
388
|
</template>
|
|
579
389
|
```
|
|
580
390
|
|
|
581
|
-
`
|
|
391
|
+
**अबाउट पेज (`pages/about.vue`):**
|
|
582
392
|
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
- भाषा कुकीज़ का प्रबंधन करें
|
|
587
|
-
- उपयोगकर्ताओं को उपयुक्त स्थानीयकृत URL पर पुनः निर्देशित करें
|
|
393
|
+
```vue fileName="pages/about.vue"
|
|
394
|
+
<script setup lang="ts">
|
|
395
|
+
import { useIntlayer } from "vue-intlayer";
|
|
588
396
|
|
|
589
|
-
|
|
397
|
+
const content = useIntlayer("about-page");
|
|
590
398
|
|
|
591
|
-
|
|
399
|
+
useHead({
|
|
400
|
+
title: content.metaTitle.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
|
|
401
|
+
meta: [
|
|
402
|
+
{
|
|
403
|
+
name: "description",
|
|
404
|
+
content: content.metaDescription.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
|
|
405
|
+
},
|
|
406
|
+
],
|
|
407
|
+
});
|
|
408
|
+
</script>
|
|
592
409
|
|
|
593
|
-
```vue fileName="components/LocalizedLink.vue"
|
|
594
410
|
<template>
|
|
595
|
-
<
|
|
596
|
-
<slot />
|
|
597
|
-
</NuxtLink>
|
|
411
|
+
<h1><content.title /></h1>
|
|
598
412
|
</template>
|
|
413
|
+
```
|
|
599
414
|
|
|
415
|
+
> नोट: `useHead` Nuxt में ऑटो-इम्पोर्ट होता है। आप अपनी जरूरत के अनुसार कंटेंट वैल्यूज़ को `.value` (reactive) या `.raw` (primitive string) के माध्यम से एक्सेस कर सकते हैं।
|
|
416
|
+
|
|
417
|
+
`nuxt-intlayer` मॉड्यूल स्वचालित रूप से:
|
|
418
|
+
|
|
419
|
+
- उपयोगकर्ता की पसंदीदा लोकल का पता लगाता है
|
|
420
|
+
- URL के माध्यम से लोकल स्विचिंग को संभालता है
|
|
421
|
+
- उपयुक्त `<html lang="">` एट्रिब्यूट सेट करता है
|
|
422
|
+
- लोकल कुकीज़ का प्रबंधन करता है
|
|
423
|
+
- उपयोगकर्ताओं को उपयुक्त स्थानीयकृत URL पर रीडायरेक्ट करता है
|
|
424
|
+
|
|
425
|
+
### (वैकल्पिक) चरण 8: एक स्थानीयकृत लिंक कंपोनेंट बनाना
|
|
426
|
+
|
|
427
|
+
अपने एप्लिकेशन की नेविगेशन को वर्तमान locale का सम्मान करने के लिए, आप एक कस्टम `Links` कंपोनेंट बना सकते हैं। यह कंपोनेंट स्वचालित रूप से आंतरिक URLs के साथ वर्तमान भाषा का प्रीफिक्स जोड़ता है, जो **SEO और पेज की खोज योग्यता** के लिए आवश्यक है।
|
|
428
|
+
|
|
429
|
+
```vue fileName="components/Links.vue"
|
|
600
430
|
<script setup lang="ts">
|
|
601
|
-
import { computed } from "vue";
|
|
602
431
|
import { getLocalizedUrl } from "intlayer";
|
|
603
432
|
import { useLocale } from "vue-intlayer";
|
|
604
433
|
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
434
|
+
interface Props {
|
|
435
|
+
href: string;
|
|
436
|
+
locale?: string;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
const props = defineProps<Props>();
|
|
611
440
|
|
|
612
|
-
const { locale } = useLocale();
|
|
441
|
+
const { locale: currentLocale } = useLocale();
|
|
613
442
|
|
|
614
|
-
//
|
|
615
|
-
const
|
|
443
|
+
// अंतिम पथ की गणना करें
|
|
444
|
+
const finalPath = computed(() => {
|
|
445
|
+
// 1. जांचें कि लिंक बाहरी है या नहीं
|
|
446
|
+
const isExternal = /^https?:\/\//.test(props.href || "");
|
|
616
447
|
|
|
617
|
-
//
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
448
|
+
// 2. यदि बाहरी है, तो जैसा है वैसा लौटाएं (NuxtLink <a> टैग जनरेशन को संभालता है)
|
|
449
|
+
if (isExternal) return props.href;
|
|
450
|
+
|
|
451
|
+
// 3. यदि आंतरिक है, तो URL को स्थानीयकृत करें
|
|
452
|
+
const targetLocale = props.locale || currentLocale.value;
|
|
453
|
+
return getLocalizedUrl(props.href, targetLocale);
|
|
454
|
+
});
|
|
621
455
|
</script>
|
|
456
|
+
|
|
457
|
+
<template>
|
|
458
|
+
<NuxtLink :to="finalPath" v-bind="$attrs">
|
|
459
|
+
<slot />
|
|
460
|
+
</NuxtLink>
|
|
461
|
+
</template>
|
|
622
462
|
```
|
|
623
463
|
|
|
624
|
-
फिर इस
|
|
464
|
+
फिर इस कंपोनेंट का उपयोग अपने एप्लिकेशन में पूरे स्थान पर करें:
|
|
465
|
+
|
|
466
|
+
```vue fileName="layouts/default.vue"
|
|
467
|
+
<script setup lang="ts">
|
|
468
|
+
import Links from "~/components/Links.vue";
|
|
469
|
+
import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
|
|
470
|
+
</script>
|
|
625
471
|
|
|
626
|
-
```vue fileName="pages/index.vue"
|
|
627
472
|
<template>
|
|
628
473
|
<div>
|
|
629
|
-
<
|
|
630
|
-
|
|
631
|
-
</
|
|
632
|
-
<
|
|
633
|
-
|
|
634
|
-
</
|
|
474
|
+
<header>
|
|
475
|
+
<LocaleSwitcher />
|
|
476
|
+
</header>
|
|
477
|
+
<main>
|
|
478
|
+
<slot />
|
|
479
|
+
</main>
|
|
480
|
+
|
|
481
|
+
<Links href="/">होम</Links>
|
|
482
|
+
<Links href="/about">अबाउट</Links>
|
|
635
483
|
</div>
|
|
636
484
|
</template>
|
|
637
|
-
|
|
638
|
-
<script setup lang="ts">
|
|
639
|
-
import { useIntlayer } from "vue-intlayer";
|
|
640
|
-
import LocalizedLink from "~/components/LocalizedLink.vue";
|
|
641
|
-
|
|
642
|
-
const content = useIntlayer("home");
|
|
643
|
-
</script>
|
|
644
485
|
```
|
|
645
486
|
|
|
487
|
+
> `NuxtLink` का उपयोग स्थानीयकृत पथों के साथ करने से, आप सुनिश्चित करते हैं कि:
|
|
488
|
+
>
|
|
489
|
+
> - सर्च इंजन आपकी पृष्ठों के सभी भाषा संस्करणों को क्रॉल और इंडेक्स कर सकते हैं
|
|
490
|
+
> - उपयोगकर्ता सीधे स्थानीयकृत URLs साझा कर सकते हैं
|
|
491
|
+
> - ब्राउज़र इतिहास स्थानीयकृत-पूर्वसर्ग वाले URLs के साथ सही ढंग से काम करता है
|
|
492
|
+
|
|
646
493
|
### (वैकल्पिक) चरण 9: मेटाडेटा और SEO को संभालना
|
|
647
494
|
|
|
648
|
-
Nuxt उत्कृष्ट SEO क्षमताएँ प्रदान करता है। आप स्थानीयकृत मेटाडेटा को संभालने के लिए
|
|
495
|
+
Nuxt `useHead` कॉम्पोज़ेबल (स्वतः-आयातित) के माध्यम से उत्कृष्ट SEO क्षमताएँ प्रदान करता है। आप Intlayer का उपयोग स्थानीयकृत मेटाडेटा को संभालने के लिए कर सकते हैं, `.raw` या `.value` एक्सेसर का उपयोग करके प्रिमिटिव स्ट्रिंग मान प्राप्त करने के लिए:
|
|
649
496
|
|
|
650
497
|
```vue fileName="pages/about.vue"
|
|
651
498
|
<script setup lang="ts">
|
|
652
|
-
import {
|
|
653
|
-
import { getIntlayer } from "intlayer";
|
|
654
|
-
import { useLocale } from "vue-intlayer";
|
|
499
|
+
import { useIntlayer } from "vue-intlayer";
|
|
655
500
|
|
|
656
|
-
|
|
657
|
-
const content =
|
|
501
|
+
// useHead Nuxt में स्वतः-आयातित है
|
|
502
|
+
const content = useIntlayer("about-page");
|
|
658
503
|
|
|
659
|
-
|
|
660
|
-
title: content.
|
|
661
|
-
|
|
504
|
+
useHead({
|
|
505
|
+
title: content.metaTitle.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
|
|
506
|
+
meta: [
|
|
507
|
+
{
|
|
508
|
+
name: "description",
|
|
509
|
+
content: content.metaDescription.raw, // प्रिमिटिव स्ट्रिंग एक्सेस के लिए .raw का उपयोग करें
|
|
510
|
+
},
|
|
511
|
+
],
|
|
662
512
|
});
|
|
663
513
|
</script>
|
|
664
514
|
|
|
665
515
|
<template>
|
|
666
|
-
<
|
|
667
|
-
<h1>{{ content.pageTitle }}</h1>
|
|
668
|
-
<p>{{ content.pageContent }}</p>
|
|
669
|
-
</div>
|
|
516
|
+
<h1><content.title /></h1>
|
|
670
517
|
</template>
|
|
671
518
|
```
|
|
672
519
|
|
|
673
|
-
|
|
520
|
+
> वैकल्पिक रूप से, आप Vue reactivity के बिना कंटेंट प्राप्त करने के लिए `import { getIntlayer } from "intlayer"` फ़ंक्शन का उपयोग कर सकते हैं।
|
|
521
|
+
|
|
522
|
+
> **कंटेंट मानों तक पहुँच:**
|
|
523
|
+
>
|
|
524
|
+
> - प्रिमिटिव स्ट्रिंग मान प्राप्त करने के लिए `.raw` का उपयोग करें (गैर-रिएक्टिव)
|
|
525
|
+
> - रिएक्टिव मान प्राप्त करने के लिए `.value` का उपयोग करें
|
|
526
|
+
> - विज़ुअल एडिटर समर्थन के लिए `<content.key />` कंपोनेंट सिंटैक्स का उपयोग करें
|
|
527
|
+
|
|
528
|
+
संबंधित कंटेंट घोषणा बनाएँ:
|
|
674
529
|
|
|
675
|
-
```ts fileName="pages/about-
|
|
530
|
+
```ts fileName="pages/about-page.content.ts" contentDeclarationFormat="typescript"
|
|
676
531
|
import { t, type Dictionary } from "intlayer";
|
|
677
|
-
import type { useSeoMeta } from "nuxt/app";
|
|
678
532
|
|
|
679
|
-
const
|
|
680
|
-
key: "about-
|
|
533
|
+
const aboutPageContent = {
|
|
534
|
+
key: "about-page",
|
|
681
535
|
content: {
|
|
682
|
-
|
|
536
|
+
metaTitle: t({
|
|
683
537
|
en: "About Us - My Company",
|
|
684
538
|
fr: "À Propos - Ma Société",
|
|
685
539
|
es: "Acerca de Nosotros - Mi Empresa",
|
|
686
540
|
}),
|
|
687
|
-
|
|
541
|
+
metaDescription: t({
|
|
542
|
+
hi: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
|
|
688
543
|
en: "Learn more about our company and our mission",
|
|
689
544
|
fr: "En savoir plus sur notre société et notre mission",
|
|
690
545
|
es: "Conozca más sobre nuestra empresa y nuestra misión",
|
|
691
546
|
}),
|
|
547
|
+
title: t({
|
|
548
|
+
hi: "हमारे बारे में",
|
|
549
|
+
en: "About Us",
|
|
550
|
+
fr: "À Propos",
|
|
551
|
+
es: "Acerca de Nosotros",
|
|
552
|
+
}),
|
|
692
553
|
},
|
|
693
|
-
} satisfies Dictionary
|
|
554
|
+
} satisfies Dictionary;
|
|
694
555
|
|
|
695
|
-
export default
|
|
556
|
+
export default aboutPageContent;
|
|
696
557
|
```
|
|
697
558
|
|
|
698
|
-
```
|
|
559
|
+
```javascript fileName="pages/about-page.content.mjs" contentDeclarationFormat="esm"
|
|
699
560
|
import { t } from "intlayer";
|
|
700
561
|
|
|
701
562
|
/** @type {import('intlayer').Dictionary} */
|
|
702
|
-
const
|
|
703
|
-
key: "about-
|
|
563
|
+
const aboutPageContent = {
|
|
564
|
+
key: "about-page",
|
|
704
565
|
content: {
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
en: "
|
|
566
|
+
metaTitle: t({
|
|
567
|
+
hi: "हमारे बारे में - मेरी कंपनी",
|
|
568
|
+
en: "About Us - My Company",
|
|
708
569
|
fr: "À Propos - Ma Société",
|
|
709
570
|
es: "Acerca de Nosotros - Mi Empresa",
|
|
710
571
|
}),
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
en: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
|
|
572
|
+
metaDescription: t({
|
|
573
|
+
hi: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
|
|
714
574
|
fr: "En savoir plus sur notre société et notre mission",
|
|
715
575
|
es: "Conozca más sobre nuestra empresa y nuestra misión",
|
|
716
576
|
}),
|
|
577
|
+
title: t({
|
|
578
|
+
hi: "हमारे बारे में",
|
|
579
|
+
fr: "À Propos",
|
|
580
|
+
es: "Acerca de Nosotros",
|
|
581
|
+
}),
|
|
717
582
|
},
|
|
718
583
|
};
|
|
719
584
|
|
|
720
|
-
export default
|
|
585
|
+
export default aboutPageContent;
|
|
721
586
|
```
|
|
722
587
|
|
|
723
|
-
```
|
|
588
|
+
```javascript fileName="pages/about-page.content.cjs" contentDeclarationFormat="commonjs"
|
|
724
589
|
const { t } = require("intlayer");
|
|
725
590
|
|
|
726
591
|
/** @type {import('intlayer').Dictionary} */
|
|
727
|
-
const
|
|
728
|
-
key: "about-
|
|
592
|
+
const aboutPageContent = {
|
|
593
|
+
key: "about-page",
|
|
729
594
|
content: {
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
en: "हमारे बारे में - मेरी कंपनी",
|
|
595
|
+
metaTitle: t({
|
|
596
|
+
hi: "हमारे बारे में - मेरी कंपनी",
|
|
733
597
|
fr: "À Propos - Ma Société",
|
|
734
598
|
es: "Acerca de Nosotros - Mi Empresa",
|
|
735
599
|
}),
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
en: "
|
|
600
|
+
metaDescription: t({
|
|
601
|
+
hi: "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
|
|
602
|
+
en: "Learn more about our company and our mission",
|
|
739
603
|
fr: "En savoir plus sur notre société et notre mission",
|
|
740
604
|
es: "Conozca más sobre nuestra empresa y nuestra misión",
|
|
741
605
|
}),
|
|
606
|
+
title: t({
|
|
607
|
+
hi: "हमारे बारे में",
|
|
608
|
+
en: "About Us",
|
|
609
|
+
fr: "À Propos",
|
|
610
|
+
es: "Acerca de Nosotros",
|
|
611
|
+
}),
|
|
742
612
|
},
|
|
743
613
|
};
|
|
744
614
|
|
|
745
|
-
module.exports =
|
|
615
|
+
module.exports = aboutPageContent;
|
|
746
616
|
```
|
|
747
617
|
|
|
748
|
-
```json fileName="pages/about-
|
|
618
|
+
```json fileName="pages/about-page.content.json" contentDeclarationFormat="json"
|
|
749
619
|
{
|
|
750
|
-
"
|
|
620
|
+
"$schema": "https://intlayer.org/schema.json",
|
|
621
|
+
"key": "about-page",
|
|
751
622
|
"content": {
|
|
752
|
-
"
|
|
623
|
+
"metaTitle": {
|
|
753
624
|
"nodeType": "translation",
|
|
754
|
-
"
|
|
755
|
-
"
|
|
756
|
-
"en": "
|
|
625
|
+
"translation": {
|
|
626
|
+
"hi": "हमारे बारे में - मेरी कंपनी",
|
|
627
|
+
"en": "About Us - My Company",
|
|
757
628
|
"fr": "À Propos - Ma Société",
|
|
758
629
|
"es": "Acerca de Nosotros - Mi Empresa"
|
|
759
630
|
}
|
|
760
631
|
},
|
|
761
|
-
"
|
|
632
|
+
"metaDescription": {
|
|
762
633
|
"nodeType": "translation",
|
|
763
|
-
"
|
|
764
|
-
"
|
|
765
|
-
"en": "Learn more about our company and our mission",
|
|
634
|
+
"translation": {
|
|
635
|
+
"hi": "हमारी कंपनी और हमारे मिशन के बारे में अधिक जानें",
|
|
766
636
|
"fr": "En savoir plus sur notre société et notre mission",
|
|
767
637
|
"es": "Conozca más sobre nuestra empresa y nuestra misión"
|
|
768
638
|
}
|
|
639
|
+
},
|
|
640
|
+
"title": {
|
|
641
|
+
"nodeType": "translation",
|
|
642
|
+
"translation": {
|
|
643
|
+
"hi": "हमारे बारे में",
|
|
644
|
+
"fr": "À Propos",
|
|
645
|
+
"es": "Acerca de Nosotros"
|
|
646
|
+
}
|
|
769
647
|
}
|
|
770
648
|
}
|
|
771
649
|
}
|
|
772
650
|
```
|
|
773
651
|
|
|
774
|
-
### टाइपस्क्रिप्ट कॉन्फ़िगर करें
|
|
775
|
-
|
|
776
|
-
Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
|
|
777
|
-
|
|
778
|
-

|
|
779
|
-
|
|
780
|
-

|
|
781
|
-
|
|
782
|
-
सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में ऑटो-जेनरेटेड टाइप्स शामिल हैं।
|
|
783
|
-
|
|
784
|
-
```json5 fileName="tsconfig.json"
|
|
785
|
-
{
|
|
786
|
-
// ... आपके मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन
|
|
787
|
-
"include": [
|
|
788
|
-
// ... आपके मौजूदा TypeScript कॉन्फ़िगरेशन
|
|
789
|
-
".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकारों को शामिल करें
|
|
790
|
-
],
|
|
791
|
-
}
|
|
792
|
-
```
|
|
793
|
-
|
|
794
652
|
### Git कॉन्फ़िगरेशन
|
|
795
653
|
|
|
796
|
-
|
|
654
|
+
यह अनुशंसित है कि Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा किया जाए। इससे आप इन्हें अपनी Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
|
|
797
655
|
|
|
798
|
-
इसके लिए, आप अपनी `.gitignore`
|
|
656
|
+
इसके लिए, आप अपनी `.gitignore` फाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
|
|
799
657
|
|
|
800
658
|
```plaintext fileName=".gitignore"
|
|
801
|
-
# Intlayer द्वारा
|
|
659
|
+
# Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें
|
|
802
660
|
.intlayer
|
|
803
661
|
```
|
|
804
662
|
|
|
805
|
-
### VS
|
|
663
|
+
### VS Code एक्सटेंशन
|
|
806
664
|
|
|
807
|
-
Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन**
|
|
665
|
+
Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
|
|
808
666
|
|
|
809
667
|
[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
810
668
|
|
|
811
669
|
यह एक्सटेंशन प्रदान करता है:
|
|
812
670
|
|
|
813
|
-
-
|
|
814
|
-
-
|
|
815
|
-
-
|
|
816
|
-
-
|
|
671
|
+
- अनुवाद कुंजियों के लिए **ऑटोकम्प्लीशन**।
|
|
672
|
+
- गायब अनुवादों के लिए **रीयल-टाइम त्रुटि पहचान**।
|
|
673
|
+
- अनुवादित सामग्री के **इनलाइन पूर्वावलोकन**।
|
|
674
|
+
- अनुवादों को आसानी से बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।
|
|
817
675
|
|
|
818
|
-
|
|
676
|
+
एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक विवरण के लिए देखें [Intlayer VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension)।
|
|
819
677
|
|
|
820
678
|
---
|
|
821
679
|
|
|
822
680
|
### आगे बढ़ें
|
|
823
681
|
|
|
824
|
-
आगे बढ़ने के लिए, आप [
|
|
825
|
-
|
|
826
|
-
---
|
|
682
|
+
आगे बढ़ने के लिए, आप [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) को लागू कर सकते हैं या अपने कंटेंट को [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md) का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।
|