इंटलेयर और Vite और Vue के साथ अंतर्राष्ट्रीयकरण (i18n) शुरू करना

यह पैकेज विकास में है। अधिक जानकारी के लिए समस्या देखें। Vue के लिए Intlayer में अपनी रुचि दिखाने के लिए समस्या को लाइक करें।

Intlayer क्या है?

Intlayer एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।

Intlayer के साथ, आप कर सकते हैं:

• आसानी से अनुवाद प्रबंधित करें घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके।
• मेटाडेटा, रूट्स और सामग्री को गतिशील रूप से स्थानीयकृत करें।
• TypeScript समर्थन सुनिश्चित करें स्वचालित रूप से उत्पन्न प्रकारों के साथ, ऑटोकम्प्लीशन और त्रुटि पहचान में सुधार करें।
• उन्नत सुविधाओं का लाभ उठाएं, जैसे गतिशील लोकेल पहचान और स्विचिंग।

Vite और Vue एप्लिकेशन में Intlayer सेट अप करने के लिए चरण-दर-चरण गाइड

चरण 1: निर्भरता स्थापित करें

npm का उपयोग करके आवश्यक पैकेज स्थापित करें:

npm install intlayer vue-intlayer vite-intlayer

• intlayer

  मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपिलेशन, और CLI कमांड्स के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।

• vue-intlayer पैकेज जो Vue एप्लिकेशन के साथ Intlayer को एकीकृत करता है। यह Vue अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता और कंपोज़ेबल्स प्रदान करता है।

• vite-intlayer Vite बंडलर के साथ Intlayer को एकीकृत करने के लिए Vite प्लगइन शामिल करता है, साथ ही उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधित करने और URL रीडायरेक्शन को संभालने के लिए मिडलवेयर भी शामिल करता है।

चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // आपकी अन्य भाषाएँ    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्शन, कुकी नाम, आपकी सामग्री घोषणाओं का स्थान और एक्सटेंशन, कंसोल में Intlayer लॉग्स को अक्षम करना, और अधिक सेट कर सकते हैं। उपलब्ध पैरामीटरों की पूरी सूची के लिए कॉन्फ़िगरेशन दस्तावेज़ देखें।

चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [vue(), intlayerPlugin()],});

intlayerPlugin() Vite प्लगइन का उपयोग Vite के साथ Intlayer को एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।

चरण 4: अपनी सामग्री घोषित करें

अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएं और प्रबंधित करें:

import { t, type Dictionary } from "intlayer";const helloWorldContent = {  key: "helloworld",  content: {    count: t({      hi: "गिनती है ",      en: "count is ",      fr: "le compte est ",      es: "el recuento es ",    }),    edit: t({      hi: "संपादित करें <code>components/HelloWorld.vue</code> और HMR का परीक्षण करने के लिए सहेजें",      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",    }),    checkOut: t({      hi: "जाँच करें ",      en: "Check out ",      fr: "Vérifiez ",      es: "Compruebe ",    }),    officialStarter: t({      hi: ", आधिकारिक Vue + Vite स्टार्टर",      en: ", the official Vue + Vite starter",      fr: ", le starter officiel Vue + Vite",      es: ", el starter oficial Vue + Vite",    }),    learnMore: t({      hi: "Vue के लिए IDE समर्थन के बारे में और जानें ",      en: "Learn more about IDE Support for Vue in the ",      fr: "En savoir plus sur le support IDE pour Vue dans le ",      es: "Aprenda más sobre el soporte IDE para Vue en el ",    }),    vueDocs: t({      hi: "Vue डॉक्स स्केलिंग अप गाइड",      en: "Vue Docs Scaling up Guide",      fr: "Vue Docs Scaling up Guide",      es: "Vue Docs Scaling up Guide",    }),    readTheDocs: t({      hi: "अधिक जानने के लिए Vite और Vue लोगो पर क्लिक करें",      en: "Click on the Vite and Vue logos to learn more",      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",    }),  },} satisfies Dictionary;export default helloWorldContent;

const { t } = require("intlayer");

