Routen übersetzen für Astro-Content-Collections und Unterseiten

Zusätzlich zur offiziellen Dokumentation zur Routenübersetzung, die ich verfasst habe, möchte ich die Schritte zur Übersetzung von Routen für Content-Collections und Unterseiten erklären.

Siehe das folgende Beispiel:

// ui.ts

export const routes = {
  de: {
    services: "leistungen",
    blog: "blog", // Index der Inhaltskollektion
    "blog.how-to-become-a-scrum-master": "blog.wie-werde-ich-scrum-master",
  },
  fr: {
    services: "prestations-de-service",
    blog: "blog", // Index der Inhaltskollektion
    "blog.how-to-become-a-scrum-master": "blog.comment-devenir-un-scrum-master",
  },
};

Routen mit mehreren Ebenen werden mit einem Punkt getrennt. Bei der Übersetzung der Route wird der Punkt durch einen Schrägstrich ersetzt. Aktualisieren Sie die unten stehenden Methoden, um die Übersetzungslogik für mehrere Ebenen zu aktivieren.

// utils.ts

// Fügt Punkt-/Schrägstrich-Ersetzung für translatedPath hinzu
export function useTranslatedPath(lang: keyof typeof ui) {
  return function translatePath(path: string, l: string = lang) {
    const pathName = path.replaceAll("/", "");
    const hasTranslation =
      defaultLang !== l &&
      routes[l] !== undefined &&
      routes[l][pathName] !== undefined;
    const translatedPath = hasTranslation ? "/" + routes[l][pathName] : path;
    const translatedPathReplaced = translatedPath.replaceAll(".", "/");

    return !showDefaultLang && l === defaultLang
      ? translatedPathReplaced
      : `/${l}${translatedPathReplaced}`;
  };
}

// Fügt Unterstützung für Mehrebenenrouten hinzu, indem der gesamte Pfadname überprüft und das Sprachverzeichnis überspringen wird.
export function getRouteFromUrl(url: URL): string | undefined {
  const pathname = new URL(url)?.pathname;

  const path = pathname
    ?.split("/")
    .filter(Boolean)
    .filter((part) => !Object.keys(languages).includes(part))
    .join(".");

  if (!path) {
    return undefined;
  }

  const currentLang = getLangFromUrl(url);

  if (defaultLang === currentLang) {
    const route = Object.values(routes)[0];
    const pathTyped = path as keyof typeof route;
    return pathTyped in route ? pathTyped : undefined
  }

  const getKeyByValue = (
    obj: Record<string, string>,
    value: string,
  ): string | undefined => {
    return Object.keys(obj).find((key) => obj[key] === value);
  };

  const reversedKey = getKeyByValue(routes[currentLang], path);

  if (reversedKey !== undefined) {
    return reversedKey;
  }

  return undefined;
}

Übersetzung von Routen mit Unterstützung für trailingSlash und base

Die offizielle Dokumentation und das obenstehende Beispiel funktionieren nur ohne die Seitenkonfiguration von trailingSlash oder base. Wenn Sie beispielsweise trailingSlash: always verwenden möchten, finden Sie hier den Quellcode. Oder die Live-Vorschau.