博客视觉资源更换速查

这篇记录博客里和“外观换装”有关的位置，后续换图片时不用重新翻代码。

头像#

配置位置：

1
src/config.ts

字段：

1
profileConfig.avatar

当前值：

1
avatar: "assets/images/profile-avatar.png"

图片放在：

1
src/assets/images/

配置位置：

1
src/config.ts

字段：

1
siteConfig.banner

开启：

1
banner: {
2
  enable: true,
3
  src: "assets/images/demo-banner.png",
4
  position: "center",
5
}

如果不想显示顶部大图：

1
enable: false

配置位置：

1
src/config.ts

字段：

1
siteConfig.background

当前背景图：

1
src: "/images/meteor-shower-background.png"

图片位置：

1
public/images/

更换方式：

1
pnpm build

顶部背景高度：

1
height: "clamp(24rem, 42vh, 36rem)"

透明度：

1
opacity: 1

图片位置：

1
position: "center"
2
position: "top"
3
position: "bottom"

模糊：

1
blur: "4px"

缩放：

1
scale: 1.03

遮罩：

1
overlay: {
2
  light: "transparent",
3
  dark: "transparent",
4
}

博客图片尽量放本地，不依赖外链。

背景图建议只放在顶部氛围区，长文章阅读区保持干净。常见做法是让顶部背景覆盖导航栏和首屏内容的一部分，然后在固定高度处直接切回页面底色。

如果背景细节比较多，优先降低 height 或换一张更干净的图，不要直接把文章卡片做得很透明。

如果图片比较大，可以压缩成 WebP：

1
cwebp input.png -q 82 -o meteor-shower-background.webp

然后把配置改成：

1
src: "/images/meteor-shower-background.webp"