/* @type {import('intlayer').Dictionary} / const appContent = { key: "helloworld", content: { count: t({ hi: "गणना है ", en: "count is ", fr: "le compte est ", es: "el recuento es " }), edit: t({ hi: "संपादित करें components/HelloWorld.vue और HMR का परीक्षण करने के लिए सहेजें", en: "Edit components/HelloWorld.vue and save to test HMR", fr: "Éditez components/HelloWorld.vue et enregistrez pour tester HMR", es: "Edita components/HelloWorld.vue y guarda para probar HMR", }), checkOut: t({ hi: "जांचें ", en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }), officialStarter: t({ hi: "आधिकारिक Vue + Vite स्टार्टर", en: "the official Vue + Vite starter", fr: "le starter officiel Vue + Vite", es: "el starter oficial Vue + Vite", }), learnMore: t({ hi: "Vue के लिए IDE समर्थन के बारे में और जानें ", en: "Learn more about IDE Support for Vue in the ", fr: "En savoir plus sur le support IDE pour Vue dans le ", es: "Aprenda más sobre el soporte IDE para Vue en el ", }), vueDocs: t({ hi: "Vue Docs स्केलिंग अप गाइड", en: "Vue Docs Scaling up Guide", fr: "Vue Docs Scaling up Guide", es: "Vue Docs Scaling up Guide", }), readTheDocs: t({ hi: "अधिक जानने के लिए Vite और Vue लोगो पर क्लिक करें", en: "Click on the Vite and Vue logos to learn more", fr: "Cliquez sur les logos Vite et Vue pour en savoir plus", es: "Haga clic en los logotipos de Vite y Vue para obtener más información", }), }, };

module.exports = appContent;

आपकी सामग्री घोषणाएँ आपके एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं, जब तक वे contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./src) में शामिल हैं। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हैं (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx})। अधिक विवरण के लिए, सामग्री घोषणा दस्तावेज़ीकरण देखें।

• https://example.com/hi/about
• https://example.com/fr/about

फिर, एक राउटर कॉन्फ़िगरेशन बनाएं जो लोकेल-आधारित रूटिंग को संभाल सके:

import {  configuration,  getPathWithoutLocale,  localeFlatMap,  type Locales,} from 'intlayer';import { createIntlayerClient } from 'vue-intlayer';import { createRouter, createWebHistory } from 'vue-router';import HomeView from './views/home/HomeView.vue';import RootView from './views/root/Root.vue';// अंतर्राष्ट्रीयकरण कॉन्फ़िगरेशन प्राप्त करेंconst { internationalization, middleware } = configuration;const { defaultLocale } = internationalization;/** * लोकेल-विशिष्ट पथ और मेटाडेटा के साथ रूट्स घोषित करें। */const routes = localeFlatMap((localizedData) => [  {    path: `${localizedData.urlPrefix}/`,    name: `Root-${localizedData.locale}`,    component: RootView,    meta: {      locale: localizedData.locale,    },  },  {    path: `${localizedData.urlPrefix}/home`,    name: `Home-${localizedData.locale}`,    component: HomeView,    meta: {      locale: localizedData.locale,    },  },]);// राउटर इंस्टेंस बनाएंexport const router = createRouter({  history: createWebHistory(),  routes,});// लोकेल हैंडलिंग के लिए नेविगेशन गार्ड जोड़ेंrouter.beforeEach((to, _from, next) => {  const client = createIntlayerClient();  const metaLocale = to.meta.locale as Locales | undefined;  if (metaLocale) {    // रूट मेटा में परिभाषित लोकेल का पुनः उपयोग करें    client.setLocale(metaLocale);    next();  } else {    // फॉलबैक: मेटा में कोई लोकेल नहीं, संभवतः असंगत रूट    // वैकल्पिक: 404 को संभालें या डिफ़ॉल्ट लोकेल पर रीडायरेक्ट करें    client.setLocale(defaultLocale);    if (middleware.prefixDefault) {      next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);    } else {      next(getPathWithoutLocale(to.path));    }  }});

