) : items.length > 0 ? (
items.map((item, index) => (
-
+
-
@@ -332,28 +362,28 @@ const MediaGrid: React.FC
= ({ type, title, doubanId }) => {
))
) : !isLoading ? (
-
暂无{type === 'movie' ? '电影' : '图书'}数据
+
+ 暂无{type === "movie" ? "电影" : "图书"}数据
+
) : null}
-
+
{error && items.length > 0 && (
)}
-
+
{isLoading && (
)}
-
- {!hasMoreContent && items.length > 0 && !isLoading && (
-
- )}
+
+ {!hasMoreContent && items.length > 0 && !isLoading &&
}
);
};
-export default MediaGrid;
\ No newline at end of file
+export default MediaGrid;
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
new file mode 100644
index 0000000..e455d33
--- /dev/null
+++ b/src/components/ThemeToggle.astro
@@ -0,0 +1,139 @@
+---
+interface Props {
+ height?: number;
+ width?: number;
+ fill?: string;
+ className?: string;
+}
+
+const {
+ height = 16,
+ width = 16,
+ fill = "currentColor",
+ className = ""
+} = Astro.props;
+---
+
+
+
+
\ No newline at end of file
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
deleted file mode 100644
index e4176d4..0000000
--- a/src/components/ThemeToggle.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from 'react';
-
-export function ThemeToggle({ height = 16, width = 16, fill = "currentColor", className = "" }) {
- // 使用null作为初始状态，表示尚未确定主题
- const [theme, setTheme] = useState
(null);
- const [mounted, setMounted] = useState(false);
- const [transitioning, setTransitioning] = useState(false);
- const transitionTimeoutRef = useRef(null);
-
- // 获取系统主题
- const getSystemTheme = useCallback(() => {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }, []);
-
- // 在客户端挂载后再确定主题
- useEffect(() => {
- setMounted(true);
-
- // 从 localStorage 或 document.documentElement.dataset.theme 获取主题
- const savedTheme = localStorage.getItem('theme');
- const rootTheme = document.documentElement.dataset.theme;
- const systemTheme = getSystemTheme();
-
- // 优先使用已保存的主题，其次是文档根元素的主题，最后是系统主题
- const initialTheme = savedTheme || rootTheme || systemTheme;
- setTheme(initialTheme);
-
- // 确保文档根元素的主题与状态一致
- document.documentElement.dataset.theme = initialTheme;
-
- // 监听系统主题变化
- const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
- const handleMediaChange = (e: MediaQueryListEvent) => {
- // 只有当主题设置为跟随系统时才更新主题
- if (!localStorage.getItem('theme')) {
- const newTheme = e.matches ? 'dark' : 'light';
- setTheme(newTheme);
- document.documentElement.dataset.theme = newTheme;
- }
- };
-
- mediaQuery.addEventListener('change', handleMediaChange);
-
- return () => {
- mediaQuery.removeEventListener('change', handleMediaChange);
-
- // 清理可能的超时
- if (transitionTimeoutRef.current) {
- clearTimeout(transitionTimeoutRef.current);
- transitionTimeoutRef.current = null;
- }
- };
- }, [getSystemTheme]);
-
- // 当主题改变时更新 DOM 和 localStorage
- useEffect(() => {
- if (!mounted || theme === null) return;
-
- document.documentElement.dataset.theme = theme;
-
- // 检查是否是跟随系统的主题
- const isSystemTheme = theme === getSystemTheme();
-
- if (isSystemTheme) {
- localStorage.removeItem('theme');
- } else {
- localStorage.setItem('theme', theme);
- }
- }, [theme, mounted, getSystemTheme]);
-
- const toggleTheme = useCallback(() => {
- if (transitioning) return; // 避免快速连续点击
-
- setTransitioning(true);
- setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
-
- // 添加300ms的防抖，避免快速切换
- transitionTimeoutRef.current = setTimeout(() => {
- setTransitioning(false);
- }, 300);
- }, [transitioning]);
-
- // 在客户端挂载前，返回一个空的占位符
- if (!mounted || theme === null) {
- return (
-
- 加载主题切换按钮...
-
- );
- }
-
- return (
- {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault();
- toggleTheme();
- }
- }}
- aria-label={`切换到${theme === 'dark' ? '浅色' : '深色'}模式`}
- >
- {theme === 'dark' ? (
-
- ) : (
-
- )}
-
-
{hoveredCountry && (
- {hoveredCountry}
+ {hoveredCountry}
{hoveredCountry && visitedPlaces.includes(hoveredCountry) ? (
-
@@ -867,4 +954,4 @@ const WorldHeatmap: React.FC = ({ visitedPlaces }) => {
);
};
-export default WorldHeatmap;
\ No newline at end of file
+export default WorldHeatmap;
diff --git a/src/content/旅行笔记/第一次出国旅行-东南亚.md b/src/content/旅行笔记/第一次出国旅行-东南亚.md
index a34cf2e..c34cf03 100644
--- a/src/content/旅行笔记/第一次出国旅行-东南亚.md
+++ b/src/content/旅行笔记/第一次出国旅行-东南亚.md
@@ -4,13 +4,13 @@ date: 2025-04-18T22:01:57+08:00
tags: []
---
->大多数和别人的对话都是使用谷歌翻译的同声翻译
+> 大多数和别人的对话都是使用谷歌翻译的同声翻译
## 睁眼说瞎话
- 值机的时候碰到本次旅行第一个交流的外国人，一个会讲中文的马来西亚男人，感觉马来西亚男人说话像乱序中文但是能听懂，马来西亚男人知道了我没有马来西亚货币，提出换一点林吉特给我，马来西亚男人的老婆说人民币拿去没用，我都不抱希望了，但是马来西亚夫妻还是兑换了100人民币给我。
+ 值机的时候碰到本次旅行第一个交流的外国人，一个会讲中文的马来西亚男人，感觉马来西亚男人说话像乱序中文但是能听懂，马来西亚男人知道了我没有马来西亚货币，提出换一点林吉特给我，马来西亚男人的老婆说人民币拿去没用，我都不抱希望了，但是马来西亚夫妻还是兑换了 100 人民币给我。
- 还没出国门就遇到第一个问题，海关闸机刷了不开门，海关警察来了对我进行盘问，海关的警察问我很多问题，其中就有我父母是否同意，现在遇到突发问题，也是可以面不改色的说假话了，不过好在中午的时候打电话询问了一下我爹的意见，虽然我爹不同意，但是好在留下了通话记录，我将过去的旅游照片给海关看，与海关警察周旋了10多分钟，幸好过海关的时候快到晚上12点了，不好向我父母核实，差点这次旅行计划早夭了。
+ 还没出国门就遇到第一个问题，海关闸机刷了不开门，海关警察来了对我进行盘问，海关的警察问我很多问题，其中就有我父母是否同意，现在遇到突发问题，也是可以面不改色的说假话了，不过好在中午的时候打电话询问了一下我爹的意见，虽然我爹不同意，但是好在留下了通话记录，我将过去的旅游照片给海关看，与海关警察周旋了 10 多分钟，幸好过海关的时候快到晚上 12 点了，不好向我父母核实，差点这次旅行计划早夭了。
第一次做廉航，亚航位置空隙比国内任何大巴空隙都要小，最难受的交通出行方式。
@@ -18,21 +18,21 @@ tags: []
## 可恶的公交车司机
- 马来西亚第一站计划去粉红清真寺，从吉隆坡机场1楼乘坐巴士直接过去，但是购票的时候，公交车售票厅工作人员说没有到粉红清真寺的公交车只能打出租车前往，看了一下打车的价格，决定重新做攻略再挣扎一下，在休息长椅坐了半个小时终于找到新路线`地铁站->布城->公交站->粉红清真寺`，往机场3楼地铁站走的时候发现斜挎包不见了，听说国外酒店工作人员会翻包偷钱，就买了个斜挎包放护照，现金等重要的东西，惊慌了一会，还好头脑风暴了一会想起来了在做攻略的长椅忘拿了。
+ 马来西亚第一站计划去粉红清真寺，从吉隆坡机场 1 楼乘坐巴士直接过去，但是购票的时候，公交车售票厅工作人员说没有到粉红清真寺的公交车只能打出租车前往，看了一下打车的价格，决定重新做攻略再挣扎一下，在休息长椅坐了半个小时终于找到新路线`地铁站->布城->公交站->粉红清真寺`，往机场 3 楼地铁站走的时候发现斜挎包不见了，听说国外酒店工作人员会翻包偷钱，就买了个斜挎包放护照，现金等重要的东西，惊慌了一会，还好头脑风暴了一会想起来了在做攻略的长椅忘拿了。
- 布城的公交车站是始发站，在最后一个站台才找到`T523`，我想上车但是司机朝我摆手，我就在车子旁边的亭子研究如何打车，研究了一会司机叫了我一声，给我一个招揽的手势，上去了我给司机看我的谷歌地图，用翻译软件软件问司机可以去这里吗，司机用本地话说一大堆，我将谷歌同声翻译打开司机，告诉司机对着这个说我就可以听懂了，但是给司机一个字不说，拿开了手机司机又开始说本地话，僵持了一会司机不耐烦的打手势让我去旁边公交车，我以为上错车了，我将地图给旁边公交车司机看，说要去地图的地方，旁边公交车的司机指着`T523`告诉我那辆车可以去，回到T523后告诉司机就是这个车，车开了一会司机说 three ，我本以为司机完全不会英语呢，途中看到一个清真寺，打开谷歌地图显示现在要去的最后一个站，我指着清真寺问司机"is there?",司机说"yes,down"，看着绿色的清真寺我觉得现在照骗太多了，看着别人拿着证件或者是手机给安保人员看了才能进去，我想网上不要预约和门票的说法看来是过时了，不过来都来了我要去试试，到了门口工作人员拦下我，我告诉工作人员我没有预约但是我想进去参观，工作人员反复询问我确定要进去吗，我告诉工作人员我专程过来参观这个清真寺，工作人员的话翻译过来是“这是政府办公的地方不允许外人靠近，但是你是第一次”，我打开地图重新导航显示距离粉红清真寺还有1.2km。
+ 布城的公交车站是始发站，在最后一个站台才找到`T523`，我想上车但是司机朝我摆手，我就在车子旁边的亭子研究如何打车，研究了一会司机叫了我一声，给我一个招揽的手势，上去了我给司机看我的谷歌地图，用翻译软件软件问司机可以去这里吗，司机用本地话说一大堆，我将谷歌同声翻译打开司机，告诉司机对着这个说我就可以听懂了，但是给司机一个字不说，拿开了手机司机又开始说本地话，僵持了一会司机不耐烦的打手势让我去旁边公交车，我以为上错车了，我将地图给旁边公交车司机看，说要去地图的地方，旁边公交车的司机指着`T523`告诉我那辆车可以去，回到 T523 后告诉司机就是这个车，车开了一会司机说 three ，我本以为司机完全不会英语呢，途中看到一个清真寺，打开谷歌地图显示现在要去的最后一个站，我指着清真寺问司机"is there?",司机说"yes,down"，看着绿色的清真寺我觉得现在照骗太多了，看着别人拿着证件或者是手机给安保人员看了才能进去，我想网上不要预约和门票的说法看来是过时了，不过来都来了我要去试试，到了门口工作人员拦下我，我告诉工作人员我没有预约但是我想进去参观，工作人员反复询问我确定要进去吗，我告诉工作人员我专程过来参观这个清真寺，工作人员的话翻译过来是“这是政府办公的地方不允许外人靠近，但是你是第一次”，我打开地图重新导航显示距离粉红清真寺还有 1.2km。
粉红清真寺的穹顶真的是粉红色的!穹顶里面看更漂亮，由红色，浅粉色，白色构成的图案
在粉红清真寺里面有两幅捐款地图，捐款一次可以用针扎自己的家乡，一副世界地图一副中国地图，世界地图上的中国和中国地图都是密密麻麻的针
- 国外的公交车不适合i人,我打算从布城从地铁到市中心，需要先坐公交车到布城去，差10秒就赶上了，但是站台没人所以公交车司机没有停，第二次在休息区等了半个小时司机又没停，可能是司机没看到我吧，第三次我站在公交车站台等车的位置等待可是他还是没停，这次可能是没有给司机信号，第四次等公交车快到的时候我死死的看着司机，与他建立心灵链接，但他还是不停，浏览器查询原来要招手，用打车软件看了一下两公里，还是选择打车了
+ 国外的公交车不适合 i 人,我打算从布城从地铁到市中心，需要先坐公交车到布城去，差 10 秒就赶上了，但是站台没人所以公交车司机没有停，第二次在休息区等了半个小时司机又没停，可能是司机没看到我吧，第三次我站在公交车站台等车的位置等待可是他还是没停，这次可能是没有给司机信号，第四次等公交车快到的时候我死死的看着司机，与他建立心灵链接，但他还是不停，浏览器查询原来要招手，用打车软件看了一下两公里，还是选择打车了
- 在去酒店的路上看到了很多流浪汉，不过感觉他们的穿搭和我没有区别，一个包+拖鞋，历经大雨来到谷歌地图显示的位置，却找不到酒店，找了一个印度男人问路，他也找不到，他给酒店客服打电话后，告诉我不在这个区域，给我指路，往哪走再往哪走到一个塔下快到了问问别人，我一点没记住好在用高德地图重新导航，竟然没问题。
+ 在去酒店的路上看到了很多流浪汉，不过感觉他们的穿搭和我没有区别，一个包+拖鞋，历经大雨来到谷歌地图显示的位置，却找不到酒店，找了一个印度男人问路，他也找不到，他给酒店客服打电话后，告诉我不在这个区域，给我指路，往哪走，再往哪走，到一个塔下就快到了，再问问别人，我一点没记住好在用高德地图重新导航，竟然没问题。
- 晚餐找了家本地人多的店，点了一个大虾饭，没想到是正宗印度菜，`米饭味道=70%八角+20%洗衣服+10%辣椒`
+ 晚餐在酒店旁找了家本地人多的店，点了一个大虾饭，没想到是正宗印度菜，`米饭味道=70%八角+20%洗衣服+10%辣椒`
- 凌晨3点被炸街吵醒，没想到精神小伙也是全世界统一
+ 凌晨 3 点被炸街吵醒，没想到精神小伙也是全世界统一
---