Hashnode & Astro
Hashnode 是一个托管 CMS,允许你创建博客或出版物。
与 Astro 集成
段落标题 与 Astro 集成Hashnode 公共 API 是一个 GraphQL API,允许你与 Hashnode 进行交互。本指南使用 graphql-request
,一个与 Astro 配合良好的简约 GraphQL 客户端,将你的 Hashnode 数据引入你的 Astro 项目。
前提条件
段落标题 前提条件要开始,你需要具备以下条件:
安装依赖
段落标题 安装依赖使用你选择的包管理器安装 graphql-request
包:
使用 Astro 和 Hashnode 创建博客
段落标题 使用 Astro 和 Hashnode 创建博客本指南使用 graphql-request
,一个与 Astro 配合良好的简约 GraphQL 客户端,将你的 Hashnode 数据引入你的 Astro 项目。
前提条件
段落标题 前提条件- 一个 Hashnode 博客
- 已安装了 graphql-request 包的 Astro 项目。
此示例将创建一个首页,列出所有文章并链接到动态生成的各个文章页面。
获取数据
段落标题 获取数据-
要使用
graphql-request
包获取你的站点数据,请创建一个src/lib
目录并新建两个文件client.ts
和schema.ts
:文件夹src/
文件夹lib/
- client.ts
- schema.ts
文件夹pages/
- index.astro
- astro.config.mjs
- package.json
-
使用来自你的 Hashnode 网站的 URL,初始化一个带有 GraphQLClient 的 API 实例。
-
配置
schema.ts
来定义从 Hashnode API 返回的数据的结构。
显示文章列表
段落标题 显示文章列表通过 getAllPosts()
获取的数据返回一个对象数组,包含每篇文章的属性,例如:
title
- 文章的标题brief
- 文章内容的 HTML 渲染coverImage.url
- 文章特色图片的源 urlslug
- 文章的 slug
使用从获取中返回的 posts
数组在页面上显示博客文章列表。