Scopri come creare un blog multilingue con Remix JS

Scopri come creare un blog multilingue con Remix JS

Creazione di un blog multilingue con Remix JS

Posted by Yakub Ali Siyam on 31 dicembre 2021

in modo che possa configurare tutto per te:

In questo articolo impareremo come creare un blog multilingue utilizzando Remix JS. Ti guiderò passo dopo passo durante l'intero processo.

Iniziamo con Remix.

Prerequisiti

I requisiti sono piuttosto semplici:

  • Assicurati di aver installato node
  • Comprensione di base di React
  • Conoscenza terminale di base

Installazione

 npx create-remix@latest

Scegli il nome della cartella che desideri installare:

Remixare l'installazione

Scegli l'opzione Remix App Server, che è il server integrato (puoi cambiarlo in seguito):

Remixare l'installazione

Scegli Javascript per copiare e incollare semplicemente il codice da questo tutorial.

Remixare l'installazione

Assicurati di dire al programma di installazione di eseguire

 npm install

Remixare l'installazione

Quindi cd nomecartella

Esegui remix npm esegui dev

Remixare l'installazione

Per ulteriori informazioni su Remix, visita remix.run !

Crea una pagina del blog:

La cartella dell'app contiene la logica dell'app principale. Tutte le cartelle e i file nella cartella route sono esposti al pubblico e sono accessibili con un URL.

root.jsx — È il componente principale della nostra app. Contiene il nostro layout di pagina generale e 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}

); }

Home page: crea un nuovo file qui, app/routes/index.jsx. È la homepage del nostro 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 Articoli —

Installa l'API di Polyblog:

 npm install @polyblog/polyblog-js-client

Scriveremo il nostro codice per visualizzare tutti i blog che abbiamo recuperato dall'API Polyblog e visualizzarlo. Per trovare gli articoli vai su localhost:3000/en trova articoli in inglese, vai su localhost:3000/es trova articoli in spagnolo.

Crea una cartella app/routes/$locale
Crea un file 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', })}

), )}
); }

Visualizzazione di un articolo dettagliato:

Crea un file app/routes/$locale/$slug.jsx

È il componente che recupera un singolo articolo e lo visualizza in una pagina separata.Vai a localhost:3000/en/:slug per trovare un blog dettagliato.

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

)}
); }

Iscriviti su https://app.polyblog.io/signup per ottenere il tuo blogId da inserire nel codice sopra.

Dopo esserti registrato visita la pagina Impostazioni per trovare l'id del tuo blog (es. 1234567890abcdef12345678)

La nostra struttura di cartelle è simile a questa

 
app
 routes
 $locale
 $slug.jsx
 index.jsx
 index.jsx
 entry.client.jsx
 entry.server.jsx
 root.jsx
 
Remixa la struttura delle cartelle del blog


Struttura delle cartelle di questo progetto

Conclusione

Qui in questo articolo, ho descritto come aggiungere articoli a qualsiasi sito Web Remix utilizzando l'API fornita da Polyblog. Abbiamo creato con successo il nostro blog multilingue con l'API Polyblog e questo ci ha reso tutto più semplice. Puoi trovare maggiori informazioni sui parametri API supportati nella Polyblog API Reference .

Grazie per aver seguito questo tutorial! Se sei bloccato su qualsiasi passaggio, fai riferimento a questo repository github e trova il tuo problema.

Buona codifica!!!

Iscriviti alla nostra newsletter

Recent articles