博客侧边栏美化：集成一个智能天气卡片

前言 📝

一个个性化的博客，除了内容优质，一些有趣的小部件也能极大地提升访客体验。
天气卡片就是一个常见但非常实用的小功能，它能让访客在浏览您的博客时，顺便了解当地的天气情况，增加页面的互动性和趣味性。
本教程将展示如何为博客添加一个智能天气卡片。它不仅会自动根据访客的 IP 地址显示天气，还提供了一个“精确定位”按钮，让用户可以获取更准确的天气信息。我们还会用漂亮的图标和渐变色来美化它。

方案概述 🗺️ 我们的天气卡片是一个独立的 Svelte 组件，它负责处理所有与天气相关的功能：

IP 定位 📍：组件加载时，会首先通过 ipapi.co 服务获取访客的大致位置（城市）。
天气查询 🌦️：根据获取到的经纬度，调用 Open-Meteo 的免费 API 来获取实时天气数据。
精确定位（可选） 🛰️：用户可以点击一个按钮，授权浏览器使用更高精度的地理位置（如 GPS），并通过 Nominatim 服务将经纬度反向解析成城市名称，从而获得更准确的天气。
UI 展示 ✨：使用 Svelte 来动态展示天气信息，包括温度、风速，并根据天气代码显示不同的 Emoji 图标，同时卡片拥有现代化的渐变背景和布局。

实现步骤 ⚙️

整个实现过程都封装在一个 Svelte 组件中，非常便于集成。

创建 Svelte 组件 我们在 src/components/widget/ 目录下创建了 Weather.svelte 文件。这是所有逻辑的核心。
编写组件代码 组件的 <script> 部分包含了所有功能逻辑：
- onMount：组件挂载后，立即开始 IP 定位和天气查询流程。
- fetchWeather：一个专门的函数，负责根据经纬度调用天气 API。
- getCityFromCoords：当使用精确定位时，这个函数负责将经纬度转换成城市名。
- usePreciseLocation：处理“精确定位”按钮的点击事件，调用浏览器 Geolocation API。
- getWeatherIcon：一个辅助函数，根据 Open-Meteo 返回的天气代码（weathercode）匹配一个合适的 Emoji 图标，让界面更生动。
集成到侧边栏 最后，我们只需要在侧边栏组件 src/components/widget/SideBar.astro 中引入并使用这个新的天气组件即可。
```
1
---
2
import Weather from "./Weather.svelte";
3
---
4
<Weather client:load />
```
client:load 指令告诉 Astro，这个组件需要在客户端加载和渲染，因为它的功能依赖于浏览器环境（如 fetch 和 navigator.geolocation）。

结束 🎉 通过这个小小的天气卡片，我们的博客侧边栏变得更加生动和实用。这个功能不仅展示了 Svelte 在构建交互式组件方面的强大能力，也体现了通过组合多个第三方 API 来实现复杂功能的灵活性。希望这个小教程能给你的博客带来一点新的色彩。如果你有任何问题或改进建议，欢迎随时提出！

附录：最终配置文件#

天气卡片组件: src/components/widget/Weather.svelte

1
<script lang="ts">
2
  import { onMount } from 'svelte';
3

4
  let weather: any = null;
5
  let city: string = '';
6
  let error: string = '';
7
  let loading: boolean = true;
8

9
  // Weather code to SVG icon mapping
10
  function getWeatherIcon(code: number): string {
11
    if (code === 0) return '☀️'; // Clear sky
12
    if (code >= 1 && code <= 3) return '☁️'; // Mainly clear, partly cloudy, overcast
13
    if (code >= 45 && code <= 48) return '🌫️'; // Fog
14
    if (code >= 51 && code <= 65) return '🌧️'; // Drizzle, Rain
15
    if (code >= 80 && code <= 82) return '🌦️'; // Rain showers
16
    if (code >= 95 && code <= 99) return '⛈️'; // Thunderstorm
17
    return '-';
18
  }
19

20
  async function fetchWeather(latitude: number, longitude: number) {
21
    const weatherResponse = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`);
22
    if (!weatherResponse.ok) {
23
      throw new Error('获取天气信息失败');
24
    }
25
    const weatherData = await weatherResponse.json();
26
    weather = weatherData.current_weather;
27
  }
28

29
  async function getCityFromCoords(latitude: number, longitude: number) {
30
    try {
31
      const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&accept-language=zh-CN`);
32
      if (!response.ok) return '当前位置';
33
      const data = await response.json();
34
      return data.address.city || data.address.town || data.address.village || '当前位置';
35
    } catch (e) {
36
      console.error("Reverse geocoding failed", e);
37
      return '当前位置';
38
    }
39
  }
40

41
  async function usePreciseLocation() {
42
    loading = true;
43
    error = '';
44
    if (!navigator.geolocation) {
45
      error = '您的浏览器不支持精确定位。';
46
      loading = false;
47
      return;
48
    }
49
    navigator.geolocation.getCurrentPosition(
50
      async (position) => {
51
        const { latitude, longitude } = position.coords;
52
        city = await getCityFromCoords(latitude, longitude);
53
        await fetchWeather(latitude, longitude);
54
        loading = false;
55
      },
56
      (err) => {
57
        error = err.code === err.PERMISSION_DENIED ? '您已拒绝位置权限，无法使用精确定位。' : '无法获取精确定位。';
58
        loading = false;
59
      }
60
    );
61
  }
62

63
  onMount(async () => {
64
    try {
65
      const ipResponse = await fetch('https://ipapi.co/json/');
66
      if (!ipResponse.ok) throw new Error('获取IP信息失败');
67
      const ipData = await ipResponse.json();
68
      city = ipData.city || '未知位置';
69
      const { latitude, longitude } = ipData;
70
      if (!latitude || !longitude) throw new Error('无法通过IP确定位置');
71
      await fetchWeather(latitude, longitude);
72
    } catch (e: any) {
73
      error = e.message;
74
      console.error(e);
75
    } finally {
76
      loading = false;
77
    }
78
  });
79
</script>
80

81
<div class="weather-widget p-4 rounded-lg shadow-md bg-gradient-to-br from-blue-200 to-cyan-200 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200">
82
  <div class="flex justify-between items-center mb-3">
83
    <h2 class="text-lg font-bold">{city} 天气</h2>
84
    <button on:click={usePreciseLocation} class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:outline-none">
85
      精确定位
86
    </button>
87
  </div>
88
  {#if loading}
89
    <div class="flex items-center justify-center h-24">
90
      <p>正在加载天气...</p>
91
    </div>
92
  {:else if weather && !error}
93
    <div class="flex items-center justify-around text-center">
94
      <div class="text-5xl">
95
        {getWeatherIcon(weather.weathercode)}
96
      </div>
97
      <div class="pl-4">
98
        <div class="text-2xl font-bold">{weather.temperature}°C</div>
99
        <div class="text-sm mt-1">
100
          <span title="风速">🌬️</span> {weather.windspeed} km/h
101
        </div>
102
      </div>
103
    </div>
104
  {:else if error}
105
    <div class="flex items-center justify-center h-24">
106
      <p class="text-red-500">{error}</p>
107
    </div>
108
  {/if}
109
</div>