Ghost & Astro

Ghost 是一个基于 Node.js 构建的开源无头内容管理系统。

与 Astro 集成

在本节中，我们将使用 Ghost 内容 API 将你的数据引入到 Astro 项目中。

先决条件

要开始使用，你需要准备以下内容

一个 Astro 项目 - 如果你还没有 Astro 项目，我们的安装指南将帮助你快速启动并运行。
一个 Ghost 网站 - 我们假设你已经用 Ghost 建立了一个网站。如果没有，你可以在本地环境中设置一个。
内容 API 密钥 - 你可以在网站的 Settings > Integrations 下创建一个集成。在那里你可以找到你的 内容 API 密钥

设置凭据

要将你的网站凭据添加到 Astro，请在你的项目根目录中创建一个 .env 文件，并包含以下变量

CONTENT_API_KEY=YOUR_API_KEY

现在，你应该可以在你的项目中使用这个环境变量了。

如果你想为你的环境变量提供智能提示（IntelliSense），你可以在 src/ 目录下创建一个 env.d.ts 文件，并像这样配置 ImportMetaEnv

interface ImportMetaEnv {
  readonly CONTENT_API_KEY: string;
}

你的根目录现在应包含这些新文件

目录src/
- env.d.ts
.env
astro.config.mjs
package.json

安装依赖

要连接到 Ghost，请使用你偏好的包管理器，通过以下命令安装官方的内容 API 包装器 @tryghost/content-api。如果你正在使用 TypeScript，还可以选择安装一个包含类型定义的辅助包

npm install @tryghost/content-api
npm install --save @types/tryghost__content-api

pnpm add @tryghost/content-api
pnpm add --save-dev @types/tryghost__content-api

yarn add @tryghost/content-api
yarn add --dev @types/tryghost__content-api

使用 Astro 和 Ghost 创建博客

完成以上设置后，你现在可以创建一个使用 Ghost 作为 CMS 的博客了。

先决条件

一个 Ghost 博客
一个与 Ghost 内容 API 集成的 Astro 项目 - 更多关于如何使用 Ghost 设置 Astro 项目的详细信息，请参阅与 Astro 集成。

这个例子将创建一个索引页面，列出所有文章，并提供指向动态生成的单个文章页面的链接。

获取数据

你可以使用 Ghost 内容 API 包来获取你的网站数据。

首先，在 lib 目录下创建一个 ghost.ts 文件。

目录src/
- 目录lib/
  - ghost.ts
- 目录pages/
  - index.astro
astro.config.mjs
package.json

使用从 Ghost 仪表板的集成页面获取的 API 密钥，通过 Ghost API 初始化一个 API 实例。

import GhostContentAPI from '@tryghost/content-api';

// Create API instance with site credentials
export const ghostClient = new GhostContentAPI({
    url: 'http://127.0.0.1:2368', // This is the default URL if your site is running on a local environment
    key: import.meta.env.CONTENT_API_KEY,
    version: 'v5.0',
});

显示文章列表

页面 src/pages/index.astro 将显示一个文章列表，每篇文章都有描述和指向其自己页面的链接。

目录src/
- 目录lib/
  - ghost.ts
- 目录pages/
  - index.astro
astro.config.mjs
package.json

在 Astro frontmatter 中导入 ghostClient()，以使用 posts.browse() 方法从 Ghost 访问博客文章。设置 limit: all 以检索所有文章。

---
import { ghostClient } from '../lib/ghost';
const posts = await ghostClient.posts
    .browse({
        limit: 'all',
    })
    .catch((err) => {
        console.error(err);
    });
---

通过内容 API 获取数据会返回一个对象数组，其中包含每篇文章的属性，例如

title - 文章的标题
html - 文章内容的 HTML 渲染
feature_image - 文章特色图片的源 URL
slug - 文章的 slug（路径片段）

使用从 fetch 返回的 posts 数组在页面上显示博客文章列表。

---
import { ghostClient } from '../lib/ghost';
const posts = await ghostClient.posts
    .browse({
        limit: 'all',
    })
    .catch((err) => {
        console.error(err);
    });
---

<html lang="en">
    <head>
        <title>Astro + Ghost 👻</title>
    </head>
    <body>

        {
            posts.map((post) => (
                <a href={`/post/${post.slug}`}>
                    <h1> {post.title} </h1>
                </a>
            ))
        }
    </body>
</html>

生成页面

页面 src/pages/post/[slug].astro 为每篇文章动态生成一个页面。

目录src/
- 目录lib/
  - ghost.ts
- 目录pages/
  - index.astro
  - 目录post/
    [slug].astro
astro.config.mjs
package.json

导入 ghostClient() 以使用 posts.browse() 访问博客文章，并为每个动态路由返回一篇文章作为 props。

---
import { ghostClient } from '../../lib/ghost';

export async function getStaticPaths() {
    const posts = await ghostClient.posts
        .browse({
            limit: 'all',
        })
        .catch((err) => {
            console.error(err);
        });

    return posts.map((post) => {
        return {
            params: {
                slug: post.slug,
            },
            props: {
                post: post,
            },
        };
    });
}

const { post } = Astro.props;
---

使用每个 post 对象的属性为每个页面创建模板。

---
import { ghostClient } from '../../lib/ghost';
export async function getStaticPaths() {
    const posts = await ghostClient.posts
        .browse({
            limit: 'all',
        })
        .catch((err) => {
            console.error(err);
        });
    return posts.map((post) => {
        return {
            params: {
                slug: post.slug,
            },
            props: {
                post: post,
            },
        };
    });
}
const { post } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{post.title}</title>
    </head>
    <body>
        <img src={post.feature_image} alt={post.title} />

        <h1>{post.title}</h1>
        <p>{post.reading_time} min read</p>

        <Fragment set:html={post.html} />
    </body>
</html>