para que pueda configurar todo para usted:

En este artículo, aprenderemos cómo crear un blog en varios idiomas con Remix JS. Te estaré guiando a lo largo de todo el proceso paso a paso.

Comencemos con Remix.

requisitos previos

Los requisitos son bastante simples:

• Asegúrese de tener el nodo instalado
• Comprensión básica de React
• Conocimientos básicos de terminales

Instalación

 npx create-remix@latest

Elija el nombre de la carpeta que desea instalar:

Elige la opción Remix App Server, que es el servidor integrado (puedes cambiarlo más adelante):

Elija Javascript para simplemente copiar y pegar el código de este tutorial.

Asegúrese de decirle al instalador que se ejecute

 npm install

Luego cd nombre de la carpeta

Ejecutar remix npm ejecutar dev

Para obtener más información sobre Remix, visite remix.run .

Crear una página de blog:

La carpeta de la aplicación contiene nuestra lógica de aplicación principal. Todas las carpetas y archivos bajo la carpeta de rutas están expuestos al público y se puede acceder a ellos con una URL.

root.jsx: es el componente principal de nuestra aplicación. Contiene nuestro diseño de página general y 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}
      
    
  );
 }

Página de inicio: cree un nuevo archivo aquí, app/routes/index.jsx. Es la página de inicio de nuestro sitio web 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}`);
 }

Componente de artículos —

Instale la API de Polyblog:

 npm install @polyblog/polyblog-js-client

Escribiremos nuestro código para mostrar todos los blogs que obtuvimos de la API de Polyblog y mostrarlo. Para encontrar los artículos vaya a localhost:3000/es para encontrar artículos en inglés, vaya a localhost:3000/es para encontrar artículos en español.

Crea una carpeta app/routes/$locale
Cree un archivo 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',
                      })}
                    
                  
                
              
            
          ),
        )}
      
    
  );
 }

Mostrando un artículo detallado:

Cree un archivo app/routes/$locale/$slug.jsx

Es el componente que busca un solo artículo y lo muestra en una página separada. Vaya a localhost:3000/en/:slug para encontrar un blog detallado.

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

          

          

        
      )}
    
  );
 }

Regístrese en https://app.polyblog.io/signup para obtener su ID de blog para ingresar el código anterior.

Después de registrarse, visite la página Configuración para encontrar la identificación de su blog (ej. 1234567890abcdef12345678)

Nuestra estructura de carpetas se ve así

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

Conclusión

Aquí, en este artículo, describí cómo puede agregar artículos a cualquier sitio web de Remix utilizando la API proporcionada por Polyblog. Hemos creado con éxito nuestro blog multilingüe con la API de Polyblog y nos lo ha facilitado. Puede encontrar más información sobre los parámetros de la API admitidos en la Referencia de la API de Polyblog .

¡Gracias por seguir este tutorial! Si está atascado en algún paso, consulte este repositorio de github y encuentre su problema.

¡¡¡Feliz codificación!!!