ファイルコンテンツ / 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({
        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関数はNode.jsのfsモジュールに基づいており、指定されたファイルの内容を読み取り、辞書に挿入します。IntlayerのビジュアルエディターやCMSと組み合わせて使用される場合、Intlayerは辞書とファイルの関係を追跡できます。これによりIntlayerは以下を可能にします：

• コンテンツが特定のファイルから来ていることを認識する。
• リンクされたファイルが編集されたときに辞書のコンテンツを自動的に更新する。
• ファイルと辞書の同期を確保し、コンテンツの整合性を維持します。

追加リソース

Intlayerでのファイル埋め込みの設定および使用方法の詳細については、以下のリソースを参照してください：

• Intlayer CLI ドキュメント
• React Intlayer ドキュメント
• Next Intlayer ドキュメント
• Markdown コンテンツ ドキュメント
• ファイルと辞書の同期を確保し、コンテンツの整合性を保持します。

追加リソース

Intlayerでのファイル埋め込みの設定および使用方法の詳細については、以下のリソースを参照してください：

• Intlayer CLI ドキュメント
• React Intlayer ドキュメント
• Next Intlayer ドキュメント
• Markdown コンテンツ ドキュメント
• 翻訳コンテンツ ドキュメント

これらのリソースは、ファイル埋め込み、コンテンツ管理、およびIntlayerのさまざまなフレームワークとの統合に関するさらなる洞察を提供します。