नाम का उपयोग राउटर में रूट की पहचान करने के लिए किया जाता है। यह सभी रूट्स में अद्वितीय होना चाहिए ताकि संघर्ष से बचा जा सके और उचित नेविगेशन और लिंकिंग सुनिश्चित हो सके।

फिर, अपने मुख्य main.js फ़ाइल में राउटर को रजिस्टर करें:

import { createApp } from "vue";import App from "./App.vue";import { router } from "./router";import "./style.css";const app = createApp(App);// ऐप में राउटर जोड़ेंapp.use(router);// ऐप को माउंट करेंapp.mount("#app");

फिर अपने App.vue फ़ाइल को अपडेट करें ताकि RouterView कंपोनेंट को रेंडर किया जा सके। यह कंपोनेंट वर्तमान रूट के लिए मेल खाने वाले कंपोनेंट को प्रदर्शित करेगा।

<script setup lang="ts">import LocaleSwitcher from "@components/LocaleSwitcher.vue";</script><template>  <nav>    <LocaleSwitcher />  </nav>  <RouterView /></template>

साथ ही, आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए intLayerMiddlewarePlugin का उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान लोकेल को स्वचालित रूप से पहचान लेगा और उपयुक्त लोकेल कुकी सेट करेगा। यदि कोई लोकेल निर्दिष्ट नहीं है, तो यह उपयोगकर्ता की ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त लोकेल निर्धारित करेगा। यदि कोई लोकेल नहीं पहचाना गया, तो यह डिफ़ॉल्ट लोकेल पर रीडायरेक्ट करेगा।

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [vue(), intlayerPlugin(), intLayerMiddlewarePlugin()],});

(वैकल्पिक) चरण 8: लोकेल बदलने पर URL बदलें

जब उपयोगकर्ता भाषा बदलता है, तो URL को स्वचालित रूप से अपडेट करने के लिए, आप LocaleSwitcher कंपोनेंट को Vue Router का उपयोग करने के लिए संशोधित कर सकते हैं:

<template>  <div class="locale-switcher">    <select v-model="selectedLocale" @change="changeLocale">      <option v-for="loc in availableLocales" :key="loc" :value="loc">        {{ getLocaleName(loc) }}      </option>    </select>  </div></template><script setup lang="ts">import { ref, watch } from "vue";import { useRouter } from "vue-router";import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";// Vue Router प्राप्त करेंconst router = useRouter();// लोकेल जानकारी और setLocale फ़ंक्शन प्राप्त करेंconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // वर्तमान रूट प्राप्त करें और एक स्थानीयकृत URL बनाएं    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // पेज को रीलोड किए बिना स्थानीयकृत रूट पर नेविगेट करें    router.push(localizedPath);  },});// चयनित लोकेल को ref के साथ ट्रैक करेंconst selectedLocale = ref(locale.value);// चयन बदलने पर लोकेल अपडेट करेंconst changeLocale = () => {  setLocale(selectedLocale.value);};// चयनित लोकेल को वैश्विक लोकेल के साथ सिंक में रखेंwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

टिप: बेहतर SEO और एक्सेसिबिलिटी के लिए, <a href="/fr/home" hreflang="fr"> जैसे टैग का उपयोग करें ताकि स्थानीयकृत पेजों से लिंक किया जा सके, जैसा कि चरण 10 में दिखाया गया है। यह सर्च इंजन को भाषा-विशिष्ट URL को सही ढंग से खोजने और इंडेक्स करने की अनुमति देता है। SPA व्यवहार को बनाए रखने के लिए, आप @click.prevent के साथ डिफ़ॉल्ट नेविगेशन को रोक सकते हैं, useLocale का उपयोग करके लोकेल बदल सकते हैं, और Vue Router का उपयोग करके प्रोग्रामेटिक रूप से नेविगेट कर सकते हैं।

