AstroJS：轻松将 Dev.to 集成到内容中

使用博客模板启动一个新项目

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 帖子集成到您的网站中

您可以使用 Astro 的内容层 API 将 dev.to 帖子集成到您的网站中。尽管 dev.to 没有特定的加载器，但您可以创建一个自定义加载器来使用其 API 并将帖子存储在 Astro 的内容集合中。

要实现此目的，请按照以下步骤操作：

1.配置对dev.to API的访问

在项目根目录创建 .env 文件
.env

DEV_TO_API_URL=https://dev.to/api/
DEV_API_KEY=tu_clave_de_api

2.在Astro中定义集合

在 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 帖子“合并”。

3. 在您的页面上使用帖子：

您现在可以使用 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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173540174627117.jpg" class="lazy" alt="AstroJS : Integra contenido de Dev.to de manera sencilla"></p>

<p>存储库：https://github.com/jmr85/astro-devto</p>


          

            
        </a>

以上是AstroJS：轻松将 Dev.to 集成到内容中的详细内容。更多信息请关注PHP中文网其他相关文章！