اذهب إلى المحتوى
  • 0

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

Adam Ebrahim

السؤال

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

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

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

Recommended Posts

  • 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>
  )
}

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...