फाइल कंटेंट / Intlayer में फाइलों को एम्बेड करना

Intlayer में, file फ़ंक्शन एक शब्दकोश में बाहरी फाइल कंटेंट को एम्बेड करने की अनुमति देता है। यह दृष्टिकोण सुनिश्चित करता है कि Intlayer स्रोत फाइल को पहचानता है, जिससे Intlayer Visual Editor और CMS के साथ seamless integration संभव हो जाती है।

फ़ाइल एम्बेडिंग कैसे काम करता है

Intlayer में, file फ़ंक्शन बाहरी फ़ाइल सामग्री को एक शब्दकोश में एम्बेड करने की अनुमति देता है। यह तरीका सुनिश्चित करता है कि Intlayer स्रोत फ़ाइल को पहचानता है, जिससे Intlayer विज़ुअल एडिटर और CMS के साथ सहज एकीकरण संभव होता है। सीधे import, require, या fs फ़ाइल पढ़ने के तरीकों के विपरीत, file का उपयोग फ़ाइल को शब्दकोश के साथ जोड़ता है, जिससे Intlayer फ़ाइल संपादित होने पर सामग्री को गतिशील रूप से ट्रैक और अपडेट कर सकता है।

फ़ाइल सामग्री सेटअप करना

अपने Intlayer प्रोजेक्ट में फ़ाइल सामग्री एम्बेड करने के लिए, सामग्री मॉड्यूल में file फ़ंक्शन का उपयोग करें। नीचे विभिन्न कार्यान्वयन दिखाने वाले उदाहरण दिए गए हैं।

import { file, type Dictionary } from "intlayer";

const myFileContent = {
  key: "my_key",
  content: {
    myFile: file("./path/to/file.txt"),
  },
} satisfies Dictionary;

export default myFileContent;

React Intlayer में फ़ाइल सामग्री का उपयोग करना

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { myFile } = useIntlayer("my_key");
</script>

<template>
  <div>
    <pre>{{ myFile }}</pre>
  </div>
</template>

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my_key");
</script>

<div>
  <pre>{$content.myFile}</pre>
</div>

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const FileComponent: Component = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-file",
  template: `
    <div>
      <pre>{{ content().myFile }}</pre>
    </div>
  `,
})
export class FileComponent {
  content = useIntlayer("my_key");
}

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
  document.getElementById("file-content")!.textContent = newContent.myFile;
});

// Initial render
document.getElementById("file-content")!.textContent = content.myFile;

बहुभाषी मार्कडाउन उदाहरण

बहुभाषी संपादन योग्य मार्कडाउन फ़ाइलों का समर्थन करने के लिए, आप file को t() और md() के संयोजन में उपयोग कर सकते हैं ताकि मार्कडाउन सामग्री फ़ाइल के विभिन्न भाषा संस्करणों को परिभाषित किया जा सके।

import { file, t, md, type Dictionary } from "intlayer";

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        en: file("src/components/test.en.md"),
        fr: file("src/components/test.fr.md"),
        es: file("src/components/test.es.md"),
      })
    ),
  },
} satisfies Dictionary;

export default myMultilingualContent;

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

विभिन्न प्रकार के पाथ

file फ़ंक्शन का उपयोग करते समय, आप एम्बेड करने के लिए फ़ाइल को निर्दिष्ट करने के लिए विभिन्न प्रकार के पाथ का उपयोग कर सकते हैं।

• file("./path/to/file.txt") - वर्तमान फ़ाइल के सापेक्ष पाथ
• file("path/to/file.txt") - प्रोजेक्ट रूट डायरेक्टरी के सापेक्ष पाथ
• file("/users/username/path/to/file.txt") - पूर्ण पाथ

Intlayer फ़ाइल सामग्री को कैसे संभालता है

file फ़ंक्शन Node.js के fs मॉड्यूल पर आधारित है जो निर्दिष्ट फ़ाइल की सामग्री को पढ़ता है और इसे शब्दकोश में सम्मिलित करता है। जब इसे Intlayer विज़ुअल एडिटर या CMS के साथ संयोजन में उपयोग किया जाता है, तो Intlayer शब्दकोश और फ़ाइल के बीच संबंध को ट्रैक कर सकता है। इससे Intlayer को निम्नलिखित करने की अनुमति मिलती है:

• पहचानना कि सामग्री किसी विशिष्ट फ़ाइल से उत्पन्न होती है।
• जब लिंक की गई फ़ाइल संपादित की जाती है तो स्वचालित रूप से शब्दकोश की सामग्री को अपडेट करना।
• फ़ाइल और शब्दकोश के बीच समन्वय सुनिश्चित करें, जिससे सामग्री की अखंडता बनी रहे।

अतिरिक्त संसाधन

Intlayer में फ़ाइल एम्बेडिंग को कॉन्फ़िगर करने और उपयोग करने के बारे में अधिक विवरण के लिए, निम्नलिखित संसाधनों को देखें:

• Intlayer CLI दस्तावेज़
• React Intlayer दस्तावेज़
• Next Intlayer दस्तावेज़
• Markdown सामग्री दस्तावेज़
• अनुवाद सामग्री दस्तावेज़

ये संसाधन फ़ाइल एम्बेडिंग, सामग्री प्रबंधन, और Intlayer के विभिन्न फ्रेमवर्क के साथ एकीकरण के बारे में और अधिक जानकारी प्रदान करते हैं।