كيفية إنشاء مدونة متعددة اللغات باستخدام React

import HomePage from './HomePage'; import ArticlePage from './ArticlePage'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; function App() { return ( <Router> <Routes> <Route path="/" element={<Navigate to="/en" /> } exact /> <Route path="/:locale" element={<HomePage />} /> <Route path="/:locale/:slug" element={<ArticlePage />} /> </Routes> </Router> ) }

export default App

<p style=";text-align:right;direction:rtl"> لإنشاء المسارات ، نقوم باستيراد BrowserRouter و Routes و Route and Navigate من رد فعل جهاز التوجيه دوم.
<p style=";text-align:right;direction:rtl"> سننشئ طريقين:
<ul style=";text-align:right;direction:rtl">
<li style=";text-align:right;direction:rtl"> طريق لعرض جميع المقالات حسب **اللغة**
<li style=";text-align:right;direction:rtl"> طريق لعرض التفاصيل الكاملة لمقال واحد.

<p style=";text-align:right;direction:rtl"> *سيتم إعادة توجيه مسار الصفحة المقصودة إلى المسار الأول.*
<p style=";text-align:right;direction:rtl"> ستكون المسارات بهذه الأشكال:
<ul style=";text-align:right;direction:rtl">
<li style=";text-align:right;direction:rtl"> / locale (عرض المقالات بالنسبة إلى لغة محددة)
<li style=";text-align:right;direction:rtl"> / locale / slug (عرض مقال تفصيلي واحد فيما يتعلق بلغة محددة)

<p style=";text-align:right;direction:rtl"> تختلف **الإعدادات المحلية** بسبب اللغات المختلفة المتاحة لذلك يجب أن تكون الإعدادات المحلية متغيرًا ديناميكيًا. نفس الشيء ينطبق على **سبيكة** ، بسبب الرخويات المختلفة للمواد المختلفة. ومن ثم ، جعل المسارات ديناميكية:
<ul style=";text-align:right;direction:rtl">
<li style=";text-align:right;direction:rtl"> /: locale
<li style=";text-align:right;direction:rtl"> /: locale /: slug

<p style=";text-align:right;direction:rtl"> للحصول على قيم الإعدادات المحلية والقيمة التقديرية ، سيتم استخدام خطاف تفاعل **useParams** للحصول على القيم في المسارات المعنية. تحقق من *Homepage.jsx* و *ArticlePage.jsx* أدناه.
<h2 style=";text-align:right;direction:rtl"> أنشئ مكونًا لجلب المقالات من واجهة برمجة التطبيقات
<p style=";text-align:right;direction:rtl"> لنقم بإنشاء ملف داخل مجلد **src** ونطلق عليه اسم HomePage.jsx. سيعرض جميع المقالات حسب لغة معينة.
<p style=";text-align:right;direction:rtl"> داخل ملف HomePage.jsx ، دعنا نحضر المقالات من Polyblog API ونعرضها.\
\
 **HomePage.jsx** *- استبدل الكود الموجود داخل* مجلد ***src*** *الخاص بـ HomePage.jsx بالرمز أدناه*
<pre class="language-jsx" style=";text-align:right;direction:rtl"> <code class="language-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 (
    <div>
      <div>
        <h1 style={{textAlign: 'center'}}>Recent Articles
        <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
          {articles?.map(article => (
            article.locale === locale &&
            <Link
              style={{width: '28%', marginBottom: '2rem', border: '1px solid gray'}}
              to={{ pathname: `/${article.locale}/${article.slug}`}}
              key={article._id}
            >
              <div>
                <div>
                  <img src={article?.coverUrl} alt={article.title} style={{width: '100%', height: '200px'}} />
                </div>
                <div>
                  <span>{article.author} </span>
                  <span>
                  {
                    new Date(article.creationTime).toLocaleString(article.locale, {
                    dateStyle: 'long' })
                  }
                 </span>
                 ### {article.title}
                 {article.description}
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
 }

 export default HomePage

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 ( <div style={{width: '80%', margin: '0 auto'}}> <div> ### <Link to="/">Blog</Link>

    <img src={article?.coverUrl} alt={article?.title} style={{width: '80%', margin: '0 auto'}} />
    <div>
      # {article?.title}
      ### {article?.description}
      <i>
        Posted by <span> {article?.author}</span> on
       <span>
         {new Date(article?.creationTime).toLocaleString(locale, {dateStyle: 'long'})}
        </span>
      </i>
    </div>
  </div>
  <div>
    <div dangerouslySetInnerHTML = {{ __html: article?.content }} />
  </div>
</div>

) }

export default ArticlePage

<p style=";text-align:right;direction:rtl"> لعرض مقال تفصيلي واحد ، يمكنك النقر فوق أي من المقالات الموجودة في صفحة HomePage.jsx أعلاه أو يمكنك القيام بذلك يدويًا بالانتقال إلى عنوان url [http: // localhost: 3000 / en /: slug](http://localhost:3000/en/:slug) **لعرض واحد مفصل المقالة الإنجليزية** و [http: // localhost: 3000 / es /: slug](http://localhost:3000/es/:slug) **لعرض مقالة إسبانية مفصلة واحدة** . المعلمة *: slug* في عنوان url أعلاه هي متغير ديناميكي وهو في هذه الحالة هو عنوان المقالة الفردية التي تريد عرضها على عنوان url هذا. ومن ثم ، استبدل ": slug" بعنوان المقالة التي تريد عرضها. 
![صفحة articlePage.jsx](https://www.imagelato.com/images/article-image-articlepage.jsx-detailed-page-2365e127.jpg)
<h2 style=";text-align:right;direction:rtl"> استنتاج
<p style=";text-align:right;direction:rtl"> وها نحن ذا! لقد نجحنا في إنشاء مدونتنا متعددة اللغات في غمضة عين.
<p style=";text-align:right;direction:rtl"> يمكننا ترجمة المدونة بلغات مختلفة ونقل [تسويق المحتوى](https://polyblog.polyblog.io/blog/en/what-is-content-marketing/) الخاص بنا إلى المستوى التالي!
<p style=";text-align:right;direction:rtl"> عادة ما يكون من الصعب إنشاء مدونة متعددة اللغات ولكن باستخدام [Polyblog](http://polyblog.io) ، يمكننا بسهولة إنشاء مدونة بوظائف معقدة في وقت قصير.
<p style=";text-align:right;direction:rtl"> هذا المنشور هو مجرد غيض من فيض بالنظر إلى مقدار الأشياء التي يمكن القيام بها باستخدام Polyblog.
<p style=";text-align:right;direction:rtl"> آمل أن يكون هذا المقال قد ساعدك في فهم كيفية إنشاء مدونة متعددة اللغات باستخدام React.
<p style=";text-align:right;direction:rtl"> يمكن العثور على مثال عملي لهذا المشروع في [مستودع جيثب هذا.](https://github.com/polyblog-io/react-blog-example)
<p style=";text-align:right;direction:rtl"> يمكنك معرفة المزيد حول معلمات API المدعومة في [**مرجع API**](https://www.polyblog.io/api-reference)
<p style=";text-align:right;direction:rtl"> شكرا للقراءة!