このページのコンテンツはAIを使用して翻訳されました。

    英語の元のコンテンツの最新バージョンを見る

    ファイル内容 / Intlayerでのファイル埋め込み

    ファイル埋め込みの仕組み

    Intlayerでは、file 関数を使用して外部ファイルの内容を辞書に埋め込むことができます。このアプローチにより、Intlayerがソースファイルを認識し、Intlayer Visual EditorやCMSとのシームレスな統合を可能にします。直接的な importrequire、または fs ファイル読み込み方法とは異なり、file を使用することで、ファイルが辞書に関連付けられ、ファイルが編集されるときにIntlayerが動的に内容を追跡し更新することができます。

    ファイル内容の設定

    Intlayerプロジェクトでファイル内容を埋め込むには、コンテンツモジュール内で file 関数を使用します。以下は、さまざまな実装例を示しています。

    TypeScript実装

    **/*.content.ts
    import { file, type Dictionary } from "intlayer";const myFileContent = {  key: "my_key",  content: {    myFile: file("./path/to/file.txt"),  },} satisfies Dictionary;export default myFileContent;

    ECMAScriptモジュール(ESM)実装

    CommonJS実装

    JSON設定

    React Intlayerでのファイル内容の使用

    埋め込まれたファイル内容をReactコンポーネントで使用するには、react-intlayer パッケージから useIntlayer フックをインポートして使用します。これにより、指定されたキーから内容を取得し、動的に表示することができます。

    **/*.tsx
    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;

    多言語Markdownの例

    多言語対応の編集可能なMarkdownファイルをサポートするには、filet() および md() と組み合わせて使用し、Markdownコンテンツファイルの異なる言語バージョンを定義します。

    **/*.content.ts
    import { file, t, md, type Dictionary } from "intlayer";const myMultilingualContent = {  key: "my_multilingual_key",  content: {    myContent: md(      t({        ja: file("src/components/test.ja.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 Visual EditorやCMSで使用する場合、システムはコンテンツが指定されたMarkdownファイルから来ていることを認識し、それらが編集可能であることを保証します。

    Intlayerがファイル内容を処理する方法

    file 関数はNode.jsの fs モジュールに基づいており、指定されたファイルの内容を読み取り、辞書に挿入します。Intlayer Visual EditorやCMSと組み合わせて使用する場合、Intlayerは辞書とファイルの関係を追跡できます。これにより、以下が可能になります:

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

    追加リソース

    ファイル埋め込みの設定と使用に関する詳細は、以下のリソースを参照してください:

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

    このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

    ドキュメントへのGitHubリンク