Skip to content

BING_WALLPAPER_GUIDE.md

Latest commit

 

History

History
362 lines (281 loc) · 8.3 KB

BING_WALLPAPER_GUIDE.md

File metadata and controls

362 lines (281 loc) · 8.3 KB

必应每日一图背景功能说明

🎨 功能概述

网站已集成微软必应每日一图 API，每天自动更换精美的背景图片，让网站更加美观。

✨ 特性

1. 自动更新

  • 每天自动获取必应的精选壁纸
  • 24小时缓存，减少 API 调用
  • 自动处理加载失败（使用默认渐变背景）

2. 智能缓存

  • 壁纸数据缓存 24 小时
  • 减少网络请求
  • 提升加载速度

3. 美化效果

  • 半透明遮罩层
  • 毛玻璃效果（backdrop-filter）
  • 内容区域背景优化
  • 响应式设计

4. 版权信息

  • 自动显示图片版权信息
  • 右下角小标签
  • 可点击查看详情

🎯 应用范围

前端页面

  • ✅ 首页（index.html）
  • ✅ 文章详情（post.html）
  • ✅ 关于页面（about.html）
  • ✅ 登录页面（login.html）

后端页面

  • ✅ 文章管理（admin.html）
  • ✅ 文章编辑器（editor.html）
  • ✅ GitHub 配置（github-config.html）

🎨 视觉效果

前端页面

背景：必应每日一图
遮罩：浅色半透明（10% 白色）
内容：白色半透明卡片（95% 不透明）
效果：清新、优雅

后端页面

背景：必应每日一图
遮罩：浅色半透明（15% 白色）
内容：白色半透明卡片（95% 不透明）
效果：专业、现代

登录页面

背景：必应每日一图
遮罩：深色半透明（40% 黑色）
内容：白色半透明卡片（95% 不透明）
效果：沉稳、安全

🔧 技术实现

API 端点

https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN

参数说明

  • format=js - 返回 JSON 格式
  • idx=0 - 今天的图片（0=今天，1=昨天）
  • n=1 - 获取 1 张图片
  • mkt=zh-CN - 中国市场（中文描述）

数据结构

{
  "images": [{
    "url": "/图片路径",
    "title": "图片标题",
    "copyright": "版权信息",
    "copyrightlink": "版权链接"
  }]
}

缓存机制

localStorage.bingWallpaperCache = {
    url: "图片URL",
    title: "标题",
    copyright: "版权",
    timestamp: 时间戳
}

🎛️ 自定义配置

修改遮罩颜色

编辑各页面的脚本部分：

await applyBingWallpaperToBody({
    overlay: true,
    overlayColor: 'rgba(0, 0, 0, 0.3)' // 修改这里
});

颜色建议

  • 浅色遮罩：rgba(255, 255, 255, 0.1) - 清新
  • 深色遮罩：rgba(0, 0, 0, 0.3) - 沉稳
  • 彩色遮罩：rgba(102, 126, 234, 0.2) - 品牌色

添加模糊效果

await applyBingWallpaperToBody({
    overlay: true,
    overlayColor: 'rgba(255, 255, 255, 0.1)',
    blur: true,
    blurAmount: '5px'
});

禁用背景

注释掉应用背景的代码：

// await applyBingWallpaperToBody(...);
// document.body.classList.add('has-wallpaper');

📱 响应式设计

移动端优化

  • 背景图片自动适配
  • 版权信息缩小显示
  • 内容区域优化间距

性能优化

  • 图片预加载
  • 24小时缓存
  • 失败时使用默认背景
  • 不阻塞页面加载

🔍 调试方法

查看当前壁纸

在浏览器控制台执行：

// 查看缓存的壁纸
const cache = localStorage.getItem('bingWallpaperCache');
console.log(JSON.parse(cache));

// 获取新壁纸
bingWallpaper.fetchWallpaper().then(console.log);

// 清除缓存（强制刷新）
localStorage.removeItem('bingWallpaperCache');
location.reload();

