内容集合

将您的内容转换为类型安全的数据集合。无需手动获取和解析数据。只需导入您的内容即可开始使用。内置验证确保数据的准确性。在数据进入您的应用程序之前对其进行预处理。

特性

• 优秀的开发体验： 内容集合旨在提供愉悦的用户体验。它提供无缝的开发体验，无需重启服务器或刷新浏览器。当您对内容进行更改时，内容集合会自动更新。

• 类型安全： 您的内容在构建过程中被解析和验证，确保准确性和时效性。内容集合提供类型安全的API来访问您的内容。

• 使用简单： 不再需要手动获取和解析您的内容。只需导入并开始使用内容集合。它提供简单的API，让您专注于构建应用程序。

• 转换： 内容集合允许您在内容进入应用程序之前对其进行转换。您可以使用它来修改内容、连接两个集合，甚至从服务器获取数据。

安装

内容集合提供多种适配器，可与流行的Web框架无缝集成。安装过程取决于所选的适配器：

• Next.js
• Qwik
• Remix (Vite)
• Solid Start
• SvelteKit
• Vite

如果您的框架未列出，您仍可以使用CLI来使用内容集合。如果您希望看到您的框架被列出，请提交一个问题。

使用方法

1. 在项目根目录创建一个content-collections.ts文件：

   import { defineCollection, defineConfig } from "@content-collections/core";
   
   const posts = defineCollection({
     name: "posts",
     directory: "src/posts",
     include: "**/*.md",
     schema: (z) => ({
       title: z.string(),
       summary: z.string(),
     }),
   });
   
   export default defineConfig({
     collections: [posts],
   });
   

2. 开始在src/posts中编写内容：

   ---
   title: 你好，世界
   summary: 这是我的第一篇文章
   ---
   
   # 你好，世界
   
   这是我的第一篇文章。
   

3. 在您的应用程序中使用您的内容：

   import { allPosts } from "content-collections";
   
   export function Posts() {
     return (
       <ul>
         {allPosts.map((post) => (
           <li key={post._meta.path}>
             <a href={`/posts/${post._meta.path}`}>
               <h3>{post.title}</h3>
               <p>{post.summary}</p>
             </a>
           </li>
         ))}
       </ul>
     );
   }
   

   请注意，上面的示例仅展示了内容集合的基础用法，并未涵盖内容转换。 内容集合默认不会转换markdown或mdx等内容。 但它有一些包可以为您完成这项工作：

   • @content-collections/markdown
   • @content-collections/mdx

   如果您想查看更多示例和用例，请参阅文档。

赞助商

成为赞助商

许可证

内容集合基于MIT许可证授权。