Ghost & Astro
Ghost 是一个基于 Node.js 构建的开源无头 CMS(Content Management System,内容管理系统)。
与 Astro 集成
段落标题 与 Astro 集成在本节中,我们将使用 Ghost content API 将数据连接到你的 Astro 项目中。
前置准备
段落标题 前置准备在开始使用之前,你需要:
-
一个 Astro 项目 - 如果没有 Astro 项目, 我们的 安装指南 将在短时间内帮助你启动并运行。
-
一个 Ghost 站点 - 假定你已经配置了一个使用 Ghost 的站点。如果没有,可以根据 Ghost 本地配置在本地环境配置一个。
-
内容 API 密钥(Content API Key) - 你可以在 GHOST 站点的
Settings > Integrations
找到你的Content API key
。
配置
段落标题 配置在你的项目的根目录中创建或编辑一个 .env
文件,并添加以下变量以将你的 Ghost 站点连接到 Astro:
现在,你应该能够在你的项目中使用这个环境变量了。
如果你希望让你的环境变量拥有智能提示(IntelliSense),你可以在 src/
目录下创建一个 env.d.ts
文件,并像这样配置 ImportMetaEnv
:
了解更多关于使用环境变量和 Astro 中的 .env
文件的信息。
你的根目录现在应该包含以下新文件:
目录src/
- env.d.ts
- .env
- astro.config.mjs
- package.json
安装依赖项
段落标题 安装依赖项选择你喜欢的包管理器运行以下命令安装 Ghost 官方的内容 API 容器 @tryghost/content-api
连接 Ghost:
使用 Astro 和 Ghost 创建博客
段落标题 使用 Astro 和 Ghost 创建博客通过上面的设置,你现在可以创建一个使用 Ghost 作为 CMS 的博客。
前置准备
段落标题 前置准备- 一个 Ghost 博客
- 一个与 Ghost content API 集成的 Astro 项目 - 请参见 与 Astro 集成 了解如何将 Astro 项目与 Ghost 集成的更多详细信息。
这个例子将创建一个索引页面,并列出所有文章,通过帖子的链接指向到动态生成的单个文章页面。
获取数据
段落标题 获取数据你可以使用 Ghost content API 包获取你的站点数据。
首先,在 lib
目录下创建一个 ghost.ts
文件。
目录src/
目录lib/
- ghost.ts
目录pages/
- index.astro
- astro.config.mjs
- package.json
使用 Ghost 仪表盘的集成页面上的 API 密钥,通过 Ghost API 初始化一个 API 实例。
显示文章列表
段落标题 显示文章列表此页面 src/pages/index.astro
将显示一个文章列表,每个文章都包含一个描述和指向其文章页面链接。
目录src/
- …
目录lib/
- ghost.ts
目录pages/
- index.astro
- astro.config.mjs
- package.json
在 Astro 的 frontmatter 中导入 ghostClient()
,使用 posts.browse()
方法访问 Ghost 的博客文章。设置 limit: all
以检索所有文章。
通过 content API 获取的数据将会返回一个对象数组,其中包含每篇文章的属性,例如:
title
- 文章的标题html
- 文章内容的 HTML 渲染feature_image
- 文章图片的 URLslug
- 文章的 slug
使用返回的 posts
对象数组即可以在索引页上显示所有博客文章列表。
生成页面
段落标题 生成页面此页面 src/pages/post/[slug].astro
将为每一篇文章动态生成一个页面。
目录src/
- …
目录lib/
- ghost.ts
目录pages/
- index.astro
目录post/
- [slug].astro
- astro.config.mjs
- package.json
导入 ghostClient()
以使用 posts.browse()
访问博客文章,并将一篇文章作为 props 返回给你的每个动态路由。
通过创建模版以使用每个 post
对象的属性动态生成每篇文章的页面。
<Fragment />
是一个内置的 Astro 组件,它可以让你避免不必要的容器元素的影响。 这在从CMS(例如Ghost或WordPress)获取 HTML 时特别有用。
发布你的网站
段落标题 发布你的网站要部署你的网站,请访问我们的部署指南,并按照你更喜欢的托管服务提供商的部署说明进行操作。
社区资源
段落标题 社区资源- 你也可以从这个 Astro Ghost 启动器 开始集成你的 Ghost 与 Astro。
- Astro + Ghost + Tailwind CSS 由 Andre Carrera 提供
- Ghost CMS & Astro 由 Adam Matthiesen 提供