Erfahren Sie, wie Sie mit Remix JS einen mehrsprachigen Blog erstellen

Erfahren Sie, wie Sie mit Remix JS einen mehrsprachigen Blog erstellen

Erstellen eines mehrsprachigen Blogs mit Remix JS

Posted by Yakub Ali Siyam on 31. Dezember 2021

damit es alles für Sie einrichten kann:

In diesem Artikel erfahren Sie, wie Sie mit Remix JS einen mehrsprachigen Blog erstellen. Ich begleite Sie Schritt für Schritt durch den gesamten Prozess.

Beginnen wir mit Remix.

Voraussetzungen

Die Anforderungen sind ziemlich einfach:

  • Stellen Sie sicher, dass der Knoten installiert ist
  • Grundlegendes Verständnis von React
  • Terminal- Grundkenntnisse

Installation

 npx create-remix@latest

Wählen Sie den Ordnernamen, den Sie installieren möchten:

Remix-Installation

Wählen Sie die Option Remix App Server, die der integrierte Server ist (Sie können dies später ändern):

Remix-Installation

Wählen Sie Javascript aus, um den Code aus diesem Tutorial einfach zu kopieren und einzufügen.

Remix-Installation

Stellen Sie sicher, dass Sie dem Installationsprogramm sagen, dass es ausgeführt werden soll

 npm install

Remix-Installation

Dann cd Ordnername

Führen Sie remix npm aus und führen Sie dev aus

Remix-Installation

Weitere Informationen zu Remix finden Sie unter remix.run !

Erstellen Sie eine Blog-Seite:

Der App -Ordner enthält unsere Haupt-App-Logik. Alle Ordner und Dateien im Routenordner sind öffentlich zugänglich und können über eine URL aufgerufen werden.

root.jsx — Es ist die Hauptkomponente unserer App. Es enthält unser allgemeines Seitenlayout und 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}

); }

Startseite : Erstellen Sie hier eine neue Datei, app/routes/index.jsx. Es ist die Startseite unserer Blog-Website.

 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}`);
 }

Artikelkomponente —

Polyblog-API installieren:

 npm install @polyblog/polyblog-js-client

Wir schreiben unseren Code, um alle Blogs anzuzeigen, die wir von der Polyblog-API abgerufen haben, und zeigen sie an. Um die Artikel zu finden, gehen Sie zu localhost:3000/en, finden Sie englische Artikel, gehen Sie zu localhost:3000/es, finden Sie spanische Artikel.

Erstellen Sie einen Ordner app/routes/$locale
Erstellen Sie eine Datei 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', })}

), )}
); }

Anzeige eines ausführlichen Artikels:

Erstellen Sie eine Datei app/routes/$locale/$slug.jsx

Es ist die Komponente, die einen einzelnen Artikel abruft und auf einer separaten Seite anzeigt. Gehen Sie zu localhost:3000/en/:slug, um einen detaillierten Blog zu finden.

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

)}
); }

Melden Sie sich unter https://app.polyblog.io/signup an, um Ihre blogId zur Eingabe in den obigen Code zu erhalten.

Besuchen Sie nach der Anmeldung die Seite Einstellungen, um die ID Ihres Blogs zu finden (z. B. 1234567890abcdef12345678).

Unsere Ordnerstruktur sieht so aus

 
app
 routes
 $locale
 $slug.jsx
 index.jsx
 index.jsx
 entry.client.jsx
 entry.server.jsx
 root.jsx
 
Remix-Blog-Ordnerstruktur


Ordnerstruktur dieses Projekts

Fazit

Hier in diesem Artikel habe ich beschrieben, wie Sie mithilfe der von Polyblog bereitgestellten API Artikel zu jeder Remix-Website hinzufügen können. Wir haben unseren mehrsprachigen Blog erfolgreich mit der Polyblog- API erstellt und es für uns einfacher gemacht. Weitere Informationen zu den unterstützten API-Parametern finden Sie in der Polyblog-API-Referenz .

Vielen Dank, dass Sie dieses Tutorial durchgearbeitet haben! Wenn Sie bei einem Schritt stecken bleiben, lesen Sie dieses Github-Repo und finden Sie Ihr Problem.

Viel Spaß beim Codieren!!!

Melden Sie sich für unseren Newsletter an

Recent articles