محتوى الملف / تضمين الملفات في Intlayer

كيف يعمل تضمين الملفات

في 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;

مثال على ملفات Markdown متعددة اللغات

لدعم ملفات Markdown القابلة للتحرير متعددة اللغات، يمكنك استخدام file مع t() و md() لتعريف نسخ مختلفة من ملف محتوى Markdown بلغات متعددة.

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

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        ar: file("src/components/test.ar.md"),
        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 المحددة ويضمن بقاؤها قابلة للتحرير.

كيف يتعامل Intlayer مع محتوى الملفات

تعتمد دالة file على وحدة fs الخاصة بـ Node.js لقراءة محتوى الملف المحدد وإدراجه في القاموس. عند استخدامها بالتزامن مع محرر Intlayer المرئي أو نظام إدارة المحتوى، يمكن لـ Intlayer تتبع العلاقة بين القاموس والملف. هذا يسمح لـ Intlayer بـ:

• التعرف على أن المحتوى أصله من ملف محدد.
• تحديث محتوى القاموس تلقائيًا عند تعديل الملف المرتبط.
• ضمان التزامن بين الملف والقاموس، مع الحفاظ على سلامة المحتوى.

موارد إضافية

لمزيد من التفاصيل حول تكوين واستخدام تضمين الملفات في Intlayer، يرجى الرجوع إلى الموارد التالية:

• توثيق Intlayer CLI
• توثيق React Intlayer
• توثيق Next Intlayer
• توثيق محتوى Markdown
• توثيق محتوى الترجمة

توفر هذه الموارد رؤى إضافية حول تضمين الملفات، إدارة المحتوى، وتكامل Intlayer مع أُطُر العمل المختلفة.