كيفية تعيين لغة المستند في 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 تعكس دائمًا لغة المحتوى الحالية.