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