在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中文网其他相关文章！