一、设计目标

将天气组件从文章列表中移除，改为顶部标题行内嵌显示，实现：

  1. 位置优化 - 与博客标题并排，节省页面空间
  2. 视觉简洁 - 全透明背景，融入页面设计
  3. 信息紧凑 - 横排显示，一目了然
  4. 响应式适配 - 小屏幕自动换行

二、实现效果

┌─────────────────────────────────────────────────────────────┐
│  分享与反思 📝                    ☀️ 25°C 晴朗 📍 南京      │
│                                                             │
│  记录技术学习与思考                                          │
│                                                             │
│  [GitHub图标]                                                │
└─────────────────────────────────────────────────────────────┘

三、技术实现

3.1 文件结构

layouts/
├── partials/
│   ├── extend_head.html      # 天气组件样式和脚本
│   └── home_info.html        # 首页信息模板（修改）
└── _default/
    └── list.html             # 移除旧天气组件

3.2 核心代码

extend_head.html - 样式定义

.weather-widget-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: transparent;      /* 全透明背景 */
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;
}

.weather-widget-inline .weather-icon {
  font-size: 18px;
}

.weather-widget-inline .weather-temp {
  font-weight: 500;
  color: var(--primary);
}

.weather-widget-inline .weather-desc {
  color: var(--secondary);
  font-size: 12px;
}

.weather-widget-inline .weather-location {
  color: var(--secondary);
  font-size: 12px;
  opacity: 0.8;
}

home_info.html - 布局集成

<header class="entry-header" 
        style="display: flex; 
               justify-content: space-between; 
               align-items: center; 
               flex-wrap: wrap; 
               gap: 10px;">
    <h1>{{ .Title | markdownify }}</h1>
    <div id="weather-widget" class="weather-widget-inline"></div>
</header>

JavaScript 渲染函数

function render(widget, weather, city) {
  if (!widget) return;
  const icon = getIcon(weather.desc);
  widget.innerHTML = `
    <span class="weather-icon">${icon}</span>
    <span class="weather-temp">${weather.temp}°C</span>
    <span class="weather-desc">${weather.desc}</span>
    <span class="weather-location">📍 ${city}</span>
  `;
}

四、关键设计决策

4.1 为什么选择 inline-flex？

方案优点缺点
inline-flex与文字基线对齐，自然融入行内需要控制 white-space
flex布局能力强会独占一行
inline-block简单垂直对齐不够精确

选择 inline-flex：天气组件需要与标题文字保持同一行，同时内部元素需要灵活排列。

4.2 透明背景的优势

  1. 视觉统一 - 不破坏原有卡片设计
  2. 自适应主题 - 支持深色/浅色模式切换
  3. 简洁现代 - 符合当前 UI 设计趋势

4.3 响应式处理

flex-wrap: wrap;    /* 空间不足时换行 */
gap: 10px;          /* 元素间距 */

小屏幕下自动变为：

┌─────────────────────┐
│  分享与反思 📝      │
│  ☀️ 25°C 晴朗 📍南京 │
└─────────────────────┘

五、数据流优化

5.1 加载策略

页面加载
    ↓
检查缓存 → 有 → 立即显示
    ↓ 无
显示"加载中..."
    ↓
请求默认城市（南京）
    ↓
显示天气 + 缓存数据
    ↓
后台尝试 GPS 定位
    ↓
定位成功 → 更新显示

5.2 缓存机制

const CONFIG = {
  CACHE_KEY: 'weather_simple_cache',
  CACHE_TTL: 10 * 60 * 1000  // 10分钟
};

六、与之前版本的对比

特性v3.0 (卡片式)v4.0 (行内式)
位置文章列表中独立卡片标题行右侧
背景渐变卡片全透明
布局垂直堆叠水平排列
信息密度详细（湿度/风速等）精简（温度/天气/城市）
适用场景信息展示状态指示

七、代码精简原则

本次实现遵循极简主义：

  1. 移除复杂类结构 - 改用纯函数
  2. 内联所有代码 - 避免外部请求
  3. 减少依赖 - 仅使用原生 API
  4. 精简信息展示 - 只保留核心数据

八、后续优化方向

  1. 主题适配 - 根据天气自动调整色调
  2. 动画效果 - 天气图标微动画
  3. 更多数据源 - 支持多天气 API 切换
  4. 本地化 - 根据浏览器语言显示城市名

参考链接：