Remix JS ile çok dilli bir blog oluşturmayı öğrenin

Remix JS ile çok dilli bir blog oluşturmayı öğrenin

Remix JS ile çok dilli bir blog oluşturma

Posted by Yakub Ali Siyam on 31 Aralık 2021

böylece sizin için her şeyi ayarlayabilir:

Bu yazıda, Remix JS kullanarak çok dilli bir blog oluşturmayı öğreneceğiz. Tüm süreç boyunca size adım adım rehberlik edeceğim.

Remix'e başlayalım.

Önkoşullar

Gereksinimler oldukça basit:

  • Düğümün kurulu olduğundan emin olun
  • Temel React anlayışı
  • Temel terminal bilgisi

Kurulum

 npx create-remix@latest

Yüklemek istediğiniz klasör adını seçin:

Remiks kurulumu

Yerleşik sunucu olan Remix Uygulama Sunucusu seçeneğini seçin (bunu daha sonra değiştirebilirsiniz):

Remiks kurulumu

Bu eğitimdeki kodu basitçe kopyalayıp yapıştırmak için Javascript'i seçin.

Remiks kurulumu

Yükleyiciye çalışmasını söylediğinizden emin olun

 npm install

Remiks kurulumu

Sonra cd klasör adı

Remix'i çalıştır npm run dev

Remiks kurulumu

Remix hakkında daha fazla bilgi için remix.run adresini ziyaret edin!

Bir Blog Sayfası Oluşturun:

Uygulama klasörü, ana uygulama mantığımızı içerir. Routes klasörü altındaki tüm klasörler ve dosyalar halka açıktır ve bir URL ile erişilebilir.

root.jsx — Uygulamamızın ana bileşenidir. Genel sayfa düzenimizi ve Bootstrap CDN'mizi içerir.

 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}

); }

Ana Sayfa : Burada yeni bir dosya oluşturun, app/routes/index.jsx. Blog sitemizin ana sayfasıdır.

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

Makaleler Bileşeni —

Polyblog API'sini kurun:

 npm install @polyblog/polyblog-js-client

Polyblog API'den çektiğimiz tüm blogları gösterecek şekilde kodumuzu yazacağız ve görüntüleyeceğiz. Makaleleri bulmak için localhost:3000/en ingilizce makaleleri bulun, localhost:3000/es ispanyolca makaleleri bulun.

Bir klasör app/routes/$locale oluşturun
Bir dosya oluşturun 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', })}

), )}
); }

Ayrıntılı bir makale gösteriliyor:

Bir dosya oluşturun app/routes/$locale/$slug.jsx

Tek bir makaleyi alıp ayrı bir sayfada görüntüleyen bileşendir. Ayrıntılı bir blog bulmak için localhost:3000/en/:slug adresine gidin.

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

)}
); }

Blog kimliğinizin yukarıdaki kodu girmesi için https://app.polyblog.io/signup adresinden kaydolun.

Kaydolduktan sonra, blogunuzun kimliğini bulmak için Ayarlar sayfasını ziyaret edin (ör. 1234567890abcdef12345678)

Klasör yapımız şuna benziyor

 
app
 routes
 $locale
 $slug.jsx
 index.jsx
 index.jsx
 entry.client.jsx
 entry.server.jsx
 root.jsx
 
Remix blog klasörü yapısı


Bu projenin klasör yapısı

Çözüm

İşte bu yazıda, Polyblog tarafından sağlanan API'yi kullanarak herhangi bir Remix web sitesine nasıl makale ekleyebileceğinizi anlattım. Çok dilli blogumuzu Polyblog API ile başarıyla oluşturduk ve bu bizim için kolaylaştırdı. Polyblog API Referansında desteklenen API parametreleri hakkında daha fazla bilgi bulabilirsiniz.

Bu eğitimden geçtiğiniz için teşekkür ederiz! Herhangi bir adımda takılırsanız, bu github deposuna bakın ve sorununuzu bulun.

Mutlu Kodlama!!!

Bültenimize kaydolun

Recent articles