• 0

عمل موقع متعدد اللغات بإستخدام Gatsby

أود أن أنشر موقعي Static وجعله يحتوي على أكثر من لغة (العربية والإنجليزية والإيطالية .. إلخ)، لكن لا أعرف كيف يتمن الأمر في الموقع من نوع static generated، هل يتم عمل نسخة من كل صفحة بكل لغة أم يتم تعديل الـ routes لعرض لغة معينة، أعلم أن هناك حزم مثل i18next لـ next.js لكن كيف أقوم بنفس الأمر بإستخدام Gatsby؟

مع العلم أني لا أريد أن أقوم بإعادة كتابة الكود في أكثر من ملف ليكون هناك نسخة لكل لغة pages/en/index.js و pages/ar/index.js .. إلخ

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك إستخدام   gatsby-plugin-intl لإنشاء موقع متعدد اللغات وذلك كالتالي 

npm install gatsby-plugin-intl

بعد ذلك في ملف gatsby-config.js نقوم بإضافة الإعدادات الخاصه بالإضافة كالتالي 

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-intl`,
      options: {
        // المسار الذي سيتواجد به ملفات الترجمه
        path: `${__dirname}/src/langs`,
        // اللغات التي تود إستخدامها 
        languages: [`ar`, `en`],
        // اللغة الإفتراضية للموقع
        defaultLanguage: `ar`,
      },
    },
  ],
}

بعد ذلك في المسار الذي حددته تقوم بإنشاء ملف خاص بكل لغه يحتوي على ترجمة المصطلحات المطلوبه ولكن لابد من مراعاة بعض الأمور 

  • لابد أن يكون إسم الملف كالتالي "[language].json" ف علي سبيل المثال "ar.json" "en.json"
  • لابد من إستخدام نفس ال id الدال على الترجمه في كل ملف بحيث يكون شكل الملفات الناتجة كالتالي 
// ar.json
{
  "aboutUs": "عنا",
  "comments": "التعليقات",
  "home": "الصفحة الرئيسية"
}


// وفي ملف en.json

{
  "aboutUs": "about us",
  "comments": "Comments",
  "home": "Home Page"
}

بعد ذلك يمكنك تطبيق الترجمه داخل كل مكون او صفحة كالتالي 

import React from "react"
import { useIntl } from "gatsby-plugin-intl"

export default function Index() {
  const intl = useIntl()
  const locale = intl.locale !== "en" ? `/${intl.locale}` : ""
return (
<div>{intl.formatMessage({ id: "home" })}</div>
)
}

حيث أنه بإستخدام "formatMessage" وتمرير ال id الذي نريد إيجاد الترجمة الخاصة به سوف يتم توليد المحتوى المطلوب على حسب اللغة المختاره

يتبقى لنا أن نعرف كيف نقوم بالتبديل بين اللغات المتوفرة لدينا وذلك كالتالي

import React from "react"
import { Link } from "gatsby"

export default function LanguageSelector({ label, className }) {

  return (
    <div>
      <ul>
        <li>
          <Link to="/en">En</Link>
        </li>
        <li>
          <Link to="/">Ar</Link>
        </li>
      </ul>
    </div>
  )
}

 

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن