كيفية تعيين لغة المستند في TanStack Start v1

تحديد لغة الصفحة للمتصفحات وقارئات الشاشة

المشكلة

يجب أن تعلن صفحات الويب عن لغتها الأساسية لتعمل بشكل صحيح عبر مختلف وكلاء المستخدم. بدون إعلان صريح عن اللغة في عنصر HTML الجذر، لا تستطيع المتصفحات تحديد لغة المحتوى وتضطر إلى التخمين. هذا يجعل قارئات الشاشة تستخدم لغة نظام المستخدم افتراضيًا، مما يؤدي إلى نطق غير صحيح عندما تختلف لغة المحتوى. لا يمكن للمتصفحات تقديم ميزات ترجمة دقيقة لأنها تفتقر إلى معلومات اللغة المصدر. تواجه محركات البحث صعوبة في فهرسة المحتوى بثقة للجمهور المناسب حسب اللغة، مما يقلل من إمكانية اكتشاف المحتوى للمستخدمين الذين يبحثون بتلك اللغة.

الحل

أضف سمة lang إلى وسم html لتعيين اللغة الافتراضية لصفحتك. في TanStack Start، يتم تعريف هيكل HTML في shellComponent للمسار الجذر، الذي يعرض بنية المستند بما في ذلك عنصر <html>. من خلال إضافة سمة lang مع رمز اللغة المناسب إلى هذا العنصر، فإنك تُعلم المتصفحات والتقنيات المساعدة ومحركات البحث بلغة المحتوى، مما يمكنهم من معالجته وعرضه بشكل صحيح.

الخطوات

1. تحديد اللغة الحالية

تحدد خاصية shellComponent للمسار الجذر هيكل HTML الذي يغلف جميع محتويات المسار ويتم عرضه دائمًا على جانب الخادم. حدد اللغة الحالية من آلية اكتشاف اللغة في تطبيقك، مثل معلمات المسار أو ملفات تعريف الارتباط أو الرؤوس.

import type { ReactNode } from "react";
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from "@tanstack/react-router";

export const Route = createRootRoute({
  shellComponent: RootDocument,
  component: RootComponent,
});

function RootComponent() {
  return <Outlet />;
}

function RootDocument({ children }: { children: ReactNode }) {
  const locale = "en";

  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

هذا يؤسس هيكل الغلاف حيث ستضيف سمة اللغة.

2. إضافة سمة lang إلى عنصر html

قم بتعيين سمة lang على عنصر <html> باستخدام قيمة اللغة المحلية. استخدم علامة لغة BCP 47 صالحة تتطابق مع لغة المحتوى الخاص بك.

function RootDocument({ children }: { children: ReactNode }) {
  const locale = "en";

  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

تعلن سمة lang الآن عن لغة المستند، مما يمكّن المتصفحات والتقنيات المساعدة من التعامل مع المحتوى بشكل مناسب.

3. استخدام قيم اللغة المحلية الديناميكية

إذا كان تطبيقك يدعم لغات متعددة، قم باسترجاع اللغة المحلية الحالية من نظام التوجيه أو إدارة الحالة وقم بتمريرها إلى مكون الغلاف.

function RootDocument({ children }: { children: ReactNode }) {
  const locale = getCurrentLocale();

  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

function getCurrentLocale(): string {
  return "en";
}

تتحدث لغة المستند الآن بناءً على اللغة المحلية النشطة، مما يضمن أن سمة lang تعكس دائمًا لغة المحتوى الحالية.