تعرف على كيفية إنشاء مدونة متعددة اللغات باستخدام Remix JS
إنشاء مدونة متعددة اللغات باستخدام Remix JS
Posted by Yakub Ali Siyam on ٣١ ديسمبر ٢٠٢١
في هذه المقالة ، سنتعلم كيفية إنشاء مدونة متعددة اللغات باستخدام Remix JS. سأوجهك خلال العملية بأكملها خطوة بخطوة. لنبدأ مع Remix.
## المتطلبات الأساسية
المتطلبات بسيطة جدًا:
* تأكد من تثبيت [العقدة](https://nodejs.org/en/)
* الفهم الأساسي لـ [React](https://reactjs.org/)
* المعرفة الأساسية **للمحطة**
## تثبيت
```bash
npx create-remix@latest
```
اختر اسم المجلد الذي تريد تثبيته:  اختر خيار Remix App Server ، وهو الخادم المضمن (يمكنك تغيير ذلك لاحقًا):  اختر Javascript لنسخ الرمز ولصقه من هذا البرنامج التعليمي.  تأكد من إخبار برنامج التثبيت بالتشغيل
```bash
npm install
```
 ثم **cd foldername** قم بتشغيل remix **npm قم بتشغيل dev**  لمزيد من المعلومات حول Remix ، قم بزيارة [remix.run](https://remix.run/) !
## إنشاء صفحة مدونة:
يحتوي مجلد **التطبيق** على منطق التطبيق الرئيسي الخاص بنا. يتم عرض جميع المجلدات والملفات الموجودة ضمن مجلد **المسارات** للجمهور ويمكن الوصول إليها باستخدام عنوان URL. **root.jsx -** هو المكون الرئيسي لتطبيقنا. يحتوي على تخطيط الصفحة العام و Bootstrap CDN.
```jsx
import { Outlet, LiveReload, Link, Links, Meta } from '@remix-run/react'; export const links = () => [ // Bootstrap CSS CDN { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css', }, ]; export const meta = () => { return { description: 'A multi-language blog built with Remix', }; }; export default function App() { return ( ); } function Document({ children, title }) { return ( {children} {process.env.NODE_ENV === 'development' ? : null} {/* Bootstrap JS CDN */} ); } function Layout({ children }) { return (
{/* Navbar */}
Blog
English Español
{children}
); } export function ErrorBoundary({ error }) { console.log(error); return (
Error
{error.message} ); }
```
**الصفحة الرئيسية:** أنشئ ملفًا جديدًا هنا ، app / route / index.jsx. إنها الصفحة الرئيسية لموقع مدونتنا.
```jsx
import { redirect } from '@remix-run/server-runtime'; export function loader({ request }) { let languageHeader = request.headers.get('accept-language'); let locale = languageHeader?.split(',')[0] || 'en'; let language = locale.split('-')[0]; if (!['en', 'es'].includes(language)) { language = 'en'; } return redirect(`/${language}`); }
```
**مكون المقالات -** تثبيت Polyblog API:
```bash
npm install @polyblog/polyblog-js-client
```
سنكتب الكود الخاص بنا لعرض جميع المدونات التي جلبناها من Polyblog API ونعرضها. للعثور على المقالات ، انتقل إلى localhost: 3000 / en ابحث عن مقالات باللغة الإنجليزية ، انتقل إلى localhost: 3000 / es ابحث عن المقالات الأسبانية. **قم بإنشاء مجلد التطبيق / المسارات / $ locale**\
**قم بإنشاء ملف app / links / $ locale / index.jsx**
```jsx
import { getArticles } from '@polyblog/polyblog-js-client'; import { useLoaderData, Link } from '@remix-run/react'; export const loader = async ({ params }) => { const locale = params.locale; let articles = await getArticles({ // signup at https://www.polyblog.io/signup to get your blogId blogId: '4217f90b8eaa86551e7f7d55', published: true, locale, }); return articles; }; export default function BlogPage() { const article = useLoaderData(); return (
{article.map( ({ _id, locale, slug, coverUrl, title, author, creationTime, description, }) => (
{title}
{description}
Posted by {author} on{' '} {new Date(creationTime).toLocaleString(locale, { dateStyle: 'long', })}
), )}
); }
```
**عرض مقال تفصيلي:** **إنشاء ملف app / links / $ locale / $ slug.jsx** هو المكون الذي يجلب مقالة واحدة ويعرضها في صفحة منفصلة. انتقل إلى localhost: 3000 / en /: slug للعثور على مدونة مفصلة.
```jsx
import { getArticles } from '@polyblog/polyblog-js-client'; import { useLoaderData } from '@remix-run/react'; export const loader = async ({ params }) => { const { locale, slug } = params; const articles = await getArticles({ // signup at https://www.polyblog.io/signup to get your blogId blogId: '4217f90b8eaa86551e7f7d55', locale, slug, }); const article = articles?.[0]; return article; }; export default function ArticlePage() { const article = useLoaderData(); return (
{article && (
{article?.title}
{article?.description}
Posted by {article?.author} on{' '} {new Date(article?.creationTime).toLocaleDateString()}
)}
); }
```
اشترك على للحصول على معرف مدونتك لإدخال الرمز أعلاه. بعد التسجيل ، قم بزيارة الصفحة "إعدادات" للعثور على معرف مدونتك (على سبيل المثال 1234567890abcdef12345678) **تبدو بنية المجلد لدينا كما يلي**
```jsx
app routes $locale $slug.jsx index.jsx index.jsx entry.client.jsx entry.server.jsx root.jsx
```

## خاتمة
هنا في هذه المقالة ، وصفت كيف يمكنك إضافة مقالات إلى أي موقع ويب Remix باستخدام واجهة برمجة التطبيقات التي توفرها Polyblog. لقد نجحنا في إنشاء مدونتنا متعددة اللغات باستخدام [Polyblog](http://polyblog.io) API وجعلها أسهل بالنسبة لنا. يمكنك العثور على مزيد من المعلومات حول معلمات API المدعومة في [**مرجع Polyblog API**](https://www.polyblog.io/api-reference) . شكرا لك على الذهاب من خلال هذا البرنامج التعليمي! إذا علقت في أي خطوة ، فارجع إلى [github repo](https://github.com/polyblog-io/remix-blog-example) وابحث عن مشكلتك. ترميز سعيد !!!