博客首页顶部轮播图片配置#

图片位置#

首页顶部轮播图片分为移动端和桌面端两个版本：

端	路径	说明
移动端	`src/assets/images/MobileWallpaper/`	手机/平板等移动设备显示
桌面端	`src/assets/images/DesktopWallpaper/`	电脑等桌面设备显示

配置文件位置#

src/config/backgroundWallpaper.ts

配置说明#

1
src: {
2
    desktop: [
3
        "assets/images/DesktopWallpaper/d1.avif",
4
        "assets/images/DesktopWallpaper/d2.avif",
5
        "assets/images/DesktopWallpaper/d3.avif",
6
        "assets/images/DesktopWallpaper/d4.avif",
7
    ],
8
    mobile: [
9
        "assets/images/MobileWallpaper/m1.avif",
10
        "assets/images/MobileWallpaper/m2.avif",
11
        "assets/images/MobileWallpaper/m3.avif",
12
        "assets/images/MobileWallpaper/m4.avif",
13
    ],
14
},

图片格式要求#

推荐格式：AVIF#

优势：更高的压缩率，更小的文件体积，支持透明度和 HDR
兼容性：现代浏览器普遍支持

推荐工具：Squoosh#

在线图片转换工具：https://squoosh.app/

使用步骤：

打开 Squoosh 网站
将你的图片拖入页面
在左侧面板选择输出格式为 AVIF
调整质量滑块（建议 75-85%）
点击下载按钮

其他可选工具#

工具	网址	特点
CloudConvert	https://cloudconvert.com/	支持批量转换，格式全面
Convertio	https://convertio.co/	界面简洁，操作方便
ezGIF	https://ezgif.com/	支持 GIF 和图片互转

图片尺寸建议#

端	推荐尺寸	宽高比
移动端	1080 × 1578	约 2:3
桌面端	2560 × 1440	16:9

轮播配置#

在 backgroundWallpaper.ts 中的 banner.carousel 部分：

1
carousel: {
2
    enable: true,           // 是否启用轮播
3
    interval: 5000,         // 轮播间隔（毫秒）
4
    switchable: true,       // 是否允许用户手动切换
5
},

替换图片步骤#

准备好新的 AVIF 格式图片
根据目标设备，将图片放入对应文件夹：
- 移动端：src/assets/images/MobileWallpaper/
- 桌面端：src/assets/images/DesktopWallpaper/
刷新页面即可看到效果
如缓存未更新，按 Ctrl + Shift + R 强制刷新

注意事项#

文件名需与配置文件中的路径一致
图片会经过 Astro 自动优化，生成 WebP/AVIF 多种格式
替换后如未显示新图片，请清除浏览器缓存或重启开发服务器

音乐

音乐

博客首页顶部轮播图片配置#

图片位置#

配置文件位置#

配置说明#

图片格式要求#

推荐格式：AVIF#

推荐工具：Squoosh#

其他可选工具#

图片尺寸建议#

轮播配置#

替换图片步骤#

注意事项#

支持与分享

评论区

音乐

目录

音乐

音乐

2. 博客首页横幅图片与轮播配置

博客首页顶部轮播图片配置#

图片位置#

配置文件位置#

配置说明#

图片格式要求#

推荐格式：AVIF#

推荐工具：Squoosh#

其他可选工具#

图片尺寸建议#

轮播配置#

替换图片步骤#

注意事项#

支持与分享

评论区

音乐

目录