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