封面配置

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

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

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

第 1 步：默认配置就很好看（开箱即用）

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

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

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

第 2 步：关闭封面（如果你不想要）

不想要封面？把 enableCover 设为 false：

export default defineConfig({
  cover: {
    enableCover: false,
  },
});

这样网站会变成”无封面”模式，页面从导航栏直接进入内容区。

第 3 步：使用固定封面（推荐）

如果你想让封面始终显示同一张图片（比如你的 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"

第 4 步：使用自己的图片（进阶）

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

方式 A：放在 `public` 目录（最简单）

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

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

方式 B：使用远程 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: 如何替换预设的 6 张封面图？

预设图片位于 src/assets/images/cover-1.avif ~ cover-6.avif。你可以：

直接替换这些文件（保持文件名不变）
或者修改 src/components/Images.astro 来导入你自己的图片

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

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

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

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