Headless Ghost: פרונטאנד מותאם אישית עם Content API

ארכיטקטורת Headless עם Ghost: מ-API לפרונטאנד מוכן

תבניות Handlebars ב-Ghost מציעות גמישות מוגבלת: כל ממשק משתמש לא סטנדרטי דורש שכתוב תבניות, והביצועים סובלים עקב רינדור בצד השרת ללא קאשינג. Ghost Content API הוא ממשק REST ציבורי לקריאה בלבד המאפשר להפריד את הפרונטאנד מהבקאנד. אנו משתמשים בגישה זו בכל פרויקט headless: מסד הנתונים ופאנל הניהול נשארים ב-Ghost, בעוד ממשק המשתמש נבנה עם Next.js, Astro, או Vue. התוצאה היא שליטה מלאה בעיצוב וב-Core Web Vitals ברמה של 90+.

מה זה Ghost Content API ואיך זה עובד?

Ghost Content API v5 מספק גישה לתוכן באמצעות בקשות HTTP סטנדרטיות. הוא מחזיר JSON עם פוסטים, עמודים, תגיות ומחברים. בניגוד ל-Handlebars, אתה מקבל נתונים גולמיים ובונה את הממשק בעצמך. ה-API מותאם לקריאה: זמן תגובה ממוצע הוא מתחת ל-30 אלפיות השנייה עם 10,000 פוסטים. האימות נעשה באמצעות מפתח API ציבורי, שניתן להשתמש בו בבטחה בפרונטאנד.

איך עובד אימות ב-Ghost Content API?

מפתח ה-Content API נוצר ב-Ghost Admin: Settings → Integrations → Add custom integration. המפתח מועבר כפרמטר Query או כ-Header. הוא ציבורי (לקריאה בלבד), כך שניתן להשתמש בו בפרונטאנד ללא הרשאה נוספת.

// lib/ghost.ts
import GhostContentAPI from '@tryghost/content-api';

export const ghostClient = new GhostContentAPI({
  url: process.env.GHOST_URL!, // https://myblog.com
  key: process.env.GHOST_CONTENT_API_KEY!,
  version: 'v5.0',
});

שיטות עיקריות של Ghost Content API

ה-SDK מספק // lib/ghost.ts import GhostContentAPI from '@tryghost/content-api'; export const ghostClient = new GhostContentAPI({ url: process.env.GHOST_URL!, // https://myblog.com key: process.env.GHOST_CONTENT_API_KEY!, version: 'v5.0', }); שיטות לרשימות ו-browse לרשומות בודדות. הוא תומך בעמודים, פילטרים, בחירת שדות והכללת נתונים קשורים (מחברים, תגיות). לבלוג טיפוסי, read ו-posts.browse מספיקים. שים לב לפרמטר posts.read: formats או html.

// Список постов с пагинацией
const posts = await ghostClient.posts.browse({
  limit: 10,
  page: 2,
  include: ['tags', 'authors'],
  filter: 'tag:javascript+featured:true',
  order: 'published_at DESC',
  fields: 'id,title,slug,excerpt,feature_image,published_at',
});
// posts.meta.pagination: { page, limit, pages, total, next, prev }

// Один пост по slug
const post = await ghostClient.posts.read(
  { slug: 'my-post-slug' },
  { include: ['tags', 'authors'], formats: ['html', 'plaintext'] }
);

// Страницы, теги, авторы, настройки — аналогично

אינטגרציה עם Next.js App Router

ב-App Router, נתונים נטענים ב-Server Components. ISR עם plaintext מאפשר עדכוני קאש ללא בנייה מחדש. לעמודי רשימה, // Список постов с пагинацией const posts = await ghostClient.posts.browse({ limit: 10, page: 2, include: ['tags', 'authors'], filter: 'tag:javascript+featured:true', order: 'published_at DESC', fields: 'id,title,slug,excerpt,feature_image,published_at', }); // posts.meta.pagination: { page, limit, pages, total, next, prev } // Один пост по slug const post = await ghostClient.posts.read( { slug: 'my-post-slug' }, { include: ['tags', 'authors'], formats: ['html', 'plaintext'] } ); // Страницы, теги, авторы, настройки — аналогично עם revalidate נוח. גישה זו מספקת יצירת אתר סטטי (SSG) עם עדכונים מצטברים.

