ดึงข้อมูลจาก Ghost มาแสดงในเว็บ ด้วย Ghost Content API

Ghost Mar 20, 2023

พอดีว่าวันนี้ผมอยากดึงข้อมูลของบล็อกที่ใช้ Ghost ก็คือเว็บนี้ เอาไปแสดงผลที่หน้าหลัก devahoy.com ด้วย (ซึ่งปกติเว็บหลัก เป็นแค่ MDX files ทั้งหมดดึงข้อมูลตอน build จาก local files อย่างเดียว)

ซึ่งการดึงข้อมูลจากบล็อกที่ใช้ Ghost ก็สามารถดึงผ่าน library ที่ทาง Ghost Official ทำไว้ นั่นก็คือ JavaScript Library ที่ชื่อ @tryghost/content-api นั่นเอง

ลองใช้งานดู เริ่มต้นที่การติดตั้ง library ด้วย npm

npm i @tryghost/content-api

วิธีการใช้งาน จะใช้ url และก็ key ที่ได้จากหน้า Settings -> Custom Integrations สร้าง App ใหม่ แล้วเอา Content API Key และ API Url มาใช้

import GhostContentAPI from '@tryghost/content-api'

const api = new GhostContentAPI({
  url: 'https://mywebsite',
  key: process.env.GHOST_CONTENT_API_KEY,
  version: 'v5.0'
})

วิธีการดึงข้อมูล Post เราจะใช้แบบนี้ เนื่องจากผมต้องการเอาค่า tags มาใช้ ด้วย ก็เลยต้องใส่ include ลงไป และ limit ไว้ที่ 9 โพสเท่าที่จะใช้พอ

const getGhostPosts = () => {
  return api.posts.browse({ limit: 9, include: 'tags' })
    .catch((err) => console.log(err));
};

ทีนี้ข้อมูลที่ได้ ผมก็จะอยู่ในรูปแบบนี้ (ตัวอย่างก็อปมาจากเว็บ Ghost)

{
    "posts": [
        {
            "slug": "welcome-short",
            "id": "5c7ece47da174000c0c5c6d7",
            "uuid": "3a033ce7-9e2d-4b3b-a9ef-76887efacc7f",
            "title": "Welcome",
            "html": "<p>👋 Welcome, it's great to have you here.</p>",
            "comment_id": "5c7ece47da174000c0c5c6d7",
            "feature_image": "https://casper.ghost.org/v2.0.0/images/welcome-to-ghost.jpg",
            "feature_image_alt": null,
            "feature_image_caption": null,
            "featured": false,
            "meta_title": null,
            "meta_description": null,
            "created_at": "2019-03-05T19:30:15.000+00:00",
            "updated_at": "2019-03-26T19:45:31.000+00:00",
            "published_at": "2012-11-27T15:30:00.000+00:00",
            "custom_excerpt": "Welcome, it's great to have you here.",
            "codeinjection_head": null,
            "codeinjection_foot": null,
            "og_image": null,
            "og_title": null,
            "og_description": null,
            "twitter_image": null,
            "twitter_title": null,
            "twitter_description": null,
            "custom_template": null,
            "canonical_url": null,
            "tags": [
                {
                    "id": "59799bbd6ebb2f00243a33db",
                    "name": "Getting Started",
                    "slug": "getting-started",
                    "description": null,
                    "feature_image": null,
                    "visibility": "public",
                    "meta_title": null,
                    "meta_description": null,
                    "url": "https://demo.ghost.io/tag/getting-started/"
                }
            ],
            "url": "https://demo.ghost.io/welcome-short/",
            "excerpt": "Welcome, it's great to have you here."
        }
    ]
}

เมื่อได้รูปแบบข้อมูลแล้ว เราก็แค่ วนลูป ด้วย Array.map() แล้วก็เอาข้อมูลที่ต้องการมา render ง่ายมาก

สุดท้าย ผมก็นำมาปรับใช้ในเว็บ https://devahoy.com จะเห็นว่าหน้าแรก ตรงส่วน Blog นั้น 9 โพส นั้นมาจากที่นี่ และที่เหลือ ก็จาก Markdown File ของเว็บเดิมนั่นเอง

Happy Coding ❤️