Astro 进取器
此包为Astro提供饲料加载器. 它允许您加载和剖析 RSS, RDF, 和 Atom 种子, 并使用您的 Astro 站点中的数据 .
货包包括两个装载器:
feedLoader: 用于构建时内容收藏的构建时种子加载liveFeedLoader: 现场内容收集实验性运行时的饲料装载
安装
npm install @ascorbic/feed-loader
使用量
构建时种子加载( Static Collections)
您可以在内容配置中使用种子加载器 :
// src/content/config.ts
import { defineCollection } from "astro:content";
import { feedLoader } from "@ascorbic/feed-loader";
const releases = defineCollection({
loader: feedLoader({
url: "https://github.com/withastro/astro/releases.atom",
}),
});
const podcasts = defineCollection({
loader: feedLoader({
url: "https://feeds.99percentinvisible.org/99percentinvisible",
}),
});
export const collections = { releases, podcasts };
然后,你可以像Astro的其他收藏一样使用这些:
---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
const episodes = await getCollection("podcasts");
---
<Layout title="Episodes">
<h2>Episodes</h2>
<ul>
{
episodes.map((episode) => (
<li>
<a href={`/episodes/${episode.id.replace(/\W/g, "-")}`}>
{episode.data.title}
</a>
</li>
))
}
</ul>
</Layout>
你可以使用 render() 函数 :
---
import { render, getEntry } from "astro:content";
const episode = getEntry("podcasts", Astro.params.id);
const { Content } = await render(episode);
---
<h1>{episode.data.title}</h1>
<Content />
<p>
{
episode.data.media.map((media) => (
<audio controls>
<source src={media.url} type={media.mimeType} />
</audio>
))
}
</p>
活饲料装入器( 实验)
实验特性: 现场内容收藏需要 Astro 5.1.0 或稍后时间 而且是实验性的 API可能在未来的版本中有所改变.
实时 feed 加载允许您在请求时获取 RSS/Atom 种子而不是构建时间 。 对于您想要显示新数据而不重建您网站的经常更新的内容,此功能是有用的 .
设置
- 启用现场内容收藏 在你身边
astro.config.mjs数字 :
export default defineConfig({
// ...
experimental: {
liveContentCollections: true,
},
});
- 创建活配置文件 时间
src/live.config.ts数字 :
// src/live.config.ts
import { defineLiveCollection } from "astro:content";
import { liveFeedLoader } from "@ascorbic/feed-loader";
const news = defineLiveCollection({
type: "live",
loader: liveFeedLoader({
url: "https://feeds.bbci.co.uk/news/science_and_environment/rss.xml",
}),
});
export const collections = { news };
- 在页面中使用活集数字 :
---
// src/pages/news/index.astro
import { getLiveCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';
export const prerender = false; // Required for live content, unless using output: "server"
const { entries: articles, error } = await getLiveCollection('news', { limit: 10 });
if (error) {
console.error('Failed to load news:', error.message);
}
---
<Layout title="Latest News">
{error ? (
<p>Error loading news: {error.message}</p>
) : (
<ul>
{articles?.map((article) => (
<li>
<a href={`/news/${encodeURIComponent(article.id)}`}>
{article.data.title}
</a>
<p>{article.data.description}</p>
</li>
))}
</ul>
)}
</Layout>
- 创建单个文章页面 服务器侧渲染 :
---
// src/pages/news/[id].astro
import { getLiveEntry } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
export const prerender = false; // Required for live content, unless using output: "server"
const { id } = Astro.params;
const { entry: article, error } = await getLiveEntry('news', decodeURIComponent(id!));
if (error || !article) {
return Astro.redirect('/news');
}
---
<Layout title={article.data.title}>
<h1>{article.data.title}</h1>
<div set:html={article.data.description} />
<a href={article.data.url} target="_blank">Read full article →</a>
</Layout>
实况载入器选项
这个 liveFeedLoader 支持与 feedLoader数字 :
liveFeedLoader({
url: "https://example.com/feed.xml",
requestOptions: {
headers: {
"User-Agent": "My Astro Site",
},
},
});
过滤现场收藏
您可以在获取时过滤活集 :
// Get latest 5 articles
const { entries } = await getLiveCollection("news", { limit: 5 });
// Filter by category
const { entries } = await getLiveCollection("news", { category: "science" });
// Filter by author
const { entries } = await getLiveCollection("news", { author: "john" });
// Filter by date range
const { entries } = await getLiveCollection("news", {
since: new Date("2024-01-01"),
until: new Date("2024-12-31"),
});
处理错误
活性饲料加载器返回您可以适当处理的结构化错误 :
import { FeedLoadError, FeedValidationError } from "@ascorbic/feed-loader";
const { entries, error } = await getLiveCollection("news");
if (error) {
if (error instanceof FeedLoadError) {
console.error(`Feed loading failed: ${error.message} (${error.code})`);
} else if (error instanceof FeedValidationError) {
console.error(`Feed validation failed: ${error.message}`);
}
}
何时使用 Live vs 静态加载
使用实时加载 :
- 内容经常更新(每天多次)
- 你需要实时数据
- 您想要避免重构内容更改
- 您正在构建预览功能
使用静态加载时 :
- 内容相对静止
- 业绩至关重要(在提交前)
- 您想要构建时间优化
- 您需要处理 MDX 或图像
API 参考
feedLoader(options)
静态内容集装器用于建设时的饲料处理.
liveFeedLoader(options) ⚠️ 实验
运行时回馈处理的活性内容收集加载器.
选项
url(需要): 要获取的种子 URLrequestOptions: 自定义获取选项(标题等)
错误类型
FeedError: 基础错误类FeedLoadError: 网络/ HTTP 错误FeedValidationError: 种子解析/验证出错