Modern web siteleri genellikle dinamik i\u00e7eri\u011fe sahip olup, bu i\u00e7eri\u011fin d\u00fczenli ve eri\u015filebilir bir \u015fekilde sunulmas\u0131 kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Gatsby, statik site olu\u015fturucu (SSG) olarak bilinir ve performans\u0131, g\u00fcvenli\u011fi ve geli\u015ftirici deneyimiyle \u00f6ne \u00e7\u0131kar. Bir blog, e-ticaret sitesi veya dok\u00fcmantasyon platformu gibi \u00e7ok say\u0131da i\u00e7eri\u011fe sahip Gatsby projelerinde, t\u00fcm i\u00e7eri\u011fi tek bir sayfada g\u00f6stermek hem y\u00fckleme s\u00fcrelerini uzat\u0131r hem de kullan\u0131c\u0131lar\u0131n arad\u0131klar\u0131n\u0131 bulmas\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n
\u0130\u015fte tam bu noktada sayfaland\u0131rma (pagination) devreye girer. Sayfaland\u0131rma, i\u00e7eri\u011fi mant\u0131ksal olarak daha k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lerek farkl\u0131 sayfalarda sunma y\u00f6ntemidir. Bu, hem sitenin performans\u0131n\u0131 art\u0131r\u0131r hem de kullan\u0131c\u0131lar\u0131n i\u00e7erik aras\u0131nda kolayca gezinmesini sa\u011flar. Gatsby’nin statik yap\u0131s\u0131 nedeniyle, sayfaland\u0131rma i\u015fleminin build zaman\u0131nda ger\u00e7ekle\u015fmesi gerekir. Bu, her bir sayfa i\u00e7in ayr\u0131 bir HTML dosyas\u0131n\u0131n olu\u015fturulmas\u0131 anlam\u0131na gelir.<\/p>\n
Gatsby ekosisteminde sayfaland\u0131rma \u00e7\u00f6z\u00fcmleri i\u00e7in bir\u00e7ok se\u00e7enek bulunsa da, Projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutlardan birini \u00e7al\u0131\u015ft\u0131rarak eklentiyi y\u00fckleyebilirsiniz:<\/p>\n Sayfaland\u0131rman\u0131n kalbi, Gatsby’nin build s\u00fcrecinde \u00e7al\u0131\u015fan A\u015fa\u011f\u0131daki \u00f6rnek, Markdown dosyalar\u0131ndan (\u00f6rne\u011fin blog yaz\u0131lar\u0131) sayfaland\u0131r\u0131lm\u0131\u015f listeler olu\u015fturmay\u0131 g\u00f6stermektedir. \u00d6ncelikle, t\u00fcm Markdown yaz\u0131lar\u0131n\u0131 sorgulaman\u0131z ve ard\u0131ndan bu verileri Yukar\u0131daki kodda \u00f6nemli noktalar:<\/p>\n Bu yap\u0131land\u0131rma ile Gatsby, build zaman\u0131nda gerekli t\u00fcm sayfaland\u0131r\u0131lm\u0131\u015f listeleme sayfalar\u0131n\u0131 otomatik olarak olu\u015fturacakt\u0131r.<\/p>\n Bu \u015fablon, sayfa ba\u015f\u0131na g\u00f6nderileri listelemek ve sayfaland\u0131rma ba\u011flant\u0131lar\u0131n\u0131 g\u00f6stermek i\u00e7in kullan\u0131lacakt\u0131r. {node.excerpt}<\/p>\n <\/Link>\n <\/li>\n ))}\n <\/ul>\n\n Bu bile\u015fendeki kilit noktalar:<\/p>\n Bu \u015fablon sayesinde, her bir sayfaland\u0131r\u0131lm\u0131\u015f sayfa do\u011fru i\u00e7eri\u011fi g\u00f6sterecek ve kullan\u0131c\u0131lar sayfalar aras\u0131nda rahat\u00e7a gezinebilecektir.<\/p>\n Blog yaz\u0131lar\u0131n\u0131 sayfaland\u0131rd\u0131\u011f\u0131m\u0131z gibi, \u00fcr\u00fcnler, kategoriler veya farkl\u0131 dillerdeki i\u00e7erikler gibi di\u011fer i\u00e7erik t\u00fcrlerini de sayfaland\u0131rabilirsiniz. Tek yapman\u0131z gereken, Bu \u00f6rnekte, her kategori i\u00e7in ayr\u0131 bir sayfaland\u0131r\u0131lm\u0131\u015f liste olu\u015fturulmu\u015ftur. Sayfaland\u0131r\u0131lm\u0131\u015f sayfalar i\u00e7in SEO \u00f6nemlidir. Arama motorlar\u0131n\u0131n i\u00e7eri\u011finizi do\u011fru bir \u015fekilde dizine eklemesini sa\u011flamak i\u00e7in a\u015fa\u011f\u0131daki noktalar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurun:<\/p>\n Yukar\u0131daki \u00f6rnekte basit bir navigasyon g\u00f6sterdik. Kendi CSS’inizi veya bir UI k\u00fct\u00fcphanesini (\u00f6rne\u011fin Tailwind CSS, styled-components) kullanarak sayfaland\u0131rma bile\u015fenini tamamen \u00f6zelle\u015ftirebilirsiniz. Bu geli\u015fmi\u015f \u00f6zellikler ve en iyi uygulamalarla, Gatsby sitenizde sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 dostu ve arama motoru dostu bir sayfaland\u0131rma deneyimi sunabilirsiniz.<\/p>\n Gatsby projelerinde sayfaland\u0131rma, b\u00fcy\u00fck i\u00e7erik k\u00fcmelerini y\u00f6netmek ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in vazge\u00e7ilmez bir \u00f6zelliktir. Art\u0131k Gatsby sitelerinizde i\u00e7erik ak\u0131\u015f\u0131n\u0131 d\u00fczenleyebilir, performans\u0131 art\u0131rabilir ve kullan\u0131c\u0131lar\u0131n\u0131z\u0131n arad\u0131klar\u0131 bilgiye daha h\u0131zl\u0131 ula\u015fmas\u0131n\u0131 sa\u011flayabilirsiniz. 1. Evet, kesinlikle. 2. Sayfalama bile\u015fenini nas\u0131l stilize edebilirim?<\/strong><\/p>\n Sayfalama bile\u015fenini tamamen kendi CSS’inizle, CSS mod\u00fclleriyle, Styled Components gibi CSS-in-JS k\u00fct\u00fcphaneleriyle veya Tailwind CSS gibi utility-first CSS framework’leriyle stilize edebilirsiniz. 3. \u00c7ok say\u0131da (\u00f6rne\u011fin on binlerce) yaz\u0131 varsa ne yapmal\u0131y\u0131m?<\/strong><\/p>\n Gatsby’nin build s\u00fcresi, olu\u015fturulan sayfa say\u0131s\u0131yla do\u011fru orant\u0131l\u0131d\u0131r. \u00c7ok say\u0131da sayfa olu\u015fturmak build s\u00fcresini uzatabilir. Ancak 4. Evet, 5. Sayfaland\u0131r\u0131lm\u0131\u015f sayfalar i\u00e7in SEO nas\u0131l yap\u0131l\u0131r?<\/strong><\/p>\n Her sayfaland\u0131r\u0131lm\u0131\u015f sayfan\u0131n HTML <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Giri\u015f: Gatsby ve Sayfaland\u0131rma Neden \u00d6nemli?\nModern web siteleri genellikle dinamik i\u00e7eri\u011fe sahip olup, bu i\u00e7eri\u011fin d\u00fczenli ve eri\u015filebilir","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34794","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\ngatsby-awesome-pagination<\/code> bu i\u015fi son derece basit ve etkili bir \u015fekilde halleden pop\u00fcler bir eklentidir. Bu eklenti, Gatsby’nin createPages<\/code> API’sini kullanarak, sorgulad\u0131\u011f\u0131n\u0131z verilere g\u00f6re otomatik olarak sayfalar olu\u015fturur ve bu sayfalara do\u011fru ba\u011flam\u0131 (context) sa\u011flar. B\u00f6ylece, geli\u015ftiriciler karma\u015f\u0131k mant\u0131k yazmak yerine i\u00e7eri\u011fe odaklanabilirler. Bu rehberde, gatsby-awesome-pagination<\/code>‘\u0131 kullanarak Gatsby sitenizde nas\u0131l kapsaml\u0131 bir sayfaland\u0131rma sistemi kuraca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz.<\/p>\ngatsby-awesome-pagination Kurulumu ve Temel Kullan\u0131m<\/h2>\n
gatsby-awesome-pagination<\/code>‘\u0131 projenize entegre etmek olduk\u00e7a basittir. \u0130lk ad\u0131m, eklentiyi projenize kurmakt\u0131r.<\/p>\nKurulum<\/h3>\n
npm install gatsby-awesome-pagination\nveya<\/h2>\nyarn add gatsby-awesome-pagination\n<\/code><\/pre>\n
gatsby-node.js Yap\u0131land\u0131rmas\u0131<\/h3>\n
gatsby-node.js<\/code> dosyas\u0131d\u0131r. Bu dosya, GraphQL sorgular\u0131n\u0131 kullanarak verileri \u00e7eker ve createPages<\/code> API’si arac\u0131l\u0131\u011f\u0131yla dinamik olarak sayfalar olu\u015fturur. gatsby-awesome-pagination<\/code>, bu s\u00fcreci basitle\u015ftirmek i\u00e7in bir paginate<\/code> fonksiyonu sunar.<\/p>\npaginate<\/code> fonksiyonuna iletmeniz gerekir.<\/p>\n\/\/ gatsby-node.js\nconst { paginate } = require('gatsby-awesome-pagination');\nconst path = require('path');\n\nexports.createPages = async ({ graphql, actions }) => {\n const { createPage } = actions;\n\n \/\/ Blog yaz\u0131lar\u0131n\u0131 listeleyecek \u015fablonu tan\u0131mlay\u0131n\n const blogPostListTemplate = path.resolve('.\/src\/templates\/blog-list.js');\n const blogPostTemplate = path.resolve('.\/src\/templates\/blog-post.js'); \/\/ Tekil blog yaz\u0131lar\u0131 i\u00e7in\n\n \/\/ T\u00fcm Markdown yaz\u0131lar\u0131n\u0131 sorgula\n const result = await graphql(\n {\n allMarkdownRemark(\n sort: { fields: [frontmatter___date], order: DESC }\n limit: 1000 \/\/ \u00c7ok say\u0131da yaz\u0131 varsa daha fazlas\u0131n\u0131 \u00e7ekin\n ) {\n edges {\n node {\n id\n frontmatter {\n slug\n }\n }\n }\n }\n }\n <\/code>);\n\n if (result.errors) {\n throw result.errors;\n }\n\n const posts = result.data.allMarkdownRemark.edges;\n\n \/\/ Tekil blog yaz\u0131lar\u0131n\u0131 olu\u015ftur\n posts.forEach((post, index) => {\n const previous = index === posts.length - 1 ? null : posts[index + 1].node;\n const next = index === 0 ? null : posts[index - 1].node;\n\n createPage({\n path: \/blog\/${post.node.frontmatter.slug}\/<\/code>,\n component: blogPostTemplate,\n context: {\n slug: post.node.frontmatter.slug,\n previous,\n next,\n },\n });\n });\n\n \/\/ gatsby-awesome-pagination kullanarak sayfaland\u0131r\u0131lm\u0131\u015f listeleri olu\u015ftur\n paginate({\n createPage, \/\/ Gatsby'nin createPage fonksiyonu\n items: posts, \/\/ Sayfaland\u0131r\u0131lacak \u00f6\u011felerin dizisi\n itemsPerPage: 5, \/\/ Her sayfada ka\u00e7 \u00f6\u011fe olaca\u011f\u0131\n pathPrefix: '\/blog', \/\/ Sayfaland\u0131r\u0131lm\u0131\u015f sayfalar\u0131n URL \u00f6neki (\u00f6rne\u011fin: \/blog, \/blog\/2, \/blog\/3)\n component: blogPostListTemplate, \/\/ Sayfaland\u0131r\u0131lm\u0131\u015f listeyi g\u00f6sterecek React bile\u015feni\n });\n};\n<\/code><\/pre>\n\n
graphql<\/code> sorgusu, t\u00fcm blog yaz\u0131lar\u0131n\u0131 (allMarkdownRemark<\/code>) \u00e7eker. Bu yaz\u0131lar daha sonra sayfaland\u0131r\u0131lacak ana veri k\u00fcmesini olu\u015fturur.<\/li>\npaginate<\/code> fonksiyonu, createPage<\/code>, items<\/code> (sayfaland\u0131r\u0131lacak \u00f6\u011feler), itemsPerPage<\/code> (sayfa ba\u015f\u0131na \u00f6\u011fe say\u0131s\u0131), pathPrefix<\/code> (URL’lerin ba\u015flang\u0131c\u0131) ve component<\/code> (sayfay\u0131 render edecek React \u015fablonu) parametrelerini al\u0131r.<\/li>\npathPrefix: '\/blog'<\/code> ayar\u0131 sayesinde, sayfalar \/blog<\/code>, \/blog\/2<\/code>, \/blog\/3<\/code> \u015feklinde URL’lere sahip olacakt\u0131r.<\/li>\n<\/ul>\nSayfalama Bile\u015fenini Olu\u015fturma ve Verileri Kullanma<\/h2>\n
gatsby-node.js<\/code> dosyas\u0131nda tan\u0131mlad\u0131\u011f\u0131m\u0131z blogPostListTemplate<\/code>, yani src\/templates\/blog-list.js<\/code>, sayfaland\u0131r\u0131lm\u0131\u015f g\u00f6nderileri g\u00f6sterecek React bile\u015fenidir. Bu bile\u015fen, paginate<\/code> fonksiyonunun sa\u011flad\u0131\u011f\u0131 ba\u011flam (context) verilerine eri\u015febilir.<\/p>\n\u015eablon Dosyas\u0131 (src\/templates\/blog-list.js)<\/h3>\n
pageContext<\/code> objesi, gatsby-awesome-pagination<\/code> taraf\u0131ndan sa\u011flanan t\u00fcm sayfaland\u0131rma bilgilerini i\u00e7erir.<\/p>\n\/\/ src\/templates\/blog-list.js\nimport React from 'react';\nimport { graphql, Link } from 'gatsby';\n\nconst BlogList = ({ data, pageContext }) => {\n const posts = data.allMarkdownRemark.edges;\n const { humanPageNumber, numberOfPages, previousPagePath, nextPagePath } = pageContext;\n\n return (\n Blog Yaz\u0131lar\u0131 - Sayfa {humanPageNumber}<\/h2>\n
\n {posts.map(({ node }) => (\n
{node.frontmatter.title}<\/h3>\n
Sayfa Navigasyonu<\/h3>\n
\n {previousPagePath && (\n
\/blog\/${i + 1}<\/code>}>\n {i + 1}\n <\/Link>\n <\/li>\n ))}\n {nextPagePath && (\n \n query blogListQuery($skip: Int!, $limit: Int!) {\n allMarkdownRemark(\n sort: { fields: [frontmatter___date], order: DESC }\n skip: $skip\n limit: $limit\n ) {\n edges {\n node {\n id\n frontmatter {\n title\n date(formatString: \"DD MMMM, YYYY\")\n slug\n }\n excerpt(pruneLength: 200)\n }\n }\n }\n }\n<\/code>;\n<\/code><\/pre>\n\n
pageContext<\/code>: Bu prop, gatsby-awesome-pagination<\/code> taraf\u0131ndan otomatik olarak doldurulur. \u0130\u00e7erisinde humanPageNumber<\/code> (mevcut sayfa numaras\u0131), numberOfPages<\/code> (toplam sayfa say\u0131s\u0131), previousPagePath<\/code> (\u00f6nceki sayfan\u0131n URL’si) ve nextPagePath<\/code> (sonraki sayfan\u0131n URL’si) gibi yararl\u0131 bilgiler bulunur.<\/li>\ngraphql<\/code> sorgusu: Bu sorgu, $skip<\/code> ve $limit<\/code> de\u011fi\u015fkenlerini kullanarak sadece mevcut sayfaya ait g\u00f6nderileri \u00e7eker. Bu de\u011fi\u015fkenler, gatsby-node.js<\/code>‘deki paginate<\/code> fonksiyonu taraf\u0131ndan otomatik olarak pageContext<\/code>‘e eklenir ve sorguya iletilir.<\/li>\npreviousPagePath<\/code>, nextPagePath<\/code> ve numberOfPages<\/code> kullanarak dinamik olarak “\u00d6nceki”, “Sonraki” ve sayfa numaras\u0131 ba\u011flant\u0131lar\u0131n\u0131 olu\u015fturabiliriz. Link<\/code> bile\u015feni, Gatsby’nin performansl\u0131 sayfa ge\u00e7i\u015flerini sa\u011flar.<\/li>\n<\/ul>\nGeli\u015fmi\u015f \u00d6zellikler ve En \u0130yi Uygulamalar<\/h2>\n
gatsby-awesome-pagination<\/code>, temel sayfaland\u0131rman\u0131n \u00f6tesinde, daha esnek ve g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunmak i\u00e7in baz\u0131 geli\u015fmi\u015f \u00f6zellikler ve en iyi uygulamalarla birlikte kullan\u0131labilir.<\/p>\nFarkl\u0131 \u0130\u00e7erik T\u00fcrleri ve Birden Fazla Sayfaland\u0131rma<\/h3>\n
gatsby-node.js<\/code> dosyas\u0131nda her i\u00e7erik t\u00fcr\u00fc i\u00e7in ayr\u0131 bir GraphQL sorgusu yapmak ve her biri i\u00e7in ayr\u0131 bir paginate<\/code> \u00e7a\u011fr\u0131s\u0131 yapmakt\u0131r. Her paginate<\/code> \u00e7a\u011fr\u0131s\u0131 i\u00e7in farkl\u0131 bir pathPrefix<\/code> ve component<\/code> kullanarak \u00e7ak\u0131\u015fmalar\u0131 \u00f6nleyebilirsiniz.<\/p>\n\/\/ gatsby-node.js i\u00e7inde birden fazla paginate \u00f6rne\u011fi\n\/\/ ... (\u00f6nceki kodlar)\n\n\/\/ Kategorilere g\u00f6re sayfaland\u0131rma \u00f6rne\u011fi\nconst categories = await graphql(\n {\n allCategory { \/\/ Kategori verilerinizi \u00e7eken bir sorgu\n group(field: name) {\n fieldValue\n totalCount\n }\n }\n }\n<\/code>);\n\ncategories.data.allCategory.group.forEach(category => {\n paginate({\n createPage,\n items: posts.filter(post => post.node.frontmatter.category === category.fieldValue),\n itemsPerPage: 5,\n pathPrefix: \/category\/${category.fieldValue.toLowerCase()}<\/code>,\n component: path.resolve('.\/src\/templates\/category-list.js'), \/\/ Kategori listesi \u015fablonu\n context: {\n category: category.fieldValue,\n },\n });\n});\n<\/code><\/pre>\ncontext<\/code> objesi arac\u0131l\u0131\u011f\u0131yla kategori ad\u0131n\u0131 \u015fablona ileterek, \u015fablon i\u00e7inde ba\u015fl\u0131\u011f\u0131 veya filtrelemeyi \u00f6zelle\u015ftirebilirsiniz.<\/p>\nSEO Dostu Sayfaland\u0131rma<\/h3>\n
\n
gatsby-plugin-react-helmet<\/code> kullanarak yapabilirsiniz.\n\/\/ src\/templates\/blog-list.js i\u00e7inde rel=\"prev\"<\/code> ve rel=\"next\"<\/code>:<\/strong> Bu etiketler, arama motorlar\u0131na sayfalar aras\u0131ndaki ili\u015fkiyi bildirir. gatsby-awesome-pagination<\/code>‘\u0131n sa\u011flad\u0131\u011f\u0131 previousPagePath<\/code> ve nextPagePath<\/code> de\u011ferlerini kullanarak bu etiketleri kolayca ekleyebilirsiniz.<\/li>\n<\/ul>\nSayfalama Bile\u015fenini \u00d6zelle\u015ftirme<\/h3>\n
pageContext<\/code> i\u00e7indeki t\u00fcm veriler (humanPageNumber<\/code>, numberOfPages<\/code>, pagePaths<\/code> vb.) size bu konuda tam kontrol sa\u011flar.<\/p>\nPerformans \u0130pu\u00e7lar\u0131<\/h3>\n
\n
limit<\/code> ve skip<\/code> kullan\u0131m\u0131:<\/strong> GraphQL sorgular\u0131n\u0131zda $limit<\/code> ve $skip<\/code> de\u011fi\u015fkenlerini kullanarak sadece ihtiyac\u0131n\u0131z olan verileri \u00e7ekin. gatsby-awesome-pagination<\/code> bunu sizin i\u00e7in otomatik olarak yapar.<\/li>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
gatsby-awesome-pagination<\/code> eklentisi, bu karma\u015f\u0131k g\u00f6revi Gatsby’nin g\u00fc\u00e7l\u00fc createPages<\/code> API’si ile birle\u015ftirerek son derece basit ve etkili bir hale getirir. Bu rehberde, kurulumdan temel kullan\u0131ma, sayfaland\u0131rma bile\u015feni olu\u015fturmaktan geli\u015fmi\u015f \u00f6zelliklere kadar t\u00fcm s\u00fcreci detayl\u0131 bir \u015fekilde ele ald\u0131k.<\/p>\ngatsby-awesome-pagination<\/code>‘\u0131n sundu\u011fu esneklik sayesinde, farkl\u0131 i\u00e7erik t\u00fcrleri i\u00e7in birden fazla sayfaland\u0131rma sistemi kurabilir, SEO dostu uygulamalarla arama motorlar\u0131ndaki g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fcz\u00fc art\u0131rabilir ve tamamen \u00f6zelle\u015ftirilebilir bir kullan\u0131c\u0131 aray\u00fcz\u00fc sunabilirsiniz.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
gatsby-awesome-pagination<\/code> farkl\u0131 i\u00e7erik t\u00fcrlerini sayfaland\u0131rabilir mi?<\/strong><\/p>\ngatsby-node.js<\/code> dosyan\u0131zda her i\u00e7erik t\u00fcr\u00fc i\u00e7in (\u00f6rne\u011fin, blog yaz\u0131lar\u0131, \u00fcr\u00fcnler, dok\u00fcmanlar) ayr\u0131 GraphQL sorgular\u0131 yapabilir ve her biri i\u00e7in ayr\u0131 paginate<\/code> \u00e7a\u011fr\u0131lar\u0131 kullanabilirsiniz. Her \u00e7a\u011fr\u0131 i\u00e7in farkl\u0131 bir pathPrefix<\/code> ve React \u015fablonu (component<\/code>) tan\u0131mlaman\u0131z yeterlidir.<\/p>\npageContext<\/code> i\u00e7indeki humanPageNumber<\/code> gibi bilgilere eri\u015ferek aktif sayfay\u0131 vurgulayabilirsiniz.<\/p>\ngatsby-awesome-pagination<\/code>, $skip<\/code> ve $limit<\/code> kullanarak verimli GraphQL sorgular\u0131 yapman\u0131z\u0131 sa\u011flar. Performans sorunlar\u0131 ya\u015farsan\u0131z, Incremental Builds gibi Gatsby Cloud \u00f6zelliklerini veya daha az kritik sayfalar\u0131 daha az s\u0131kl\u0131kla g\u00fcncellemeyi d\u00fc\u015f\u00fcnebilirsiniz. Ayr\u0131ca, gatsby-node.js<\/code> i\u00e7indeki limit<\/code> parametresini art\u0131rarak t\u00fcm verileri \u00e7ekti\u011finizden emin olun.<\/p>\ngatsby-awesome-pagination<\/code>‘\u0131 di\u011fer GraphQL kaynaklar\u0131yla kullanabilir miyim?<\/strong><\/p>\ngatsby-source-filesystem<\/code> ile Markdown dosyalar\u0131n\u0131 kulland\u0131\u011f\u0131m\u0131z gibi, gatsby-source-shopify<\/code>, gatsby-source-wordpress<\/code> veya \u00f6zel bir API’den veri \u00e7eken herhangi bir GraphQL kayna\u011f\u0131yla da kullanabilirsiniz. \u00d6nemli olan, gatsby-node.js<\/code> i\u00e7inde paginate<\/code> fonksiyonuna iletece\u011finiz items<\/code> dizisinin do\u011fru veri yap\u0131s\u0131na sahip olmas\u0131d\u0131r.<\/p>\n<\/code> b\u00f6l\u00fcm\u00fcne uygun <\/code>, <\/code> ve <\/code> etiketlerini eklemek \u00f6nemlidir. gatsby-plugin-react-helmet<\/code> kullanarak bu etiketleri kolayca y\u00f6netebilir ve arama motorlar\u0131n\u0131n sayfalar\u0131n\u0131z aras\u0131ndaki ili\u015fkiyi do\u011fru anlamas\u0131n\u0131 sa\u011flayabilirsiniz. Canonical URL’i genellikle ana listeleme sayfas\u0131na (\u00f6rne\u011fin \/blog<\/code>) i\u015faret etmeli, prev<\/code> ve next<\/code> ise ilgili \u00f6nceki ve sonraki sayfalara i\u015faret etmelidir.<\/p>\n