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：利點と短所

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

1. WordPressエディターブロック內(nèi)のドキュメントにMarkdownを使用します。
2. ユーザーの言語に基づいてドキュメント翻訳を?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/'）;

今では輸入が簡素化されます：

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

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

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

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

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

ユーザー言語の取得

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

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

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

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

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

動的なインポート

ユーザーの言語は実行時にのみ知られているため、動的なインポートを使用します。

 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が動的にロードされたチャンクを見つけるために重要です。これは、ハードコーディング、環(huán)境変數(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;

デフォルトの言語フォールバック

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

 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)の堅牢で保守可能な、ローカライズされたドキュメントシステムを提供します。

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