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

المتطلبات الأساسية

1. تأكد من تثبيت العقدة js بالفعل.
2. مطلوب معرفة أساسية بـ React js.
3. الفهم الأساسي للمحطة مطلوب أيضًا.

قم بتهيئة إنشاء تطبيق تفاعل

إنشاء تطبيق React (CRA) هو أداة تُستخدم لإنشاء تطبيقات React. يؤدي تشغيل سكربت CRA إلى إنشاء الملفات والمجلدات المطلوبة لبدء تطبيق React وتشغيله في المتصفح.

لتهيئة React ، افتح Terminal واكتب الكود أدناه. استبدل "blog-name" في الأمر باسم مدونتك

 npx create-react-app blog-name

قم بتغيير الدليل للدخول إلى مجلد المدونة:

 cd blog-name

ابدأ خادم React بـ:

 npm start

افتح متصفحك وقم بزيارة http: // localhost: 3000 لتأكيد تشغيل تطبيق React.

تثبيت التبعيات

في هذا المشروع ، سنحتاج إلى نوعين من التبعيات للبدء. في الأساس ، رد فعل جهاز التوجيه دوم و polyblog-js-client . سنستخدم React-router-dom لإنشاء مسارات لمدونتنا و polyblog-js-client لجلب المقالات من Polyblog.

نفِّذ الأمر التالي لتثبيت حزم العميل المُتفاعل جهاز التوجيه dom و polyblog-js:

 npm install react-router-dom @polyblog/polyblog-js-client

إنشاء مسارات لجلب وعرض المقالات

في ملف App.js الخاص بنا داخل مجلد "src" ، نحتاج إلى إنشاء المسارات لعرض المقالات باستخدام React-router-dom. نحتاج أيضًا إلى استيراد الملفات الخاصة بنا في المجلد "src" (HomePage.jsx و ArticlePage.jsx الذي سننشئه لاحقًا) لعرض الصفحة المطلوبة.

App.js - استبدل الرمز الموجود داخل مجلد "src" في App.js بالرمز أدناه.

 //src/App.js

 import HomePage from './HomePage';
 import ArticlePage from './ArticlePage';
 import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate
 } from 'react-router-dom';
 function App() {
  return (
    
      
         } exact />
        } />
        } />
      
    
  )
 }

 export default App

لإنشاء المسارات ، نقوم باستيراد BrowserRouter و Routes و Route and Navigate من رد فعل جهاز التوجيه دوم.

سننشئ طريقين:

• طريق لعرض جميع المقالات حسب اللغة
• طريق لعرض التفاصيل الكاملة لمقال واحد.

سيتم إعادة توجيه مسار الصفحة المقصودة إلى المسار الأول.

ستكون المسارات بهذه الأشكال:

• / locale (عرض المقالات بالنسبة إلى لغة محددة)
• / locale / slug (عرض مقال تفصيلي واحد فيما يتعلق بلغة محددة)

تختلف الإعدادات المحلية بسبب اللغات المختلفة المتاحة لذلك يجب أن تكون الإعدادات المحلية متغيرًا ديناميكيًا. نفس الشيء ينطبق على سبيكة ، بسبب الرخويات المختلفة للمواد المختلفة. ومن ثم ، جعل المسارات ديناميكية:

• /: locale
• /: locale /: slug

للحصول على قيم الإعدادات المحلية والقيمة التقديرية ، سيتم استخدام خطاف تفاعل useParams للحصول على القيم في المسارات المعنية. تحقق من Homepage.jsx و ArticlePage.jsx أدناه.

أنشئ مكونًا لجلب المقالات من واجهة برمجة التطبيقات

لنقم بإنشاء ملف داخل مجلد src ونطلق عليه اسم HomePage.jsx. سيعرض جميع المقالات حسب لغة معينة.

داخل ملف HomePage.jsx ، دعنا نحضر المقالات من Polyblog API ونعرضها.