<ol class="divide-text/20 divide-y divide-dashed overflow-y-auto p-1">  <li>    <a      hreflang="x-default"      aria-label="Switch to English"      target="_self"      aria-current="page"      href="/hi/doc/get-started"    >      <div>        <div><span dir="ltr" lang="en">English</span><span>English</span></div>        <span>EN</span>      </div>    </a>  </li>  <li>    <a      hreflang="es"      aria-label="Switch to Spanish"      target="_self"      href="/es/doc/get-started"    >      <div>        <span dir="ltr" lang="es">Español</span><span>Spanish</span>        <span>ES</span>      </div>    </a>  </li></ol>

(वैकल्पिक) चरण 9: HTML भाषा और दिशा विशेषताओं को स्विच करें

जब आपका एप्लिकेशन कई भाषाओं का समर्थन करता है, तो <html> टैग की lang और dir विशेषताओं को वर्तमान लोकेल के अनुसार अपडेट करना महत्वपूर्ण है। ऐसा करने से यह सुनिश्चित होता है:

• एक्सेसिबिलिटी: स्क्रीन रीडर और सहायक तकनीकें सही lang विशेषता पर निर्भर करती हैं ताकि सामग्री को सही ढंग से उच्चारित और व्याख्या किया जा सके।
• पाठ रेंडरिंग: dir (दिशा) विशेषता यह सुनिश्चित करती है कि पाठ सही क्रम में रेंडर किया गया है (जैसे, अंग्रेजी के लिए बाएं-से-दाएं, अरबी या हिब्रू के लिए दाएं-से-बाएं), जो पठनीयता के लिए आवश्यक है।
• SEO: सर्च इंजन आपके पेज की भाषा निर्धारित करने के लिए lang विशेषता का उपयोग करते हैं, जिससे खोज परिणामों में सही स्थानीयकृत सामग्री प्रदान करने में मदद मिलती है।

इन विशेषताओं को लोकेल बदलने पर गतिशील रूप से अपडेट करके, आप सभी समर्थित भाषाओं में उपयोगकर्ताओं के लिए एक सुसंगत और सुलभ अनुभव सुनिश्चित करते हैं।

import { watch } from "vue";import { useLocale } from "vue-intlayer";import { getHTMLTextDir } from "intlayer";/** * यह एक कंपोज़ेबल है जो HTML <html> तत्व के `lang` और `dir` गुणों को * वर्तमान लोकेल के आधार पर अपडेट करता है। * * @example * // अपने App.vue या एक वैश्विक घटक में * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes' * * useI18nHTMLAttributes() */export function useI18nHTMLAttributes() {  const { locale } = useLocale();  // जब भी लोकेल बदलता है, HTML गुणों को अपडेट करें  watch(    () => locale.value,    (newLocale) => {      if (!newLocale) return;      // भाषा गुण को अपडेट करें      document.documentElement.lang = newLocale;      // टेक्स्ट दिशा सेट करें (ltr अधिकांश भाषाओं के लिए, rtl अरबी, हिब्रू आदि के लिए)      document.documentElement.dir = getHTMLTextDir(newLocale);    },    { immediate: true }  );}

अपने App.vue या एक वैश्विक घटक में इस कंपोज़ेबल का उपयोग करें:

<script setup lang="ts">import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";// वर्तमान लोकेल के आधार पर HTML गुण लागू करेंuseI18nHTMLAttributes();</script><template>  <!-- आपका ऐप टेम्पलेट --></template>

(वैकल्पिक) चरण 10: एक स्थानीयकृत लिंक घटक बनाना

यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन का नेविगेशन वर्तमान लोकेल का सम्मान करता है, आप एक कस्टम Link घटक बना सकते हैं। यह घटक स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है। उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पृष्ठ के लिंक पर क्लिक करता है, तो उन्हें /fr/about पर रीडायरेक्ट किया जाता है, न कि /about पर।

यह व्यवहार कई कारणों से उपयोगी है:

• SEO और उपयोगकर्ता अनुभव: स्थानीयकृत URL खोज इंजन को भाषा-विशिष्ट पृष्ठों को सही ढंग से इंडेक्स करने में मदद करते हैं और उपयोगकर्ताओं को उनकी पसंदीदा भाषा में सामग्री प्रदान करते हैं।
• संगति: अपने एप्लिकेशन में एक स्थानीयकृत लिंक का उपयोग करके, आप यह सुनिश्चित करते हैं कि नेविगेशन वर्तमान लोकेल के भीतर रहता है, अप्रत्याशित भाषा स्विच को रोकता है।
• रखरखाव: URL प्रबंधन को सरल बनाने के लिए स्थानीयकरण लॉजिक को एक ही घटक में केंद्रीकृत करना, आपके कोडबेस को बनाए रखना और विस्तार करना आसान बनाता है।

<template>  <a :href="localizedHref" v-bind="$attrs">    <slot />  </a></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  href: {    type: String,    required: true,  },});const { locale } = useLocale();// जांचें कि लिंक बाहरी है या नहींconst isExternalLink = computed(() => /^https?:///.test(props.href || ""));// आंतरिक लिंक के लिए एक स्थानीयकृत href बनाएंconst localizedHref = computed(() =>  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value));</script>

