---
title: Blog Listesi
description: Tüm blog yazılarının listelendiği blog listesi sayfası component'i.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Blog listesi sayfası, tüm blog yazılarının listelendiği sayfadır. Her blog yazısı, yayın tarihine göre sıralanarak listede bir **Blog Card** olarak gösterilir.

Kaynak kodun tamamına [buradan](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme/src/components/page-blogs) ulaşabilirsiniz.

Bu component'in blog sayfasındaki görünümü şu şekildedir:

![Örnek temadaki blog listesi sayfası](https://builders.ikas.com/media/ikas-dev/example-theme-blogs-871965dfa8f39224c6a5bbccb103336e.png)

Oluşturulan type şu şekildedir:

```tsx title="src/components/__generated__/types.ts"
export type PageBlogsProps = {
  blogList: IkasBlogList;
  title?: string;
  showAuthor?: boolean;
  showDescription?: boolean;
  showCategory?: boolean;
  showPublishedDate?: boolean;
  imageAspectRatio: ImageAspectRatio;
};
```

Blog listesini göstermek için [IkasBlogList](https://builders.ikas.com/docs/headless-theme/api/blog#ikas-blog-list) kullanılır. Her blog yazısını **Blog Card** olarak göstermek için `blogList.data` field'ını kullanıyoruz. Müşterinin önceki ya da sonraki sayfaya geçip geçemeyeceğini kontrol etmek için `blogList.hasPrev` ve `blogList.hasNext` pagination field'larından, yeni bir blog sayfası almak için ise `getPage` fonksiyonundan yararlanıyoruz. [IkasBlogList](https://builders.ikas.com/docs/headless-theme/api/blog#ikas-blog-list) üzerindeki `getNext` ve `getPrev` fonksiyonlarını da kullanabilirsiniz. Ayrıntılar için [pagination component'ine](https://github.com/ikascom/ikas-examples/blob/main/ikas-theme/src/components/components/pagination/index.tsx) göz atın.

Diğer prop'lar, satıcılara özelleştirme seçenekleri sunmak için vardır. Bu prop'lar sayesinde satıcılar blog sayfalarını olabildiğince özelleştirebilir.