Dosya İçeriği / Intlayer'da Dosyaları Gömme

Intlayer'da, file işlevi dış dosya içeriğini bir sözlüğe gömmeyi sağlar. Bu yaklaşım, Intlayer'ın kaynak dosyayı tanımasını sağlayarak Intlayer Visual Editor ve CMS ile kusursuz bir entegrasyon sağlar.

Dosya Gömme Nasıl Çalışır

Intlayer'da file fonksiyonu, harici dosya içeriğini bir sözlüğe gömmeyi sağlar. Bu yaklaşım, Intlayer'ın kaynak dosyayı tanımasını sağlar ve Intlayer Görsel Düzenleyici ve CMS ile sorunsuz entegrasyonu sağlar. Doğrudan import, require veya fs dosya okuma yöntemlerinden farklı olarak, file kullanmak dosyayı sözlükle ilişkilendirir ve Intlayer'ın dosya düzenlendiğinde içeriği dinamik olarak takip etmesine ve güncellemesine izin verir.

Dosya İçeriğini Ayarlama

Intlayer projenizde dosya içeriğini gömmek için, bir içerik modülünde file fonksiyonunu kullanın. Aşağıda farklı uygulamaları gösteren örnekler verilmiştir.

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 ile Dosya İçeriğini Kullanma

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;

Çok Dilli Markdown Örneği

Düzenlenebilir çok dilli Markdown dosyalarını desteklemek için, farklı dil sürümlerindeki bir Markdown içerik dosyasını tanımlamak üzere file'ı t() ve md() ile birlikte kullanabilirsiniz.

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;

Bu kurulum, içeriğin kullanıcının dil tercihine göre dinamik olarak alınmasına izin verir. Intlayer Görsel Düzenleyici veya CMS'de kullanıldığında, sistem içeriğin belirtilen Markdown dosyalarından geldiğini tanır ve düzenlenebilir kalmasını sağlar.

Farklı yol türleri

file fonksiyonunu kullanırken, yerleştirmek istediğiniz dosyayı belirtmek için farklı yol türlerini kullanabilirsiniz.

• file("./path/to/file.txt") - Geçerli dosyaya göre göreli yol
• file("path/to/file.txt") - Proje kök dizinine göre göreli yol
• file("/users/username/path/to/file.txt") - Mutlak yol

Intlayer Dosya İçeriğini Nasıl Yönetir

file fonksiyonu, belirtilen dosyanın içeriğini okumak ve sözlüğe eklemek için Node.js'in fs modülüne dayanır. Intlayer Görsel Düzenleyici veya CMS ile birlikte kullanıldığında, Intlayer sözlük ile dosya arasındaki ilişkiyi takip edebilir. Bu, Intlayer'ın şunları yapmasına izin verir:

• İçeriğin belirli bir dosyadan geldiğini tanımak.
• Bağlantılı dosya düzenlendiğinde sözlük içeriğini otomatik olarak güncellemek.
• Dosya ve sözlük arasında senkronizasyonu sağlamak ve içeriğin bütünlüğünü korumak.

Ek Kaynaklar

Intlayer'da dosya gömmenin yapılandırılması ve kullanımı hakkında daha fazla ayrıntı için aşağıdaki kaynaklara başvurun:

• Intlayer CLI Dokümantasyonu
• React Intlayer Dokümantasyonu
• Next Intlayer Dokümantasyonu
• Markdown İçerik Dokümantasyonu
• Çeviri İçerik Dokümantasyonu

Bu kaynaklar, dosya gömmesi, içerik yönetimi ve çeşitli çerçevelerle Intlayer'ın entegrasyonu hakkında daha fazla bilgi sağlar.