Sayfa JSON'u
Sayfa detayı yanıtının ve iç içe bileşen ağacının JSON yapısı.
Bu sayfada GET /api/v1/page/detail/{dil}?path= yanıtının data alanını ve bileşen ağacının nasıl okunacağını öğreneceksin.
Sayfa
{
"id": 123,
"title": "Hakkımızda",
"path": "kurumsal/hakkimizda",
"menuDescription": "Şirketimizi tanıyın.",
"icon": "https://cdn.example.com/Photos/og.jpg",
"templateId": 2,
"publishStartDate": "2026-09-01T00:00:00Z",
"redirectTo": null,
"seo": {
"metaTitle": "Hakkımızda",
"metaDescription": "…",
"canonicalUrl": "…",
"ogImage": "…",
"noIndex": false,
"noFollow": false
},
"schemas": [
{ "schemaType": "Organization", "schemaJsonLd": "{…}", "isActive": true }
],
"entities": [
{ "entityType": "Product", "name": "…", "metadataJson": "{…}" }
],
"components": []
}| Alan | Açıklama |
|---|---|
id | Sayfanın kimliği. |
title | Sayfa başlığı. SEO başlığı yoksa metadata buna düşer. |
path | Sayfanın CMS yolu. Bağlantı kurmak için değil, API'nin döndürdüğü href için kullan. |
menuDescription | Kısa açıklama. SEO açıklaması yoksa metadata buna düşer. |
templateId | Sayfanın bağlı olduğu şablon. |
publishStartDate | Yayın başlangıcı. JSON-LD'de yayın tarihi olarak kullanılır. |
redirectTo | Doluysa sayfa içerikle çizilmez, bu hedefe yönlendirilir. |
seo | Meta başlık, açıklama, canonical, Open Graph, Twitter ve noIndex/noFollow. |
schemas | Panelde yazılmış JSON-LD şemaları. schemaJsonLd kendi başına geçerli bir JSON-LD metnidir. Yalnızca isActive: true olanlar basılır. |
entities | GEO varlıkları. Ana JSON-LD düğümüne bağlı düğümler olarak basılır. |
components | Sayfanın bileşen ağacı. |
Bileşen düğümü
Bileşenler sınırsız derinlikte iç içe geçebilir. Her düğüm aynı yapıdadır.
{
"id": 10, // katalogdaki bileşen tanımının kimliği
"uniqueId": 4711, // bu yerleşimin kimliği: React key ve denetleyici için
"slug": "hero-banner", // registry anahtarı, önce bu eşleşir
"componentType": "Custom", // yedek anahtar
"title": "Hero",
"visibility": "Both",
"data": null, // yalnızca yapraklarda dolu
"children": [
{ "slug": "title", "componentType": "SingleLine", "data": "Merhaba" },
{ "slug": "description", "componentType": "Markdown", "data": "**Kısa** bir giriş." },
{ "slug": "image", "componentType": "Photo", "data": "https://cdn.example.com/Photos/hero.webp" }
]
}Görünürlük değerleri
| Panelde | API değeri | Anlamı |
|---|---|---|
| Herkese açık | Both | Hem önizleme hem canlı sitede görünür. |
| Sadece önizleme | PreviewOnly | Yalnızca önizleme sitesinde görünür. |
| Sadece yayında | ProdOnly | Yalnızca canlı sitede görünür. |
| Gizli | NotShow | Hiçbir sitede görünmez. |
id ve uniqueId farkı
id bileşenin katalogdaki tanımını gösterir. Aynı bileşen bir sayfada iki kez kullanılırsa iki düğümün id'si aynı olur. uniqueId ise o yerleşime özgüdür. React key'i ve panel denetleyicisi için her zaman uniqueId kullan.
Kapsayıcılar ve yapraklar
Kural basit: kapsayıcılar children taşır, yapraklar data taşır.
| Rol | componentType değerleri | Değer |
|---|---|---|
| Kapsayıcı | Custom, Form | children[] |
| Yaprak | SingleLine, Markdown, Photo, Document, Dropdown, FormItem | data |
data metin, URL ya da seçim gibi bir değerdir. FormItem yapraklarında data alan tanımını içeren bir JSON'dur. Ayrıntı için Formlar sayfasına bak.
Ağacı okumak
Bir blok çocuklarını slug ile bulur. Sıraya güvenme, her zaman slug ile ara.
import type { ApiComponent } from "@/types/cms";
export const pick = (children: ApiComponent[] | undefined, slug: string) =>
children?.find((c) => c.slug === slug)?.data as string | undefined;Tekrar eden öğeler için çocukları filtrele ve her birini kendi children'ı ile oku:
import type { ApiComponent } from "@/types/cms";
import { pick } from "@/lib/pick";
export default function FeatureList({ children }: { children?: ApiComponent[] }) {
const items = children?.filter((c) => c.slug === "item") ?? [];
if (items.length === 0) return null;
return (
<ul className="grid gap-4 md:grid-cols-3">
{items.map((item) => (
<li key={item.uniqueId}>
<h3 className="font-semibold">{pick(item.children, "title")}</h3>
</li>
))}
</ul>
);
}Her alan eksik olabilir
Editör bir alanı boş bırakabilir ya da bileşen tanımı sonradan değişebilir. Bileşenin her alanın yokluğunu tolere etmeli ve kendi varsayılanını taşımalı. Zorunlu bir alan yoksa hiçbir şey çizmemek, bozuk bir bölüm çizmekten iyidir.
Registry'den yalnızca üst düzey geçer
Site şablonu yalnızca components[] dizisinin en üst düzey elemanlarını registry'den geçirir. İç içe çocukları blok kendisi render eder. Bu yüzden title gibi yaprakların registry'de kaydı olmaz. Bu sistemin nasıl çalıştığını Bileşenler sayfası anlatıyor.