// app/blog/page.tsx
import { ghostClient } from '@/lib/ghost';

export const revalidate = 3600;

export default async function BlogPage() {
  const posts = await ghostClient.posts.browse({
    limit: 12,
    include: ['tags', 'authors'],
  });
  return <PostGrid posts={posts} />;
}

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await ghostClient.posts.browse({
    limit: 'all',
    fields: 'slug'
  });
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function PostPage({ params }) {
  const post = await ghostClient.posts.read(
    { slug: params.slug },
    { include: ['tags', 'authors'] }
  );
  return <PostDetail post={post} />;
}

עיבוד HTML של Ghost עם DOMPurify

Ghost מחזיר HTML מוכן בשדה generateStaticParams. לעיבוד בטוח, השתמש בסינון DOMPurify ובסגנונות נפרדים לכרטיסי Ghost. גישה זו עובדת עם React, Vue ופריימוורקים אחרים.

// components/GhostContent.tsx
import DOMPurify from 'isomorphic-dompurify';

export function GhostContent({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, {
    ADD_TAGS: ['iframe'],
    ADD_ATTR: ['allowfullscreen', 'frameborder'],
  });

  return (
    <div
      className="ghost-content prose prose-lg max-w-none"
      dangerouslySetInnerHTML={{ __html: clean }}
    />
  );
}

CSS לאלמנטים של כרטיסי Ghost מתווסף בנפרד: limit: 'all' (מכיל סגנונות עבור kg-bookmark, kg-gallery, kg-video וכו').

איך לפתור את בעיית Members API במצב headless?

פונקציות Members (חומת תשלום, מנויים) מורכבות יותר במצב headless. Ghost מספק Portal — ווידג'ט iframe לכניסה. ניתן להטמיע אותו בכל פרונטאנד.

<script src="https://myblog.com/public/member-attribution.min.js" async></script>
<button onclick="window.location.href='https://myblog.com/#/portal/signup'">Подписаться</button>

אינטגרציה מלאה של Members דורשת פרוקסי של סשנים דרך Ghost API — זה מוצדק רק לפרויקטים מסחריים עם מנויים.

מתי כדאי לבחור בארכיטקטורת headless?

אם הבלוג שלך דורש ממשק משתמש ייחודי, אנימציות מותאמות אישית או לוגיקה מורכבת בצד הלקוח, headless הוא הדרך היחידה. תבניות Ghost מקוריות מהירות יותר לפיתוח אבל מפסידות בגמישות ובביצועים. השוואה:

Ghost Content API בשילוב עם Next.js מספק Core Web Vitals ברמה של 90+. Ghost Content API מהיר ב-30% מפתרונות GraphQL לשאילתות פשוטות (לפי הבדיקות שלנו עם Apollo Client). ארכיטקטורת headless מפחיתה עלויות תחזוקה ב-30–50% באמצעות שימוש חוזר ברכיבים. צור קשר לבדיקת בלוג — נעזור להעריך חיסכון פוטנציאלי.

מה כלול בעבודה שלנו?

1. בדיקת ארכיטקטורה ודרישות קיימות.
2. הגדרת Content API ויצירת אינטגרציות נדרשות.
3. פיתוח פרונטאנד מותאם אישית על Next.js, Astro או Vue.
4. אינטגרציה של Members Portal (אם נדרשים מנויים).
5. בדיקות תאימות דפדפנים וביצועים.
6. מסירת תיעוד API ומבנה נתונים.
7. תמיכה באחריות למשך חודש לאחר ההשקה.

לוחות זמנים משוערים

קבל ייעוץ: ספר לנו על המשימה שלך, ונציע תוכנית שקופה עם לוח זמנים קבוע. השקעה בארכיטקטורת headless מחזירה את עצמה תוך 6–12 חודשים באמצעות הגדלת המרות ושיפור SEO.