Aprenda a criar um blog multilíngue com o Remix JS

Aprenda a criar um blog multilíngue com o Remix JS

Criando um blog multilíngue com Remix JS

Posted by Yakub Ali Siyam on 31 de dezembro de 2021

para que ele possa configurar tudo para você:

Neste artigo, aprenderemos como criar um blog multilíngue usando o Remix JS. Estarei orientando você durante todo o processo passo a passo.

Vamos começar com Remix.

Pré-requisitos

Os requisitos são bem simples:

  • Verifique se você tem o instalado
  • Compreensão básica do React
  • Conhecimento básico do terminal

Instalação

 npx create-remix@latest

Escolha o nome da pasta que deseja instalar:

instalação remix

Escolha a opção Remix App Server, que é o servidor integrado (você pode alterar isso mais tarde):

instalação remix

Escolha Javascript para simplesmente copiar e colar o código deste tutorial.

instalação remix

Certifique-se de dizer ao instalador para executar

 npm install

instalação remix

Em seguida, cd nome da pasta

Executar remix npm executar dev

instalação remix

Para obter mais informações sobre o Remix, visite remix.run !

Criar uma página de blog:

A pasta do aplicativo contém nossa lógica principal do aplicativo. Todas as pastas e arquivos na pasta de rotas são expostos ao público e podem ser acessados com um URL.

root.jsx — É o componente principal do nosso aplicativo. Ele contém nosso layout de página geral 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 : Crie um novo arquivo aqui, app/routes/index.jsx. É a página inicial do nosso 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 artigos —

Instale a API do Polyblog:

 npm install @polyblog/polyblog-js-client

Escreveremos nosso código para exibir todos os blogs que buscamos na API do Polyblog e exibi-los. Para encontrar os artigos, vá para localhost:3000/en encontre artigos em inglês, vá para localhost:3000/es encontre artigos em espanhol.

Crie uma pasta app/routes/$locale
Crie um arquivo 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', })}

), )}
); }

Exibindo um artigo detalhado:

Crie um arquivo app/routes/$locale/$slug.jsx

É o componente que busca um único artigo e o exibe em uma página separada. Acesse localhost:3000/en/:slug para encontrar um blog detalhado.

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

)}
); }

Inscreva-se em https://app.polyblog.io/signup para obter o seu blogId para inserir o código acima.

Depois de se inscrever visite a página Configurações para encontrar o id do seu blog (ex. 1234567890abcdef12345678)

Nossa estrutura de pastas fica assim

 
app
 routes
 $locale
 $slug.jsx
 index.jsx
 index.jsx
 entry.client.jsx
 entry.server.jsx
 root.jsx
 
Estrutura de pastas do blog Remix


Estrutura de pastas deste projeto

Conclusão

Aqui neste artigo, descrevi como você pode adicionar artigos a qualquer site Remix usando a API fornecida pelo Polyblog. Criamos com sucesso nosso blog multilíngue com a API Polyblog e isso facilitou para nós. Você pode encontrar mais informações sobre os parâmetros de API suportados no Polyblog API Reference .

Obrigado por passar por este tutorial! Se você estiver preso em alguma etapa, consulte este repositório do github e encontre seu problema.

Codificação feliz!!!

Assine a nossa newsletter

Recent articles