HomePage.jsx - استبدل الكود الموجود داخل مجلد src الخاص بـ HomePage.jsx بالرمز أدناه

 // src/HomePage.jsx

 import { getArticles } from '@polyblog/polyblog-js-client';
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';

 const HomePage = () => {
  const [articles, setArticles] = useState();
  const { locale } = useParams();

  useEffect(() => {
    if (articles) return
    const fetchArticles = async () => {
      // signup at https://app.polyblog.io/signup to get your blogId
      // you can find YOUR_BLOG_ID in the Settings page of Polyblog
      let articles = await getArticles({
        blogId: 'YOUR_BLOG_ID',
        locale,
        published: true,
        sortDirection: 'DESC',
      })
      console.log({ articles })
      setArticles(articles)
    }

    fetchArticles()
  }, [articles, locale])
  return (
    

      

        
Recent Articles
        

          {articles?.map(article => (
            article.locale === locale &&
            
              

                

                  
                
                

                  {article.author} 
                  
                  {
                    new Date(article.creationTime).toLocaleString(article.locale, {
                    dateStyle: 'long' })
                  }
                 
                 
{article.title}
                 
{article.subtitle}
                
              
            
          ))}
        
      
    
  )
 }

 export default HomePage

1. اشترك مع Polyblog على https://app.polyblog.io/signup
2. بعد التسجيل ، انقر فوق "الإعدادات" في لوحة معلومات Polyblog للعثور على "معرف المدونة" (على سبيل المثال 1234567890abcdef12345678)
3. استبدل YOUR_BLOG_ID بـ "معرف المدونة" في الكود أعلاه

لعرض المقالات باللغة الإنجليزية ، افتح المتصفح وقم بزيارة عنوان url http: // localhost: 3000 / en ولعرض المقالات الأسبانية ، قم بزيارة عنوان url http: // localhost: 3000 / es .

اعرض مقالاً

لنقم بإنشاء ملف آخر داخل مجلد src . سوف نسميها articlePage.jsx. سيعرض التفاصيل الكاملة لمقال واحد.

داخل ArtilclePage.jsx ، دعنا نحضر مقالة واحدة ونعرض تفاصيلها.

ArticlePage.jsx - استبدل الكود الموجود داخل المجلد src الموجود في ArticlePage.jsx بالرمز أدناه

انسخ "معرف المدونة" الذي استخدمناه في الخطوة السابقة واستبدله بـ "YOUR_BLOG_ID" في الكود أدناه.

 // src/ArticlePage.jsx

 import { getArticles } from '@polyblog/polyblog-js-client';
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';

 const ArticlePage = () => {
  const [article, setArticle] = useState();
  const { locale, slug } = useParams();

  useEffect(() => {
    if (article) return
    const fetchArticle = async () => {
      let articles = await getArticles({
        blogId: 'YOUR_BLOG_ID',
        locale,
        slug,
      })
      let singleArticle = articles?.[0]
      setArticle(singleArticle)
    }
    fetchArticle()
  }, [article, locale, slug])
  return (
    

      

        

          Blog
        
        
        

          
{article?.title}
          
{article?.subtitle}
          
            Posted by  {article?.author} on
           
             {new Date(article?.creationTime).toLocaleString(locale, {dateStyle: 'long'})}
            
          
        
      
      

        

      
    
  )
 }

 export default ArticlePage

لعرض مقال تفصيلي واحد ، يمكنك النقر فوق أي من المقالات الموجودة في صفحة HomePage.jsx أعلاه أو يمكنك القيام بذلك يدويًا بالانتقال إلى عنوان url http: // localhost: 3000 / en /: slug لعرض واحد مفصل المقالة الإنجليزية و http: // localhost: 3000 / es /: slug لعرض مقالة إسبانية مفصلة واحدة . المعلمة : slug في عنوان url أعلاه هي متغير ديناميكي وهو في هذه الحالة هو عنوان المقالة الفردية التي تريد عرضها على عنوان url هذا. ومن ثم ، استبدل ": slug" بعنوان المقالة التي تريد عرضها.

استنتاج

وها نحن ذا! لقد نجحنا في إنشاء مدونتنا متعددة اللغات في غمضة عين.

يمكننا ترجمة المدونة بلغات مختلفة ونقل تسويق المحتوى الخاص بنا إلى المستوى التالي!

عادة ما يكون من الصعب إنشاء مدونة متعددة اللغات ولكن باستخدام Polyblog ، يمكننا بسهولة إنشاء مدونة بوظائف معقدة في وقت قصير.

هذا المنشور هو مجرد غيض من فيض بالنظر إلى مقدار الأشياء التي يمكن القيام بها باستخدام Polyblog.

آمل أن يكون هذا المقال قد ساعدك في فهم كيفية إنشاء مدونة متعددة اللغات باستخدام React.

يمكن العثور على مثال عملي لهذا المشروع في مستودع جيثب هذا.

يمكنك معرفة المزيد حول معلمات API المدعومة في مرجع API

شكرا للقراءة!