Apprenez à créer un blog multilingue avec Remix JS

Apprenez à créer un blog multilingue avec Remix JS

Créer un blog multilingue avec Remix JS

Posted by Yakub Ali Siyam on 31 décembre 2021

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 :

Installation de remixage

Choisissez l'option Remix App Server, qui est le serveur intégré (vous pouvez le changer plus tard) :

Installation de remixage

Choisissez Javascript pour simplement copier-coller le code de ce tutoriel.

Installation de remixage

Assurez-vous de dire au programme d'installation de s'exécuter

 npm install

Installation de remixage

Puis cd nom du dossier

Exécuter remix npm exécuter dev

Installation de remixage

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}

{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
 
Remixer la structure des dossiers du blog


Structure des dossiers de ce projet

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 !!!

Inscrivez-vous à notre newsletter

Recent articles