--- import MainLayout from "../../layouts/MainLayout.astro"; import { getCollection, type CollectionEntry } from "astro:content"; import ScrollReveal from "../../components/aceternity/ScrollReveal.astro"; // 获取美食内容集合 const cuisines = await getCollection("cuisine"); // 按照日期排序 const sortByDate = (a: T, b: T): number => { return new Date(b.data.pubDate || b.data.updatedDate || 0).getTime() - new Date(a.data.pubDate || a.data.updatedDate || 0).getTime(); }; // 按发布日期排序 const sortedCuisines = [...cuisines].sort(sortByDate); // 提取所有标签 const allTags: {name: string, count: number}[] = []; sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => { cuisine.data.tags.forEach((tag: string) => { const existingTag = allTags.find(t => t.name === tag); if (existingTag) { existingTag.count++; } else { allTags.push({ name: tag, count: 1 }); } }); }); // 按照标签出现次数排序 allTags.sort((a, b) => b.count - a.count); // 获取所有分类并计数 const categories: {name: string, count: number}[] = []; sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => { if (cuisine.data.category) { const existingCategory = categories.find(c => c.name === cuisine.data.category); if (existingCategory) { existingCategory.count++; } else { categories.push({ name: cuisine.data.category, count: 1 }); } } }); // 按照分类出现次数排序 categories.sort((a, b) => b.count - a.count); // 获取所有产地并计数 const citys: {name: string, count: number}[] = []; sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => { if (cuisine.data.city) { const existingcity = citys.find(o => o.name === cuisine.data.city); if (existingcity) { existingcity.count++; } else { citys.push({ name: cuisine.data.city, count: 1 }); } } }); // 按照产地出现次数排序 citys.sort((a, b) => b.count - a.count); // 获取所有口味并计数 const tastes: {name: string, count: number}[] = []; sortedCuisines.forEach((cuisine: CollectionEntry<"cuisine">) => { if (cuisine.data.taste) { const existingTaste = tastes.find(t => t.name === cuisine.data.taste); if (existingTaste) { existingTaste.count++; } else { tastes.push({ name: cuisine.data.taste, count: 1 }); } } }); // 按照口味出现次数排序 tastes.sort((a, b) => b.count - a.count); // 分页逻辑 const itemsPerPage = 9; // 从URL参数获取当前页码 const url = new URL(Astro.request.url); const page = parseInt(url.searchParams.get('page') || '1'); const totalPages = Math.ceil(sortedCuisines.length / itemsPerPage); const currentPageCuisines = sortedCuisines.slice((page - 1) * itemsPerPage, page * itemsPerPage); // 搜索和筛选逻辑（实际应用中应该根据查询参数来筛选） const searchQuery = ''; const selectedCategory = ''; const selectedcity = ''; const selectedTaste = ''; const selectedTags: string[] = []; const sortBy: 'date' | 'name' = 'date'; // 分页参数 const queryParams = ''; // 在实际应用中，这里应该是基于筛选条件构建的查询字符串 ---

河北美食食谱

收集自河北各地的传统美食配方，
家传秘方与地方特色，尽在此食谱

{cuisines.length} 道经典菜肴
{citys.length} 个地方特色
收集于 2023 年
家常菜 传统名菜 地方特色 小吃点心

食谱检索

菜系

{categories.map((category, index) => ( ))}

地域特色

{citys.map((city) => ( ))}

味道特点

{tastes.map((taste) => ( ))}

主要食材

{allTags.map((tag, i) => { // 为标签生成不同的颜色 const colors = ['amber', 'red', 'green', 'orange', 'amber', 'red']; const colorClasses = { 'amber': 'border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-200 hover:border-amber-400 dark:hover:border-amber-700 bg-amber-50/50 dark:bg-amber-900/20', 'red': 'border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 hover:text-red-900 dark:hover:text-red-200 hover:border-red-400 dark:hover:border-red-700 bg-red-50/50 dark:bg-red-900/20', 'green': 'border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-200 hover:border-green-400 dark:hover:border-green-700 bg-green-50/50 dark:bg-green-900/20', 'orange': 'border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-200 hover:border-orange-400 dark:hover:border-orange-700 bg-orange-50/50 dark:bg-orange-900/20' }; const color = colors[i % colors.length] as keyof typeof colorClasses; return (
{tag.name}
); })}

食谱小贴士

烹饪是一门艺术，每一道河北美食都融合了独特的地域文化和历史传承，讲究用料、火候与调味的绝妙平衡。

{(searchQuery || selectedCategory || selectedcity || selectedTaste || selectedTags.length > 0) && (
筛选条件
{/* 筛选条件显示 */}
)}
{currentPageCuisines.map((cuisine, index) => { // 随机食谱纸张背景颜色 const paperColors = [ 'bg-amber-50/80 border-amber-200 dark:bg-amber-900/30 dark:border-amber-800', 'bg-orange-50/80 border-orange-200 dark:bg-orange-900/30 dark:border-orange-800', 'bg-red-50/80 border-red-200 dark:bg-red-900/30 dark:border-red-800', 'bg-green-50/80 border-green-200 dark:bg-green-900/30 dark:border-green-800' ]; const paperColor = paperColors[index % paperColors.length]; return (
{cuisine.data.title}
{cuisine.data.category && (
{cuisine.data.category}
)} {Math.random() > 0.7 && (
推荐
)}

{cuisine.data.title}

{cuisine.data.city && (
{cuisine.data.city}
)} {cuisine.data.taste && (
{cuisine.data.taste}
)}

{cuisine.data.description}

{cuisine.data.tags.slice(0, 3).map((tag: string, i: number) => ( #{tag} ))} {cuisine.data.tags.length > 3 && ( +{cuisine.data.tags.length - 3} )}
查看详细食谱
{Math.random() > 0.5 && ( 传统 )} {Math.random() > 0.7 && ( 家常 )}
); })}
{totalPages > 1 && (
1 ? `?page=${page - 1}${queryParams}` : '#'} class={`flex items-center px-3 py-1.5 ${ page === 1 ? 'text-brown-400 dark:text-brown-600 cursor-not-allowed' : 'text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/30' } rounded-md font-recipe-body transition-colors`} > 上一页 {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => ( {pageNum} ))} 下一页
)}
Chef Hat

河北美食宝库收录了{cuisines.length}+种传统佳肴与地方特色小吃。 每一道食谱都承载着我们的文化记忆和烹饪智慧。尽情探索，找到属于你的美食灵感！