Vue राउटर के साथ उपयोग के लिए, एक राउटर-विशिष्ट संस्करण बनाएं:

<template>  <router-link :to="localizedTo" v-bind="$attrs">    <slot />  </router-link></template><script setup lang="ts">import { computed } from "vue";import { getLocalizedUrl } from "intlayer";import { useLocale } from "vue-intlayer";const props = defineProps({  to: {    type: [String, Object],    required: true,  },});const { locale } = useLocale();// राउटर-लिंक के लिए स्थानीयकृत to-प्रॉप बनाएंconst localizedTo = computed(() => {  if (typeof props.to === "string") {    return getLocalizedUrl(props.to, locale.value);  } else {    // यदि 'to' एक ऑब्जेक्ट है, तो पथ प्रॉपर्टी को स्थानीयकृत करें    return {      ...props.to,      path: getLocalizedUrl(props.to.path ?? "/", locale.value),    };  }});</script>

अपने एप्लिकेशन में इन घटकों का उपयोग करें:

<template>  <div>    <!-- Vue राउटर -->    <RouterLink to="/">Root</RouterLink>    <RouterLink to="/home">Home</RouterLink>    <!-- अन्य -->    <Link href="/">Root</Link>    <Link href="/home">Home</Link>  </div></template><script setup lang="ts">import Link from "@components/Link.vue";import RouterLink from "@components/RouterLink.vue";</script>

टाइपस्क्रिप्ट कॉन्फ़िगरेशन

Intlayer टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल वृद्धि का उपयोग करता है।

सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में स्वचालित रूप से उत्पन्न प्रकार शामिल हैं।

{  // ... आपकी मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन  "include": [    // ... आपकी मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन    ".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकार शामिल करें  ],}

गिट कॉन्फ़िगरेशन

Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करना अनुशंसित है। यह आपको उन्हें अपने गिट रिपॉजिटरी में कमिट करने से बचने की अनुमति देता है।

इसके लिए, आप अपनी .gitignore फ़ाइल में निम्न निर्देश जोड़ सकते हैं:

# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें.intlayer

VS कोड एक्सटेंशन

Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS कोड एक्सटेंशन इंस्टॉल कर सकते हैं।

VS कोड मार्केटप्लेस से इंस्टॉल करें

यह एक्सटेंशन प्रदान करता है:

• अनुवाद कुंजियों के लिए ऑटो-कम्प्लीशन।
• गायब अनुवादों के लिए रियल-टाइम त्रुटि पहचान।
• अनुवादित सामग्री के इनलाइन पूर्वावलोकन।
• अनुवादों को आसानी से बनाने और अपडेट करने के लिए त्वरित क्रियाएं।

एक्सटेंशन का उपयोग कैसे करें, इस पर अधिक विवरण के लिए Intlayer VS कोड एक्सटेंशन दस्तावेज़ देखें।

आगे बढ़ें

आगे बढ़ने के लिए, आप विज़ुअल एडिटर को लागू कर सकते हैं या CMS का उपयोग करके अपनी सामग्री को बाहरी रूप से प्रबंधित कर सकते हैं।