测试 API

// 直接调用 API
fetch('https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN')
    .then(r => r.json())
    .then(console.log);

手动应用背景

// 应用到 body
applyBingWallpaperToBody({
    overlay: true,
    overlayColor: 'rgba(0, 0, 0, 0.5)'
});

// 应用到特定元素
applyBingWallpaperToElement('.hero', {
    overlay: false
});

🌐 API 限制

必应 API

  • ✅ 免费使用
  • ✅ 无需 API Key
  • ✅ 无调用次数限制
  • ✅ 全球可用

注意事项

  • 图片版权归微软所有
  • 仅供个人网站使用
  • 不要用于商业用途

🎨 效果预览

前端首页

┌─────────────────────────────────┐
│  [必应每日一图背景]              │
│  ┌───────────────────────────┐  │
│  │  导航栏（半透明白色）      │  │
│  └───────────────────────────┘  │
│  ┌───────────────────────────┐  │
│  │  Hero 区域（半透明紫色）   │  │
│  └───────────────────────────┘  │
│  ┌─────┐ ┌─────┐ ┌─────┐      │
│  │文章1│ │文章2│ │文章3│      │
│  └─────┘ └─────┘ └─────┘      │
│  [版权信息]                     │
└─────────────────────────────────┘

登录页面

┌─────────────────────────────────┐
│  [必应每日一图背景 + 深色遮罩]   │
│                                 │
│      ┌─────────────────┐        │
│      │   🔐            │        │
│      │  后台管理系统    │        │
│      │  [登录表单]     │        │
│      └─────────────────┘        │
│                                 │
│  [版权信息]                     │
└─────────────────────────────────┘

🚀 高级用法

获取历史壁纸

// 获取昨天的壁纸
fetch('https://www.bing.com/HPImageArchive.aspx?format=js&idx=1&n=1&mkt=zh-CN')
    .then(r => r.json())
    .then(data => {
        const url = 'https://www.bing.com' + data.images[0].url;
        document.body.style.backgroundImage = `url('${url}')`;
    });

随机壁纸

// 获取最近 7 天的随机壁纸
const randomIdx = Math.floor(Math.random() * 7);
fetch(`https://www.bing.com/HPImageArchive.aspx?format=js&idx=${randomIdx}&n=1&mkt=zh-CN`)
    .then(r => r.json())
    .then(data => {
        const url = 'https://www.bing.com' + data.images[0].url;
        document.body.style.backgroundImage = `url('${url}')`;
    });

不同地区的壁纸

// 美国市场
mkt=en-US

// 日本市场
mkt=ja-JP

// 英国市场
mkt=en-GB

📊 性能影响

加载时间

  • 首次加载：+200-500ms（下载图片）
  • 缓存后：+10-50ms（读取缓存）

数据使用

  • 每张图片：约 200-500KB
  • 每天更新一次
  • 月流量：约 6-15MB

优化建议

  • ✅ 使用缓存（已实现）
  • ✅ 异步加载（已实现）
  • ✅ 失败降级（已实现）
  • ✅ 预加载功能（可选）

❓ 常见问题

Q: 背景图片不显示？ A: 检查网络连接，或清除缓存重试。

Q: 可以禁用背景吗？ A: 可以，注释掉相关代码即可。

Q: 背景图片多久更新一次？ A: 每天更新一次，缓存 24 小时。

Q: 可以使用自己的图片吗？ A: 可以，修改 CSS 设置固定背景图片。

Q: 影响网站速度吗？ A: 影响很小，图片异步加载且有缓存。

Q: 版权信息可以隐藏吗？ A: 建议保留，尊重版权。

🎨 自定义背景

使用固定图片

在 CSS 中添加：

body {
    background-image: url('你的图片URL');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

使用渐变背景

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

使用图案背景

body {
    background-image: url('data:image/svg+xml,...');
    background-repeat: repeat;
}

📚 相关资源

提示：背景图片每天自动更新，让你的网站每天都有新鲜感！ 🎨