WordPressエディター內(nèi)にドキュメントを直接表示する必要がありますか？この記事では、合理化されたドキュメント管理とローカリゼーションのマークダウンを活用して、最適なアプローチを調(diào)査します。

ReactコンポーネントとHTMLは直感的に見えるかもしれませんが、広範(fàn)なドキュメントのためにすぐに扱いにくく維持するのが難しくなる可能性があります。モーダルのドキュメントを示す以前の記事のこの例を考えてみましょう。

 const cachecontroldescription =（）=> {
  戻る （
    <p>キャッシュコントロールヘッダーに<code>no-store if the max-age is 0</code>
  ））
}</p>

Markdownはよりクリーンなソリューションを提供します。上記は、マークダウンファイル（ /docs/cache-control.md ）にリファクタリングできます。

キャッシュコントロールヘッダーには、リクエストに関連するすべてのフィールド/ディレクティブからの最小最大年齢の値が含まれます。

Markdown vs. HTML：利點(diǎn)と短所

Markdownはプロセスを簡(jiǎn)素化しますが、ポットファイルを使用して簡(jiǎn)単に翻訳できるReactコンポーネントとは異なり、組み込みのローカリゼーションサポートがありません。ローカリゼーションは非常に重要であるため、この制限に対処します。この記事は、2つの重要な目的を達(dá)成することを目的としています。

1. WordPressエディターブロック內(nèi)のドキュメントにMarkdownを使用します。
2. ユーザーの言語(yǔ)に基づいてドキュメント翻訳を?qū)g裝します。

マークダウンコンテンツのロード

/docs/cache-control.mdが作成されていると、HTMLコンテンツをインポートおよびレンダリングできます。

 '../docs/cache-control.md'からのcachecontroldocumentationをインポートします。

const cachecontroldescription =（）=> {
  戻る （
    <div dangerouslysetinnerhtml="{{" __html: cachecontroldocumentation></div>
  ）;
}

これは、WordPressエディターのコアモジュールバンドラー（バージョン4.42）であるWebpackに依存しています。 MarkdownとHTMLローダーを処理するように、Webpackの構(gòu)成をカスタマイズします。

ブロックのルートでwebpack.config.jsを作成します。

 const defaultconfig = require（ '@wordpress/scripts/config/webpack.config'）;

module.exports = {
  ... defaultconfig、
  モジュール：{
    ... defaultconfig.module、
    ルール：[
      ... defaultconfig.module.rules、
      {
        テスト：/\.md$/、
        使用： [
          {Loader： "HTML-Roader"}、
          {ローダー：「マークダウンローダー」}
        ]
      }
    ]、、
  }、
};

必要なパッケージをインストールします：

 npmインストール -  save-dev markdown-roader html-roader

改善された組織については、Webpackエイリアス（ @docsを指す/docs ）を追加します。

 const path = require（ 'path'）;
config.resolve.alias ['@docs'] = path.resolve（process.cwd（）、 'docs/'）;

今では輸入が簡(jiǎn)素化されます：

 '@docs/cache-control.md'からのcachecontroldocumentationをインポートします。

ローカライズドキュメント

直接マークダウンの翻訳は実行不可能であるため、言語(yǔ)固有のマークダウンファイルを作成します。

• /docs/en/cache-control.md
• /docs/fr/cache-control.md
• /docs/zh/cache-control.mdなど。

このアプローチは、領(lǐng)域固有のバリエーション（ /docs/en_US/cache-control.mdなど）を処理することもできます。

ユーザー言語(yǔ)の取得

ユーザーの言語(yǔ)はget_locale()を使用して取得され、解析されて言語(yǔ)コードを抽出します。

関數(shù)get_locale_language（）：string {
  $ localeparts = Explode（ '_'、get_locale（））;
  $ localeparts [0]を返します。
}

この言語(yǔ)コードはwp_localize_script()を介してブロックに渡されます。

 wp_localize_script（
  $ blockscriptregistrationName、
  「graphqlapicachecontrol」、
  [
    'userlang' => get_locale_language（）、
  ]
）;

window.graphqlApiCacheControl.userLangとしてブロックにアクセスできるようになりました。

動(dòng)的なインポート

ユーザーの言語(yǔ)は実行時(shí)にのみ知られているため、動(dòng)的なインポートを使用します。

 const lang = window.graphqlapicachecontrol.userlang;
import（ `@docs/$ {lang}/cache-control.md`）.then（module => {
  // ...
}）;

コンテンツはobj.defaultを介してアクセスされます。

 const cachecontrolcontent = import（ `@docs/$ {lang}/cache-control.md`）.then（obj => obj.default）;

これは、 getMarkdownContent関數(shù)にカプセル化されています。

 const getMarkDownContent =（filename、lang）=> {
  return import（/ * webpackchunkname： "docs/[request]" */`@docs/$ {lang}/$ {filename} .md`）
    .then（obj => obj.default）;
};

/* webpackChunkName: "docs/[request]" */ commentは、組織化されたチャンク管理を保証します。

パブリックパスを設(shè)定します

publicPathは、Webpackが動(dòng)的にロードされたチャンクを見つけるために重要です。これは、ハードコーディング、環(huán)境変數(shù)を介して設(shè)定する、または実行時(shí)に渡されることができます。この例では、渡します。

 $ blockpublicpath = plagin_dir_url（__ file__）。 '/blocks/cache-control/build/';
wp_localize_script（
  $ blockscriptregistrationName、
  「graphqlapicachecontrol」、
  [
    // ...
    「publicpath」=> $ blockpublicpath、
  ]
）;

次に、JavaScript側(cè)に設(shè)定します。

 __webpack_public_path__ = window.graphqlapicachecontrol.publicpath;

デフォルトの言語(yǔ)フォールバック

フォールバックメカニズムは、欠落している翻訳を処理します：

 const getMarkDownContentOruseDefault =（filename、defaultlang、lang）=> {
  return getMarkDownContent（Filename、Lang）
    .catch（err => getMarkDownContent（filename、defaultlang））;
};

モーダルとの統(tǒng)合

最後に、マークダウンコンテンツはモーダルに統(tǒng)合されます。

 '@wordpress/element'から{ueseState、useefcect}をimportします。
// ...その他の輸入

const cachecontrolcontentmodal =（props）=> {
  // ...
  const [page、setpage] = uesestate（[]）;

  effect（（）=> {
    GetMarkDownContentorUsedEfault（Filename、DefaultLang、Lang）。
      setpage（value）;
    }）;
  }、[]）;

  戻る （
    <contentmodal content="{page}"></contentmodal>
  ）;
};

このアプローチは、WordPressエディター內(nèi)の堅(jiān)牢で保守可能な、ローカライズされたドキュメントシステムを提供します。

以上がWordPressブロックエディターでのマークダウンとローカリゼーションを使用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。