封面配置

封面（Header Cover）是网站顶部的大型视觉区域，它能给访问者留下第一印象。ShokaX 支持三种封面模式：

多图轮播（默认）：自动循环显示 6 张预设图片。
固定封面：始终显示同一张图片。
渐变模式：纯色渐变背景（动态）。

所有配置都在 src/theme.config.ts 的 cover 字段中。

默认配置

如果你刚下载主题，什么都不改，封面默认会以”多图轮播”模式运行：

export default defineConfig({
  // ...
  cover: {
    enableCover: true, // 启用封面
    enablePreload: true, // 图片预加载（提升性能）
  },
});

此时网站会自动轮播主题内置的 6 张封面图片（cover-1 ~ cover-6）。

固定封面

如果你想让封面始终显示同一张图片（比如你的 Logo 或品牌图），启用固定封面模式：

export default defineConfig({
  cover: {
    enableCover: true,
    enablePreload: true,
    enableFixedCover: true, // 启用固定封面
    fixedCover: "cover-3", // 使用预设图片之一
  },
});

可用的预设封面

主题内置了 6 张封面，你可以直接使用它们的 key：

"cover-1"
"cover-2"
"cover-3"
"cover-4"
"cover-5"
"cover-6"

使用自己的图片

如果你想用自己的图片做固定封面，有三种方式：

修改预设封面

参照使用 HyC 交互式修改配置，启动 HyC 控制台

随后，在导航栏中选“博客配置”->“内置图片”，即可修改自带的6张预设图片：

在替换目标中选择你需要替换的图片，随后上传本地图片，点击替换即可

HyC 会自动把格式转换为 AVIF 和裁剪压缩，原始图片文件可为任意图片格式

放在 `public` 目录

把图片放到项目的 public/ 目录，例如 public/my-cover.jpg
在配置中填写路径（以 / 开头）：

export default defineConfig({
  cover: {
    enableFixedCover: true,
    fixedCover: "/my-cover.jpg",
  },
});

使用远程 URL

你也可以直接填写远程图片地址：

export default defineConfig({
  cover: {
    enableFixedCover: true,
    fixedCover: "https://example.com/my-cover.jpg",
  },
});

其他可选配置

渐变模式（纯色背景）

不想用图片？可以启用渐变模式：

export default defineConfig({
  cover: {
    enableCover: true,
    gradient: true, // 启用渐变
  },
});

文章导航渐变背景

在文章页面底部的”上一篇/下一篇”导航区域，可以选择使用渐变背景：

export default defineConfig({
  cover: {
    enableNextGradientCover: true,
  },
});

这个选项独立于封面模式，可以单独启用。

配置项速查

字段	类型	默认值	说明
`enableCover`	`boolean`	`true`	是否显示封面区域。
`enablePreload`	`boolean`	`true`	是否预加载封面图片（提升首屏速度）。
`enableFixedCover`	`boolean`	`false`	是否启用固定封面模式。
`fixedCover`	`string`	-	固定封面的图片源（预设 key / public 路径 / URL）。
`gradient`	`boolean`	`false`	是否使用渐变模式（纯色背景，不显示图片）。
`enableNextGradientCover`	`boolean`	`false`	文章导航区域是否使用渐变背景。

封面模式优先级

当你同时配置了多个选项时，优先级如下：

固定封面：enableFixedCover: true + fixedCover 有值时生效。
渐变模式：gradient: true 且未启用固定封面时生效。
多图轮播（默认）：上述两者都不满足时，自动使用 6 张预设图片轮播。

常见问题

Q: 为什么启用了固定封面，但还是轮播？

检查两个条件是否都满足：

enableFixedCover 设为 true
fixedCover 填写了有效的值（预设 key 或路径）

如果只设置了 fixedCover 而 enableFixedCover 为 false，固定封面不会生效。