开屏页

开屏页（Splash）是访客首次进入网站时看到的全屏展示页面，支持背景图轮播、渐变遮罩和自定义导航按钮。

效果

开屏页会覆盖整个视口，展示大标题、副标题和一组导航按钮。背景支持多张图片自动轮播切换，配合半透明遮罩确保文字可读。

配置方法

在 src/data/config/splash.ts 中修改 splash 字段：

TypeScript

splash: {    enabled: true,    backgroundImage: [        'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1920&q=80',        'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1920&q=80',    ],    overlay: 'rgba(0,0,0,0.1)',    textShadow: true,    fallbackBg: 'bg-black',    gradientColor: '#2d2d2d',    gradientHeight: 'h-56',    backdropBlur: '12px',    glass: {        nav: 'liquid', // 导航胶囊的玻璃效果        tint: 0.1,     // 玻璃底色浓度    },    slideDuration: 12,    title: 'Vergil',    description: '面向创作者的 Astro 建站框架',    nav: [        { text: 'Github', href: 'https://github.com', icon: 'github' },        { text: '友链', href: '/links', icon: 'link' },        { text: '关于', href: '/about', icon: 'user' },    ]}

splash: {
    enabled: true,
    backgroundImage: [
        'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1920&q=80',
        'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1920&q=80',
    ],
    overlay: 'rgba(0,0,0,0.1)',
    textShadow: true,
    fallbackBg: 'bg-black',
    gradientColor: '#2d2d2d',
    gradientHeight: 'h-56',
    backdropBlur: '12px',
    glass: {
        nav: 'liquid', // 导航胶囊的玻璃效果
        tint: 0.1,     // 玻璃底色浓度
    },
    slideDuration: 12,
    title: 'Vergil',
    description: '面向创作者的 Astro 建站框架',
    nav: [
        { text: 'Github', href: 'https://github.com', icon: 'github' },
        { text: '友链', href: '/links', icon: 'link' },
        { text: '关于', href: '/about', icon: 'user' },
    ]
}

字段说明

字段	必填	说明
`enabled`	是	`true` 启用开屏页，`false` 关闭
`backgroundImage`	否	背景图片 URL 数组，多张会自动轮播。留空则不显示背景图
`overlay`	否	CSS 颜色值，覆盖在背景图上降低亮度，确保文字可读
`textShadow`	否	是否给标题和副标题添加文字阴影
`fallbackBg`	否	图片加载失败时的 Tailwind 背景类
`gradientColor`	否	底部过渡渐变的颜色值
`gradientHeight`	否	渐变区域高度，如 `h-56`、`h-32`
`backdropBlur`	否	内容区上方的毛玻璃模糊程度
`glass`	否	导航胶囊的玻璃效果，见下方「玻璃效果」
`slideDuration`	否	轮播切换间隔，单位秒
`title`	否	主标题
`description`	否	副标题/描述
`nav`	否	底部导航按钮数组

导航按钮

nav 是一个对象数组，每个按钮支持：

字段	必填	说明
`text`	是	按钮文字
`href`	是	跳转链接，支持相对路径和外部链接
`icon`	否	图标名称（Iconify 格式），如 `github`、`link`、`user`

玻璃效果

glass.nav 决定导航胶囊的样子，知识库封面上对应「开始阅读」按钮：

值	效果
`solid`	普通的半透明白底胶囊（默认，不写 `glass` 就是它）
`frosted`	毛玻璃：背景被模糊成柔和的色块透出来
`liquid`	液态玻璃：背景基本清晰，边缘像透过凸透镜一样弯曲，带高光边

液态玻璃的边缘折射只在 Chrome、Edge 这类 Chromium 内核的浏览器上有，Safari、Firefox 上是带高光边的清透玻璃。没有背景图时，毛玻璃和液态玻璃都退回普通样式。

glass.tint 是玻璃底色的浓度，默认 0.1，越大越不透明，0 完全透明。模糊程度、提亮程度、饱和度这些细节集中在 src/styles/components/splash.css 玻璃部分开头的几个变量里，每个都有注释。

进入正文

往下滚过开屏图高度的 1/4，停下后会平滑滚到正文；从正文往上滚过 1/4，会回到开屏图；不到 1/4 就回原处。点下箭头、点开屏图空白处、按 Esc 都会直接进入正文。

关闭开屏页

如果不需要开屏页，将 enabled 设为 false 即可：

TypeScript

splash: {    enabled: false,}

splash: {
    enabled: false,
}

关闭后，访客将直接进入网站首页。