pour qu'il puisse tout configurer pour vous :
Dans cet article, nous allons apprendre à créer un blog multilingue à l'aide de Remix JS. Je vous guiderai pas à pas tout au long du processus.
Commençons avec Remix.
Conditions préalables
Les exigences sont assez simples :
- Assurez-vous que le nœud est installé
- Compréhension de base de React
- Connaissances de base des terminaux
Installation
npx create-remix@latest
Choisissez le nom du dossier que vous souhaitez installer :
Choisissez l'option Remix App Server, qui est le serveur intégré (vous pouvez le changer plus tard) :
Choisissez Javascript pour simplement copier-coller le code de ce tutoriel.
Assurez-vous de dire au programme d'installation de s'exécuter
npm install
Puis cd nom du dossier
Exécuter remix npm exécuter dev
Pour plus d'informations sur Remix, visitez remix.run !
Créer une page de blog :
Le dossier de l' application contient notre logique d'application principale. Tous les dossiers et fichiers sous le dossier routes sont exposés au public et sont accessibles avec une URL.
root.jsx — C'est le composant principal de notre application. Il contient notre mise en page générale et 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}
);
}
Page d'accueil : Créez un nouveau fichier ici, app/routes/index.jsx. C'est la page d'accueil de notre blog.
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}`);
}
Composante des articles —
Installez l'API Polyblog :
npm install @polyblog/polyblog-js-client
Nous allons écrire notre code pour afficher tous les blogs que nous avons récupérés à partir de l'API Polyblog et l'afficher. Pour trouver les articles, allez sur localhost:3000/en pour trouver des articles en anglais, allez sur localhost:3000/es pour trouver des articles en espagnol.
Créer un dossier app/routes/$locale
Créez un fichier app/routes/$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',
})}
),
)}
>
);
}
Affichage d'un article détaillé :
Créez un fichier app/routes/$locale/$slug.jsx
C'est le composant qui récupère un seul article et l'affiche sur une page séparée. Allez sur localhost:3000/en/:slug pour trouver un blog détaillé.
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()}
>
)}
);
}
Inscrivez-vous sur https://app.polyblog.io/signup pour obtenir votre blogId à saisir dans le code ci-dessus.
Après votre inscription, visitez la page Paramètres pour trouver l'identifiant de votre blog (ex. 1234567890abcdef12345678)
Notre structure de dossiers ressemble à ceci
app
routes
$locale
$slug.jsx
index.jsx
index.jsx
entry.client.jsx
entry.server.jsx
root.jsx

Conclusion
Ici, dans cet article, j'ai décrit comment vous pouvez ajouter des articles à n'importe quel site Web Remix en utilisant l'API fournie par Polyblog. Nous avons créé avec succès notre blog multilingue avec l'API Polyblog et cela nous a facilité la tâche. Vous pouvez trouver plus d'informations sur les paramètres d'API pris en charge dans la référence de l' API Polyblog .
Merci d'avoir suivi ce tutoriel ! Si vous êtes bloqué à une étape, reportez-vous à ce dépôt github et trouvez votre problème.
Bon codage !!!