+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/graduation/src/pages/travel/[slug].astro b/web/graduation/src/pages/travel/[slug].astro
new file mode 100644
index 0000000..b633943
--- /dev/null
+++ b/web/graduation/src/pages/travel/[slug].astro
@@ -0,0 +1,249 @@
+---
+import { getCollection, getEntry, type CollectionEntry } from "astro:content";
+import MainLayout from "../../layouts/MainLayout.astro";
+import ScrollReveal from "../../components/aceternity/ScrollReveal.astro";
+
+// 定义Props类型
+export interface Props {
+ entry: CollectionEntry<"travel">;
+}
+
+// 生成静态路径
+export async function getStaticPaths() {
+ const travels = await getCollection("travel");
+ return travels.map((entry) => ({
+ params: { slug: entry.slug },
+ props: { entry },
+ }));
+}
+
+// 获取当前旅行攻略数据
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+// 获取相关旅行攻略
+const allTravels = await getCollection("travel");
+const relatedTravels = allTravels
+ .filter(
+ (item) =>
+ item.slug !== entry.slug &&
+ (item.data.season === entry.data.season ||
+ item.data.type === entry.data.type ||
+ item.data.tags.some((tag) => entry.data.tags.includes(tag)))
+ )
+ .slice(0, 3);
+---
+
+
+
+
+
+
+
+
+
+
首页
+
/
+
旅行攻略
+
/
+
{entry.data.title}
+
{entry.data.title}
+
+
+ {entry.data.season && (
+
+ 🌤️ {entry.data.season}
+
+ )}
+
+ {entry.data.type && (
+
+ 📋 {entry.data.type}
+
+ )}
+
+ {entry.data.days && (
+
+ ⏱️ {entry.data.days}天行程
+
+ )}
+
+ {entry.data.difficulty && (
+
+ 🏔️ 难度：{entry.data.difficulty}
+
+ )}
+
+ {entry.data.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+ {entry.data.description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {entry.data.title} 图片
+
+
+
+
+
+
+
攻略信息
+
+
+ {entry.data.season && (
+
+ 适宜季节:
+ {entry.data.season}
+
+ )}
+
+ {entry.data.type && (
+
+ 攻略类型:
+ {entry.data.type}
+
+ )}
+
+ {entry.data.days && (
+
+ 行程天数:
+ {entry.data.days}天
+
+ )}
+
+ {entry.data.difficulty && (
+
+ 难度级别:
+ {entry.data.difficulty}
+
+ )}
+
+
+
旅行主题:
+
+ {entry.data.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ {entry.data.pubDate && (
+
+ 发布时间:
+ {new Date(entry.data.pubDate).toLocaleDateString('zh-CN')}
+
+ )}
+
+
+
+
+
+
+
+
旅行小贴士
+
+
+
+
✓
+
出行前查看天气预报，准备合适的衣物
+
+
+
+
+
+
+
+
+ {relatedTravels.length > 0 && (
+
+
+
+ )}
+
+
+
+
+ 返回所有攻略
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/graduation/src/pages/travel/index.astro b/web/graduation/src/pages/travel/index.astro
new file mode 100644
index 0000000..8cabc1d
--- /dev/null
+++ b/web/graduation/src/pages/travel/index.astro
@@ -0,0 +1,452 @@
+---
+import MainLayout from "../../layouts/MainLayout.astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+import ScrollReveal from "../../components/aceternity/ScrollReveal.astro";
+
+// 获取旅行攻略集合
+const travels = await getCollection("travel");
+
+// 按发布日期排序
+function 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 sortedTravels = [...travels].sort(sortByDate);
+
+// 提取所有标签并按数量排序
+const allTags: {name: string, count: number}[] = [];
+travels.forEach((travel) => {
+ travel.data.tags.forEach((tag: string) => {
+ const existing = allTags.find(t => t.name === tag);
+ if (existing) {
+ existing.count += 1;
+ } else {
+ allTags.push({ name: tag, count: 1 });
+ }
+ });
+});
+
+const sortedTags = [...allTags].sort((a, b) => b.count - a.count);
+
+// 提取所有季节
+const allSeasons = new Set();
+travels.forEach((travel) => {
+ if (travel.data.season) {
+ allSeasons.add(travel.data.season);
+ }
+});
+const seasons = Array.from(allSeasons);
+
+// 提取所有类型
+const allTypes = new Set();
+travels.forEach((travel) => {
+ if (travel.data.type) {
+ allTypes.add(travel.data.type);
+ }
+});
+const types = Array.from(allTypes);
+
+// 提取所有难度
+const allDifficulties = new Set();
+travels.forEach((travel) => {
+ if (travel.data.difficulty) {
+ allDifficulties.add(travel.data.difficulty);
+ }
+});
+const difficulties = Array.from(allDifficulties);
+
+// 提取所有城市
+const cities: {name: string, count: number}[] = [];
+travels.forEach((travel) => {
+ if (travel.data.city) {
+ const existingCity = cities.find(c => c.name === travel.data.city);
+ if (existingCity) {
+ existingCity.count++;
+ } else {
+ cities.push({ name: travel.data.city, count: 1 });
+ }
+ }
+});
+
+// 按城市出现次数排序
+cities.sort((a, b) => b.count - a.count);
+
+// 分页相关
+const itemsPerPage = 10;
+const totalPages = Math.ceil(sortedTravels.length / itemsPerPage);
+const currentPage = 1;
+const visibleTravels = sortedTravels.slice(
+ (currentPage - 1) * itemsPerPage,
+ currentPage * itemsPerPage
+);
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 这些是我在河北各地的旅行笔记，不是官方推荐，而是个人探索与体验的记录。希望能给你不一样的旅行灵感...
+
+
+
+
+
+
+
+
+
+
+
+ {totalPages > 1 && (
+
+ )}
+ {totalPages > 2 && (
+
+ )}
+ {totalPages > 1 && (
+
+ )}
+
+
+
+
+
+
+ "
+ 旅行不在于目的地的远近，而在于看世界的眼光。河北的每一处风景，都值得用心发现...
+ "
+
+
+
+
+
+
+
+