在WordPress塊編輯器中使用Markdown和本地化

是否需要直接在WordPress編輯器中顯示文檔？本文探討了最佳方法，利用降級來簡化文檔管理和本地化。

儘管React組件和HTML似乎直觀，但它們很快就會變得笨拙且難以維持廣泛的文檔。從上一篇文章中考慮此示例以模式顯示文檔：

 const cachecontroldescription =（）=> {
  返回 （
    <p>緩存控制標頭將包含請求中涉及的所有字段/指令的最小最大值，或者<code>no-store if the max-age is 0</code>
  ）
}</p>

Markdown提供了更清潔的解決方案。以上可以重構為Markdown文件（ /docs/cache-control.md ）：

緩存控制標頭將包含請求中涉及的所有字段/指令的最小最大值值，如果最大值為0

Markdown vs. HTML：優勢和缺點

Markdown簡化了該過程，但缺乏內置的本地化支持，與React組件不同，該組件允許使用Pot Files輕鬆翻譯。由於本地化至關重要，我們將解決此限制。本文旨在實現兩個關鍵目標：

1. 利用Markdown在WordPress編輯器塊中進行文檔。
2. 根據用戶的語言實施文檔翻譯。

加載標記內容

使用/docs/cache-control.md創建，我們可以導入並渲染其HTML轉換的內容：

從'../docs/cache-control.md'導入cachecontroldocumentation;

const cachecontroldescription =（）=> {
  返回 （
    <div dangerouslysetinnerhtml="{{" __html: cachecontroldocumentation></div>
  ）；
}

這依賴於WebPack，WordPress編輯器的Core Module Bundler（版本4.42）。我們將自定義WebPack的配置來處理Markdown和HTML加載程序。

在該塊的root上創建webpack.config.js ：

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

Module.exports = {
  ... DefaultConfig，
  模塊： {
    ... defaultConfig.module，
    規則：[
      ... DefaultConfig.module.rules，
      {
        測試： /\ .md$/，
        使用： [
          {loader：“ html-loader”}，
          {Loader：“ Markdown-Loader”}
        這是給出的
      }
    ]，，
  }，，
};

安裝必要的軟件包：

 NPM安裝-SAVE-DEV MARKDOWN-LOADER HTML-LOADER

對於改進的組織，請添加一個WebPack別名（ @docs指向/docs ）：

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

現在簡化導入到：

從'@docs/cache-control.md'導入cachecontroldocumentation;

本地文檔

由於直接的Markdown譯出不可行，因此我們創建特定於語言的標記文件：

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

這種方法還可以處理特定於區域的變化（例如， /docs/en_US/cache-control.md en_us/cache-control.md）。

檢索用戶語言

用戶的語言是使用get_locale()獲得的，並解析以提取語言代碼：

函數get_locale_language（）：字符串{
  $ localeparts = Explode（'_'，get_locale（））;
  返回$ localeparts [0];
}

此語言代碼通過wp_localize_script()傳遞給塊：

 wp_localize_script（
  $ blockscriptregistrationname，
  “ graphqlapicachecontol”，
  [
    'userLang'=> get_locale_language（），
  這是給出的
）；

現在可以在塊中訪問window.graphqlApiCacheControl.userLang 。

動態導入

由於僅在運行時知道用戶的語言，因此我們使用動態導入：

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

內容可通過obj.default訪問：

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

這封裝在getMarkdownContent函數中：

 const getMarkDownContent =（filename，lang）=> {
  返回導入（/ * webpackchunkname：“ doc/[request]” */`@docs/$ {lang}/$ {filename} .md`）
    。
};

/* webpackChunkName: "docs/[request]" */評論確保有組織的塊管理。

設定公共道路

publicPath對於WebPack來說至關重要，以找到動態加載的塊。可以對此進行硬編碼，通過環境變量設置或在運行時傳遞。在此示例中，我們將通過它：

 $ blockpublicpath = plugin_dir_url（__文件__）。 '/blocks/cache-control/build/';
wp_localize_script（
  $ blockscriptregistrationname，
  “ graphqlapicachecontol”，
  [
    // ...
    'publicPath'=> $ blockpublicpath，
  這是給出的
）；

然後將其設置在JavaScript方面：

 __webpack_public_path__ = window.graphqlapicachecontrol.publicpath;

默認語言後備

後備機制處理缺失的翻譯：

 const getmarkDownContentorusedEfault =（文件名，defaultlang，lang）=> {
  返回getmarkDownContent（文件名，lang）
    .catch（err => getMarkDownContent（文件名，defaultLang））;
};

與模態集成

最後，將降價內容集成到模式中：

從'@wordpress/element'import {usestate，useeffect};
// ...其他進口

const cachecontrolcontentmodal =（props）=> {
  // ...
  const [page，setPage] = usestate（[]）;

  useeffect（（）=> {
    getMarkDownContentorusedEfault（文件名，defaultlang，lang）。
      setPage（value）;
    }）;
  }，[]）;

  返回 （
    <contentmodal content="{page}"></contentmodal>
  ）；
};

這種方法在WordPress編輯器中提供了強大，可維護和局部的文檔系統。

以上是在WordPress塊編輯器中使用Markdown和本地化的詳細內容。更多資訊請關注PHP中文網其他相關文章！