Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor

Müssen Dokumentation direkt im WordPress -Editor angezeigt? In diesem Artikel wird der optimale Ansatz untersucht und den Markdown für optimiertes Dokumentationsmanagement und Lokalisierung eingesetzt.

Während React -Komponenten und HTML intuitiv erscheinen mögen, können sie schnell unhandlich und für umfangreiche Dokumentation schwer aufrechterhalten werden. Betrachten Sie dieses Beispiel aus einem früheren Artikel, der die Dokumentation in einem Modal zeigt:

 const cachecontroldroldescription = () => {
  zurückkehren (
    <p>Der Cache-Control-Header enthält den Mindestwert maximal maximal nach allen Feldern/Richtlinien, die an der Anforderung beteiligt sind, oder <code>no-store if the max-age is 0</code>
  )
}</p>

Markdown bietet eine sauberere Lösung. Die oben genannten könnte in eine Markdown-Datei ( /docs/cache-control.md ) umgerichtet werden:

 Der Cache-Control-Header enthält den Mindestwert maximal maximal AAGE aus allen Feldern/Anweisungen, die an der Anfrage beteiligt sind

Markdown vs. HTML: Vor- und Nachteile

Markdown vereinfacht den Prozess, aber im Gegensatz zu React-Komponenten, die eine einfache Übersetzung mithilfe von POT-Dateien ermöglichen, fehlt es in der integrierten Lokalisierung. Da die Lokalisierung von entscheidender Bedeutung ist, werden wir uns mit dieser Einschränkung befassen. Dieser Artikel zielt darauf ab, zwei Hauptziele zu erreichen:

1. Verwendung von Markdown für Dokumentation in einem WordPress -Editor -Block.
2. Implementierung der Dokumentationsübersetzung basierend auf der Sprache des Benutzers.

Laden von Markdown -Inhalten

Mit /docs/cache-control.md erstellt, können wir seinen HTML-konvertierten Inhalt importieren und rendern:

 importieren Sie CacheControldocumentation aus '../docs/cache-control.md';

const cachecontroldroldescription = () => {
  zurückkehren (
    <div dangerouslysetinnerhtml="{{" __html: cachecontroldocumentation></div>
  );
}

Dies basiert auf WebPack, dem Core -Modul des WordPress -Editors (Version 4.42). Wir werden die Konfiguration von WebPack an die Verarbeitung von Markdown- und HTML -Loader anpassen.

Erstellen Sie webpack.config.js im Root des Blocks:

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

module.exports = {
  ... Standardconfig,
  Modul: {
    ... defaultConfig.module,
    Regeln: [
      ... defaultConfig.module.rules,
      {
        Test: /\.md$/,,
        verwenden: [
          {Loader: "html-loader"},
          {Loader: "Markdown-Loader"}
        ]
      }
    ],
  },
};

Installieren Sie die erforderlichen Pakete:

 NPM-Installation-Save-Dev Markdown-Lader HTML-Lader

Für eine verbesserte Organisation fügen Sie einen Webpack -Alias ​​hinzu ( @docs der zu /docs zeigt):

 const path = fordern ('path');
config.resolve.alias ['@docs'] = path.resolve (process.cwd (), 'docs/');

Jetzt vereinfacht die Importe zu:

 importieren Sie CacheControldocumentation aus '@docs/cache-control.md';

Lokalisierung der Dokumentation

Da direkte Markdown-Übersetzung nicht möglich ist, erstellen wir sprachspezifische Markdown-Dateien:

• /docs/en/cache-control.md
• /docs/fr/cache-control.md
• /docs/zh/cache-control.md usw. usw.

Dieser Ansatz kann auch regionspezifische Variationen verarbeiten (EG, /docs/en_US/cache-control.md ).

Abrufen der Benutzersprache

Die Sprache des Benutzers wird mit get_locale() erhalten und analysiert, um den Sprachcode zu extrahieren:

 Funktion get_locale_Language (): String {
  $ localparts = explode ('_', get_locale ());
  $ localparts [0] zurückgeben;
}

Dieser Sprachcode wird über wp_localize_script() an den Block übergeben:

 wp_localize_script (
  $ blockscripTregistrationName,
  'GraphQlapicacheControl',
  [
    'userlang' => get_locale_Language (),
  ]
);

Jetzt im Block zugänglich als window.graphqlApiCacheControl.userLang .

Dynamische Importe

Da die Sprache des Benutzers nur zur Laufzeit bekannt ist, verwenden wir dynamische Importe:

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

Der Inhalt wird über obj.default zugegriffen:

 const cachecontrolContent = import (`@docs/$ {Lang}/cache-control.md`) .then (obj => obj.default);

Dies ist in einer getMarkdownContent -Funktion eingekapselt:

 const getMarkdownContent = (Dateiname, Lang) => {
  Rückgabe import (/ * webpackchunkname: "docs/[request]" */`@docs/$ {lang}/$ {Dateiname} .md`)
    .then (obj => obj.default);
};

Der /* webpackChunkName: "docs/[request]" */ Kommentar sorgt für das organisierte Chunk -Management.

Den öffentlichen Weg setzen

Der publicPath ist für Webpack von entscheidender Bedeutung, um die dynamisch geladenen Stücke zu lokalisieren. Dies kann hartcodiert, über eine Umgebungsvariable festgelegt oder zur Laufzeit bestanden werden. In diesem Beispiel werden wir es bestehen:

 $ blockPublicPath = plugin_dir_url (__ Datei__). '/blocks/cache-control/build/';
wp_localize_script (
  $ blockscripTregistrationName,
  'GraphQlapicacheControl',
  [
    // ...
    'publicPath' => $ blockPublicPath,
  ]
);

Stellen Sie es dann auf der JavaScript -Seite ein:

 __Webpack_public_path__ = window.graphqlapicacheControl.publicPath;

Standardsprachenfall

Ein Fallback -Mechanismus behandelt fehlende Übersetzungen:

 const getMarkdownContentorUsefault = (Dateiname, defaultInd, Lang) => {
  Return getMarkdownContent (Dateiname, Lang)
    .Catch (err => getMarkdownContent (Dateiname, defaultAnd));
};

Integration in das Modal

Schließlich ist der Markdown -Inhalt in das Modal integriert:

 importieren {usustate, useEffect} aus '@WordPress/Element';
// ... andere Importe

const cachecontrolContentModal = (Props) => {
  // ...
  const [Seite, setPage] = usustate ([]);

  useEffect (() => {
    GetmarkdownContentorUsedEfault (Dateiname, defaultIlt, Lang) .then (value => {
      SetPage (Wert);
    });
  }, []);

  zurückkehren (
    <contentmodal content="{page}"></contentmodal>
  );
};

Dieser Ansatz bietet ein robustes, wartbares und lokalisiertes Dokumentationssystem innerhalb des WordPress -Editors.

Das obige ist der detaillierte Inhalt vonVerwenden von Markdown und Lokalisierung im WordPress -Block -Editor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!