npm create astro@latest -- --模板博客
cd [项目名称] && npm run dev
从 Astro 5 开始，引入了内容层 API，该工具允许您在网站构建期间从任何来源加载数据，并通过简单、安全类型的 API 访问它。
此 API 可以灵活地处理来自各种来源的内容，例如本地 Markdown 文件、远程 API 或内容管理系统 (CMS)。通过使用特定模式定义内容“集合”，您可以有效地构建和验证数据。此外，内容层 API 还提高了内容较多的网站的性能，加快了构建时间并减少了内存使用量。
https://astro.build/blog/astro-5/
您可以使用 Astro 的内容层 API 将 dev.to 帖子集成到您的网站中。尽管 dev.to 没有特定的加载器，但您可以创建一个自定义加载器来使用其 API 并将帖子存储在 Astro 的内容集合中。
要实现此目的，请按照以下步骤操作：
在项目根目录创建 .env 文件
.env
DEV_TO_API_URL=https://dev.to/api/ DEV_API_KEY=tu_clave_de_api
在 src/content.config.ts 中，使用内容层 API 为 dev.to 帖子定义一个集合：
使用 Astro 模板创建项目时，它会自动生成博客的集合
srccontent.config.ts
import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
// Load Markdown and MDX files in the `src/content/blog/` directory.
loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
// Type-check frontmatter using a schema
schema: z.object({
title: z.string(),
description: z.string(),
// Transform string to Date object
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
heroImage: z.string().optional(),
}),
});
export const collections = { blog };
现在我们为 Dev.to 文章创建集合
const devTo = defineCollection({
loader: async () => {
const headers = new Headers({
"api-key": DEV_API_KEY,
});
const posts = await fetch(`${DEV_TO_API_URL}articles?username=jmr85`, {
headers: headers
}).then(res => res.json());
return posts.map((post: any) => ({
id: post.slug,
title: post.title,
description: post.description,
pubDate: new Date(post.published_at),
updatedDate: post.edited_at ? new Date(post.edited_at) : null,
heroImage: post.cover_image || post.social_image,
url: post.url,
}));
},
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
heroImage: z.string().nullable(),
url: z.string(),
}),
});
export const collections = { blog, devTo };
这是
的完整代码
srccontent.config.ts
DEV_TO_API_URL=https://dev.to/api/ DEV_API_KEY=tu_clave_de_api
查看 schema 中字段定义的详细信息，字段必须与 Astro 模板的博客集合相匹配，然后添加 Dev.to 帖子集合特有的字段。它们必须与数据类型具有相同的名称，这样我们就可以将 Astro 模板中的 Markdown 帖子与博客部分中 Dev.to 中的 Markdown 帖子“合并”。
您现在可以使用 getCollection 访问 Astro 组件或页面中的 dev.to 帖子：
原文：
srcpagesblogindex.astro
import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
// Load Markdown and MDX files in the `src/content/blog/` directory.
loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
// Type-check frontmatter using a schema
schema: z.object({
title: z.string(),
description: z.string(),
// Transform string to Date object
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
heroImage: z.string().optional(),
}),
});
export const collections = { blog };
现在我们将使用内联条件对帖子进行迭代，如果是 devto，将重定向到网站上文章的 url https://dev.to/{username}/{slug-article }
{
posts.map((post) => (
<li>
<a href="%7Bpost.collection" post.data.url :>
<img 宽度={720} 高度={360} src={post.data.heroImage} alt="" />
<h4>
</h4>
<p><img src="https://img.php.cn/upload/article/000/000/000/173540174627117.jpg" alt="AstroJS : Integra contenido de Dev.to de manera sencilla"></p>
<p>存储库：https://github.com/jmr85/astro-devto</p>
</a>以上是AstroJS：轻松将 Dev.to 集成到内容中的详细内容。更多信息请关注PHP中文网其他相关文章！
