WordPress 블록 편집기에서 Markdown 및 현지화 사용

WordPress 편집기 내에 직접 문서를 표시해야합니까? 이 기사는 간소화 된 문서 관리 및 현지화를 위해 Markdown을 활용하여 최적의 접근 방식을 살펴 봅니다.

React 구성 요소와 HTML은 직관적 인 것처럼 보일 수 있지만 광범위한 문서를 위해 다루기 어려워지고 유지하기가 어려워 질 수 있습니다. 이 예제는 모달에 문서를 보여주는 이전 기사에서 다음과 같습니다.

 const cachecontroldescription = () => {
  반품 (
    <p>캐시 제어 헤더에는 요청과 관련된 모든 필드/지시문의 최소 최대 연령 값이 포함되거나 <code>no-store if the max-age is 0</code>
  ))
}</p>

Markdown은 더 깨끗한 솔루션을 제공합니다. 위는 Markdown 파일 ( /docs/cache-control.md )으로 리팩토링 될 수 있습니다.

 캐시 제어 헤더에는 요청과 관련된 모든 필드/지시문의 최소 최대 연령 값이 포함되거나 최대 연령이 0 인 경우 'No-Store'가 포함됩니다.

Markdown vs. HTML : 장점과 단점

Markdown은 프로세스를 단순화하지만 POT 파일을 사용하여 쉽게 번역 할 수있는 React 구성 요소와 달리 내장 현지화 지원이 부족합니다. 현지화가 중요 하므로이 제한 사항을 해결할 것입니다. 이 기사는 두 가지 주요 목표를 달성하는 것을 목표로합니다.

1. WordPress 편집기 블록 내에서 문서화를위한 Markdown 사용.
2. 사용자의 언어를 기반으로 문서 번역 구현.

마크 다운 컨텐츠로드

/docs/cache-control.md 만들어 HTML-Converted 컨텐츠를 가져오고 렌더링 할 수 있습니다.

 '../docs/cache-control.md'에서 Cachecontroldocumentation 가져 오기;

const cachecontroldescription = () => {
  반품 (
    <div dangerouslysetinnerhtml="{{" __html: cachecontroldocumentation></div>
  );
}

이것은 WordPress 편집기의 핵심 모듈 Bundler (버전 4.42) 인 Webpack에 의존합니다. Markdown 및 HTML 로더를 처리하기 위해 WebPack의 구성을 사용자 정의 할 것입니다.

블록의 루트에서 webpack.config.js 작성하십시오.

 const defaultConfig = require ( '@wordpress/scripts/config/webpack.config');

module.exports = {
  ... DefaultConfig,
  모듈 : {
    ... defaultConfig.Module,
    규칙 : [
      ... defaultConfig.Module.rules,
      {
        테스트 : /\.md$/,
        사용: [
          {로더 : "html-loader"},
          {로더 : "Markdown-Loader"}
        ]]
      }
    ],,
  },
};

필요한 패키지 설치 :

 NPM 설치--Save Dev Markdown-Loader HTML-Loader

개선 된 조직의 경우 Webpack Alias ​​( @docs /docs 가리키는)를 추가하십시오.

 const 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 등

이 접근법은 또한 지역별 변형 (예 : /docs/en_US/cache-control.md )을 처리 할 수 ​​있습니다.

사용자 언어 검색

사용자의 언어는 get_locale() 사용하여 얻어지고 언어 코드를 추출하기 위해 구문 분석합니다.

 함수 get_locale_language () : String {
  $ localeparts = Explode ( '_', get_locale ());
  Return $ LocalEparts [0];
}

이 언어 코드는 wp_localize_script() 를 통해 블록으로 전달됩니다.

 wp_locaite_script (
  $ blockscriptRegistrationName,
  'GraphQlapicacheControl',
  [의 뜻
    'userLang'=> get_locale_language (),
  ]]
);

이제 block에서 window.graphqlApiCacheControl.userLang 으로 액세스 할 수 있습니다.

동적 수입

사용자의 언어는 런타임에만 알려져 있으므로 동적 가져 오기를 사용합니다.

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

내용은 obj.default 를 통해 액세스합니다.

 CONT CACHECONTROLCONTENT = import (`@docs/$ {lang}/cache-control.md`) .then (obj => obj.default);

이것은 getMarkdownContent 함수로 캡슐화됩니다.

 const getMarkdownContent = (filename, lang) => {
  return import (/ * WebPackChunkName : "docs/[request]" */`@docs/$ {lang}/$ {filename} .md`)
    . (obj => obj.default);
};

/* webpackChunkName: "docs/[request]" */ 댓글은 체계적인 청크 관리를 보장합니다.

공개 길을 설정합니다

publicPath 는 Webpack이 동적으로로드 된 청크를 찾는 데 중요합니다. 이는 하드 코딩, 환경 변수를 통해 설정하거나 런타임에 전달 될 수 있습니다. 이 예에서는 다음과 같이 전달하겠습니다.

 $ blockpublicpath = plugin_dir_url (__ file__). '/블록/캐시 제어/빌드/';
wp_locaite_script (
  $ blockscriptRegistrationName,
  'GraphQlapicacheControl',
  [의 뜻
    // ...
    'publicpath'=> $ blockpublicpath,
  ]]
);

그런 다음 JavaScript 측에 설정하십시오.

 __webpack_public_path__ = wind

기본 언어 폴백

폴백 메커니즘은 누락 된 번역을 처리합니다.

 const getMarkdownContEntorUsedEfault = (filename, defaultlang, lang) => {
  return getMarkdownContent (Filename, Lang)
    .catch (err => getMarkdownContent (filename, defaultLang));
};

모달과 통합

마지막으로 마크 다운 컨텐츠는 모달에 통합됩니다.

 '@wordpress/element'에서 {usestate, useeffect} import;
// ... 기타 수입

CONT CACHECONTROLCONTENTMODAL = (props) => {
  // ...
  const [page, setpage] = usestate ([]);

  useeffect (() => {
    getMarkdownContentOrusedEfault (filename, defaultlang, lang). then (value => {
      setPage (값);
    });
  }, []);

  반품 (
    <contentmodal content="{page}"></contentmodal>
  );
};

이 접근법은 WordPress 편집기 내에서 강력하고 유지 관리 가능하며 현지화 된 문서화 시스템을 제공합니다.

위 내용은 WordPress 블록 편집기에서 Markdown 및 현지화 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!