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

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

بناء مدونة متعددة اللغات باستخدام React.js

تم النشر بواسطة Winnard Arthur في ٣٠ ديسمبر ٢٠٢١
<p style=";text-align:right;direction:rtl">في هذه المقالة ، سأخوض عملية خطوة بخطوة لإنشاء مدونة تفاعلية تدعم أكثر من لغة واحدة. تعد المدونة متعددة اللغات ضرورية لتنمية أعمالك من خلال [تسويق المحتوى](https://polyblog.polyblog.io/blog/en/content-marketing-is-changing-the-game/) الذي يستهدف جمهورًا دوليًا. <h2 style=";text-align:right;direction:rtl"> المتطلبات الأساسية <ol style=";text-align:right;direction:rtl"> <li style=";text-align:right;direction:rtl"> تأكد من تثبيت [العقدة js](https://nodejs.org/en/download/) بالفعل. <li style=";text-align:right;direction:rtl"> مطلوب معرفة أساسية بـ React js. <li style=";text-align:right;direction:rtl"> الفهم الأساسي للمحطة مطلوب أيضًا. <h2 style=";text-align:right;direction:rtl"> قم بتهيئة إنشاء تطبيق تفاعل <p style=";text-align:right;direction:rtl"> إنشاء تطبيق React (CRA) هو أداة تُستخدم لإنشاء تطبيقات React. يؤدي تشغيل سكربت CRA إلى إنشاء الملفات والمجلدات المطلوبة لبدء تطبيق React وتشغيله في المتصفح. <p style=";text-align:right;direction:rtl"> لتهيئة React ، افتح Terminal واكتب الكود أدناه. استبدل "blog-name" في الأمر باسم مدونتك <pre class="language-bash" style=";text-align:right;direction:rtl"> <code class="language-bash">npx create-react-app blog-name ``` <p style=";text-align:right;direction:rtl"> قم بتغيير الدليل للدخول إلى مجلد المدونة: <pre class="language-bash" style=";text-align:right;direction:rtl"> <code class="language-bash">cd blog-name ``` <p style=";text-align:right;direction:rtl"> ابدأ خادم React بـ: <pre class="language-bash" style=";text-align:right;direction:rtl"> <code class="language-bash">npm start ``` <p style=";text-align:right;direction:rtl"> افتح متصفحك وقم بزيارة <a href="" target="_blank">http: // localhost: 3000</a> لتأكيد تشغيل تطبيق React. ![تطبيق رد الفعل الأساسي](https://www.imagelato.com/images/article-image-basic-react-5a4dcaf0.jpg) <h2 style=";text-align:right;direction:rtl"> تثبيت التبعيات <p style=";text-align:right;direction:rtl"> في هذا المشروع ، سنحتاج إلى نوعين من التبعيات للبدء. في الأساس ، [**رد فعل جهاز التوجيه دوم**](https://v5.reactrouter.com/web/guides/quick-start) و [**polyblog-js-client**](https://www.npmjs.com/package/@polyblog/polyblog-js-client) . سنستخدم React-router-dom لإنشاء مسارات لمدونتنا و polyblog-js-client لجلب المقالات من Polyblog. <p style=";text-align:right;direction:rtl"> نفِّذ الأمر التالي لتثبيت حزم العميل المُتفاعل جهاز التوجيه dom و polyblog-js: <pre class="language-bash" style=";text-align:right;direction:rtl"> <code class="language-bash">npm install react-router-dom @polyblog/polyblog-js-client ``` <h2 style=";text-align:right;direction:rtl"> إنشاء مسارات لجلب وعرض المقالات <p style=";text-align:right;direction:rtl"> في ملف App.js الخاص بنا داخل مجلد **"src"** ، نحتاج إلى إنشاء المسارات لعرض المقالات باستخدام React-router-dom. نحتاج أيضًا إلى استيراد الملفات الخاصة بنا في المجلد **"src"** (HomePage.jsx و ArticlePage.jsx الذي سننشئه لاحقًا) لعرض الصفحة المطلوبة. <p style=";text-align:right;direction:rtl"> **App.js** *- استبدل الرمز الموجود داخل* مجلد ***"src"*** *في App.js بالرمز أدناه.* <pre class="language-jsx" style=";text-align:right;direction:rtl"> <code class="language-jsx">//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 ( <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
<ol style=";text-align:right;direction:rtl"> <li style=";text-align:right;direction:rtl"> اشترك مع Polyblog على [https://app.polyblog.io/signup](https://app.polyblog.io/signup) <li style=";text-align:right;direction:rtl"> بعد التسجيل ، انقر فوق "الإعدادات" في لوحة معلومات Polyblog للعثور على "معرف المدونة" (على سبيل المثال 1234567890abcdef12345678) <li style=";text-align:right;direction:rtl"> استبدل **YOUR_BLOG_ID** بـ "معرف المدونة" في الكود أعلاه <p style=";text-align:right;direction:rtl"> **لعرض المقالات باللغة الإنجليزية** ، افتح المتصفح وقم بزيارة عنوان url [http: // localhost: 3000 / en](http://localhost:3000/en) **ولعرض المقالات الأسبانية** ، قم بزيارة عنوان url [http: // localhost: 3000 / es]( http://localhost:3000/es) . ![صفحة HomePage.jsx - مقالات باللغة الإنجليزية](https://www.imagelato.com/images/article-image-recent-blog-article-94480ad4.jpg) <h2 style=";text-align:right;direction:rtl"> اعرض مقالاً <p style=";text-align:right;direction:rtl"> لنقم بإنشاء ملف آخر داخل مجلد **src** . سوف نسميها articlePage.jsx. سيعرض التفاصيل الكاملة لمقال واحد. <p style=";text-align:right;direction:rtl"> داخل ArtilclePage.jsx ، دعنا نحضر مقالة واحدة ونعرض تفاصيلها. <p style=";text-align:right;direction:rtl"> **ArticlePage.jsx** *- استبدل الكود الموجود داخل* المجلد ***src*** الموجود *في ArticlePage.jsx بالرمز أدناه* <p style=";text-align:right;direction:rtl"> انسخ "معرف المدونة" الذي استخدمناه في الخطوة السابقة واستبدله بـ "YOUR_BLOG_ID" في الكود أدناه. <pre class="language-jsx" style=";text-align:right;direction:rtl"> <code class="language-jsx">// 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 ( <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"> شكرا للقراءة!
قم ببناء مدونة في لمح البصرpolyblog

سجل للحصول على اخر اخبارنا

المقالات الأخيرة