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:

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

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

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

 npm install

Sonra cd klasör adı

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

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

Çö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!!!