تعرف على كيفية إنشاء مدونة متعددة اللغات باستخدام Remix JS

تعرف على كيفية إنشاء مدونة متعددة اللغات باستخدام Remix JS

إنشاء مدونة متعددة اللغات باستخدام Remix JS

تم النشر بواسطة Yakub Ali Siyam في ٣١ ديسمبر ٢٠٢١

في هذه المقالة ، سنتعلم كيفية إنشاء مدونة متعددة اللغات باستخدام Remix JS. سأوجهك خلال العملية بأكملها خطوة بخطوة. لنبدأ مع Remix.

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

المتطلبات بسيطة جدًا:

  • تأكد من تثبيت العقدة
  • الفهم الأساسي لـ React
  • المعرفة الأساسية للمحطة

تثبيت

npx create-remix@latest

اختر اسم المجلد الذي تريد تثبيته: تركيب ريمكس اختر خيار Remix App Server ، وهو الخادم المضمن (يمكنك تغيير ذلك لاحقًا): تركيب ريمكس اختر Javascript لنسخ الرمز ولصقه من هذا البرنامج التعليمي. تركيب ريمكس تأكد من إخبار برنامج التثبيت بالتشغيل

npm install

تركيب ريمكس ثم cd foldername قم بتشغيل remix npm قم بتشغيل dev تركيب ريمكس لمزيد من المعلومات حول Remix ، قم بزيارة remix.run !

إنشاء صفحة مدونة:

يحتوي مجلد التطبيق على منطق التطبيق الرئيسي الخاص بنا. يتم عرض جميع المجلدات والملفات الموجودة ضمن مجلد المسارات للجمهور ويمكن الوصول إليها باستخدام عنوان URL. root.jsx - هو المكون الرئيسي لتطبيقنا. يحتوي على تخطيط الصفحة العام و Bootstrap CDN.

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. إنها الصفحة الرئيسية لموقع مدونتنا.

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:

npm install @polyblog/polyblog-js-client

سنكتب الكود الخاص بنا لعرض جميع المدونات التي جلبناها من Polyblog API ونعرضها. للعثور على المقالات ، انتقل إلى localhost: 3000 / en ابحث عن مقالات باللغة الإنجليزية ، انتقل إلى localhost: 3000 / es ابحث عن المقالات الأسبانية. قم بإنشاء مجلد التطبيق / المسارات / $ locale
قم بإنشاء ملف app / links / $ locale / index.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 للعثور على مدونة مفصلة.

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()} )} ); }

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

app routes $locale $slug.jsx index.jsx index.jsx entry.client.jsx entry.server.jsx root.jsx

ريمكس هيكل مجلد المدونة

خاتمة

هنا في هذه المقالة ، وصفت كيف يمكنك إضافة مقالات إلى أي موقع ويب Remix باستخدام واجهة برمجة التطبيقات التي توفرها Polyblog. لقد نجحنا في إنشاء مدونتنا متعددة اللغات باستخدام Polyblog API وجعلها أسهل بالنسبة لنا. يمكنك العثور على مزيد من المعلومات حول معلمات API المدعومة في مرجع Polyblog API . شكرا لك على الذهاب من خلال هذا البرنامج التعليمي! إذا علقت في أي خطوة ، فارجع إلى github repo وابحث عن مشكلتك. ترميز سعيد !!!

قم ببناء مدونة في لمح البصرpolyblog

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

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