حتى يتمكن من إعداد كل شيء لك:
في هذه المقالة ، سنتعلم كيفية إنشاء مدونة متعددة اللغات باستخدام Remix JS. سأوجهك خلال العملية بأكملها خطوة بخطوة.
لنبدأ مع Remix.
المتطلبات الأساسية
المتطلبات بسيطة جدًا:
التركيب
npx create-remix@latest
اختر اسم المجلد الذي تريد تثبيته:
اختر خيار Remix App Server ، وهو الخادم المضمن (يمكنك تغيير ذلك لاحقًا):
اختر Javascript لنسخ الرمز ولصقه من هذا البرنامج التعليمي.
تأكد من إخبار برنامج التثبيت بالتشغيل
npm install
ثم cd foldername
قم بتشغيل remix npm run 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 (
Blog
{children}
{process.env.NODE_ENV === 'development' ? : null}
{/* Bootstrap JS CDN */}
);
}
function Layout({ children }) {
return (
<>
{/* Navbar */}
{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,
subtitle,
}) => (
{title}
{subtitle}
Posted by {author} on{' '}
{new Date(creationTime).toLocaleString(locale, {
dateStyle: 'long',
})}
),
)}
>
);
}
عرض مقال مفصل:
قم بإنشاء ملف app / route / $ 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?.subtitle}
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 وابحث عن مشكلتك.
ترميز سعيد !!!