主页大图功能使用说明

功能概述

主页大图功能提供了两种显示模式，可以完全兼容现有布局，不修改任何已有功能，仅通过新增配置控制。

配置说明

在 hugo.toml 配置文件中添加以下配置：

[params.homeBigImage]
  enable = true
  mode = "mode1"  # 或 "mode2"
  
  # 共用配置
  title = "我的网站标题"
  subtitle = "网站副标题描述"
  backgroundImage = "/images/home-bg.jpg"
  
  # 模式一专属配置
  [params.homeBigImage.mode1]
    arrowAnimation = true
    scrollSpeed = 500
    
  # 模式二专属配置
  [params.homeBigImage.mode2]
    fullScreen = true
    overlayOpacity = 0.3

模式一：中间栏大图模式

效果描述

  • 启动时中间栏区域显示大图背景
  • 大图上显示标题和副标题
  • 底部有简约下滑箭头带动画效果
  • 用户滚动后，大图区域上滑，显示原本的中间栏内容
  • 保持三栏布局结构不变

配置参数

  • arrowAnimation: 是否显示滚动箭头动画（默认：true）
  • scrollSpeed: 滚动动画速度，单位毫秒（默认：500）

使用场景

适合希望保持三栏布局，但在首页提供视觉冲击力的场景。

模式二：整站背景大图模式

效果描述

  • 使用整站背景图实现类似Hexo Butterfly的顶部大图
  • 大图覆盖整个视口区域
  • 在背景图上显示标题和副标题
  • 用户滚动时正常显示三栏布局内容

配置参数

  • fullScreen: 是否全屏显示（默认：true）
  • overlayOpacity: 背景图遮罩透明度（默认：0.3）

使用场景

适合希望实现全屏背景效果，类似传统博客主题的场景。

兼容性说明

与现有功能的兼容性

  • ✅ 完全兼容现有的三栏布局
  • ✅ 不影响侧边栏功能
  • ✅ 不影响文章列表显示
  • ✅ 不影响其他页面布局
  • ✅ 支持暗色模式
  • ✅ 支持响应式设计

与现有配置的兼容性

  • ✅ 可以与 [params.background] 配置共存
  • ✅ 可以与 [params.background.homeCover] 配置共存
  • ✅ 不影响现有的背景图功能

技术实现

文件结构

themes/demius/
├── layouts/
│   ├── _default/baseof.html    # 更新配置传递
│   └── index.html              # 重构主页布局
├── assets/
│   ├── css/
│   │   ├── main.css            # 引入新样式
│   │   └── _home-big-image.css # 新增样式文件
│   └── js/
│       ├── main.js             # 引入新脚本
│       └── _home-big-image.js  # 新增脚本文件

核心功能

  1. 配置系统: 通过 window.siteConfig 传递配置到前端
  2. 模式切换: 根据 mode 参数渲染不同的HTML结构
  3. 动画效果: CSS3动画 + JavaScript交互
  4. 响应式设计: 适配移动端和桌面端

使用示例

启用模式一

[params.homeBigImage]
  enable = true
  mode = "mode1"
  title = "欢迎来到我的博客"
  subtitle = "分享技术，记录生活"
  backgroundImage = "https://example.com/bg.jpg"
  
  [params.homeBigImage.mode1]
    arrowAnimation = true
    scrollSpeed = 600

启用模式二

[params.homeBigImage]
  enable = true
  mode = "mode2"
  title = "我的个人网站"
  subtitle = "技术分享与生活记录"
  backgroundImage = "https://example.com/bg.jpg"
  
  [params.homeBigImage.mode2]
    fullScreen = true
    overlayOpacity = 0.4

禁用功能

[params.homeBigImage]
  enable = false

注意事项

  1. 图片资源: 建议使用高质量的背景图片，尺寸建议 1920x1080 或更高
  2. 性能优化: 大图片会影响加载速度，建议使用CDN或图片压缩
  3. 移动端适配: 在移动端会自动调整显示效果
  4. 浏览器兼容: 需要支持CSS3和ES6的现代浏览器

故障排除

常见问题

  1. 图片不显示: 检查图片URL是否正确，网络是否可访问
  2. 动画不流畅: 检查浏览器是否支持CSS3动画
  3. 布局错乱: 检查CSS文件是否正确加载
  4. 配置不生效: 检查配置语法是否正确，重启Hugo服务器

调试方法

  1. 打开浏览器开发者工具
  2. 检查 window.siteConfig 对象
  3. 查看控制台是否有JavaScript错误
  4. 检查CSS样式是否正确应用