幽灵与 Astro

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

¥Ghost is an open-source, headless content management system built on Node.js.

与 Astro 集成

Section titled 与 Astro 集成

¥Integrating with Astro

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

¥In this section, we’ll use the Ghost content API to bring your data into your Astro project.

先决条件

Section titled 先决条件

¥Prerequisites

要开始使用，你需要具备以下条件：

¥To get started you will need to have the following:

1. Astro 项目 - 如果你还没有 Astro 项目，我们的 安装指南 将立即帮助你启动并运行。

2. 幽灵网站 - 假设你有一个使用 Ghost 设置的网站。如果你不这样做，你可以在 本地环境。 上设置一个

3. 内容 API 密钥 - 你可以在站点的 Settings > Integrations 下进行集成。从那里你可以找到你的 Content API key

设置凭据

Section titled 设置凭据

¥Setting up credentials

要将站点的凭据添加到 Astro，请使用以下变量在项目的根目录中创建 .env 文件：

¥To add your site’s credentials to Astro, create an .env file in the root of your project with the following variable:

.env

CONTENT_API_KEY=YOUR_API_KEY

现在，你应该能够在项目中使用此环境变量。

¥Now, you should be able to use this environment variable in your project.

如果你希望环境变量具有 IntelliSense，你可以在 src/ 目录中创建一个 env.d.ts 文件并配置 ImportMetaEnv，如下所示：

¥If you would like to have IntelliSense for your environment variable, you can create a env.d.ts file in the src/ directory and configure ImportMetaEnv like this:

src/env.d.ts

interface ImportMetaEnv {
  readonly CONTENT_API_KEY: string;
}

Tip

Read more about using environment variables and .env files in Astro.

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

¥Your root directory should now include these new files:

• Directorysrc/

  • env.d.ts
• .env
• astro.config.mjs
• package.json

安装依赖

Section titled 安装依赖

¥Installing dependencies

要连接 Ghost，请使用以下命令为你首选的包管理器安装官方内容 API 封装器 @tryghost/content-api，如果你使用的是 TypeScript，还可以选择包含类型定义的有用包：

¥To connect with Ghost, install the official content API wrapper @tryghost/content-api using the command below for your preferred package manager, and optionally, a helpful package containing type definitions if you are using TypeScript:

npm

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

pnpm

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

Yarn

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

使用 Astro 和 Ghost 制作博客

Section titled 使用 Astro 和 Ghost 制作博客

¥Making a blog with Astro and Ghost

通过上述设置，你现在可以创建一个使用 Ghost 作为 CMS 的博客。

¥With the setup above, you are now able to create a blog that uses Ghost as the CMS.

先决条件

Section titled 先决条件

¥Prerequisites

1. 幽灵博客
2. 与 幽灵内容 API 集成的 Astro 项目 - 请参阅 与 Astro 集成 以了解如何使用 Ghost 设置 Astro 项目的更多详细信息。

此示例将创建一个索引页面，其中列出帖子以及动态生成的各个帖子页面的链接。

¥This example will create an index page that lists posts with links to dynamically-generated individual post pages.

获取数据

Section titled 获取数据

¥Fetching Data

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

¥You can fetch your site’s data with the Ghost content API package.

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

¥First, create a ghost.ts file under a lib directory.

• Directorysrc/

  • Directorylib/

    • ghost.ts
  • Directorypages/

    • index.astro
• astro.config.mjs
• package.json

使用 Ghost 仪表板集成页面中的 API 密钥，通过 Ghost API 初始化 API 实例。

¥Initialize an API instance with the Ghost API using the API key from the Ghost dashboard’s Integrations page.

src/lib/ghost.ts

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',
});

显示帖子列表

Section titled 显示帖子列表

¥Displaying a list of posts

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

¥The page src/pages/index.astro will display a list of posts, each with a description and link to its own page.

• Directorysrc/

  • …
• Directorylib/

  • ghost.ts
• Directorypages/

  • index.astro
• astro.config.mjs
• package.json

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

¥Import ghostClient() in the Astro frontmatter to use the posts.browse() method to access blog posts from Ghost. Set limit: all to retrieve all posts.

src/pages/index.astro

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

通过内容 API 获取会返回包含 每个帖子的属性 的对象数组，例如：

¥Fetching via the content API returns an array of objects containing the properties for each post such as:

• title - 帖子的标题

• html - 帖子内容的 HTML 渲染

• feature_image - 帖子特性图片的源 URL

• slug - 帖子的标题

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

¥Use the posts array returned from the fetch to display a list of blog posts on the page.

src/pages/index.astro

---
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>

生成页面

Section titled 生成页面

¥Generating pages

每个帖子的 src/pages/post/[slug].astro 动态生成页面 页。

¥The page src/pages/post/[slug].astro dynamically generates a page for each post.

• Directorysrc/

  • …
• Directorylib/

  • ghost.ts
• Directorypages/

  • index.astro
  • Directorypost/

    • [slug].astro
• astro.config.mjs
• package.json

导入 ghostClient() 以使用 posts.browse() 访问博客文章，并将帖子作为属性返回到每个动态路由。

¥Import ghostClient() to access blog posts using posts.browse() and return a post as props to each of your dynamic routes.

src/pages/post/[slug].astro

---
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 对象的属性为每个页面创建模板。

¥Create the template for each page using the properties of each post object.

src/pages/post/[slug].astro

---
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>

Note

<Fragment /> is a built-in Astro component which allows you to avoid an unnecessary wrapper element. This can be especially useful when fetching HTML from a CMS (e.g. Ghost or WordPress).

发布你的网站

Section titled 发布你的网站

¥Publishing your site

要部署你的网站，请访问我们的 部署指南 并按照你首选托管提供商的说明进行操作。

¥To deploy your site visit our deployment guide and follow the instructions for your preferred hosting provider.

社区资源

Section titled 社区资源

¥Community Resources

• GitHub 上的 astro-starter-ghost

• GitHub 上的 astro-ghostcms

• Astro + Ghost + Tailwind CSS by Andre Carrera

• Ghost CMS 和 Astro 教程 by Adam Matthiesen

More CMS guides

• 

  Apostrophe

• 

  Builder.io

• 

  ButterCMS

• 

  Caisy

• 

  CloudCannon

• 

  Contentful

• 

  Cosmic

• 

  Craft CMS

• 

  Crystallize

• 

  DatoCMS

• 

  Decap CMS

• 

  Directus

• 

  Front Matter CMS

• 

  Ghost

• 

  Hashnode

• 

  Hygraph

• 

  Keystatic

• 

  KeystoneJS

• 

  Kontent.ai

• 

  microCMS

• 

  Payload CMS

• 

  Prepr CMS

• 

  Prismic

• 

  Sanity

• 

  Sitecore XM

• 

  Spinal

• 

  Statamic

• 

  Storyblok

• 

  Strapi

• 

  Tina CMS

• 

  Umbraco

• 

  WordPress