配置指南
📝 快速开始
只需编辑页面中的 JSON 配置即可自定义你的导航站：
- 找到页面中的
<script id="nav-config">部分 - 修改 JSON 内容中的链接信息
- 保存文件，页面会自动更新
🎨 卡片配置
基本字段
{
"title": "站点名称",
"url": "https://example.com",
"icon": "https://example.com/icon.png",
"desc": "站点描述"
}背景样式
"bg": {
"enabled": true,
"type": "color", // 可选: color, image, gradient
"value": "#ef4444" // 颜色值、图片URL或CSS渐变
}高级样式
"textColor": "#ffffff", // 文字颜色
"style": {
"radius": 18, // 圆角大小(px)
"shadow": "0 10px 26px rgba(0,0,0,.35)"
},
"badge": "NEW" // 角标文字⚙️ 全局设置
"settings": {
"openInNewTab": true, // 新窗口打开
"cardHeight": 150, // 卡片高度(px)
"hover": {
"scale": 1.02, // 悬停缩放
"lift": 6 // 悬停上浮(px)
},
"globalBackground": { // 全局背景设置
"enabled": false, // 是否启用自定义背景
"type": "image", // 类型: color, image, gradient
"value": "图片URL或颜色值" // 背景值
}
}💡 示例配置
复制以下示例，根据需要进行修改：
{
"title": "我的博客",
"url": "https://myblog.com",
"icon": "https://myblog.com/favicon.ico",
"desc": "记录技术与生活",
"bg": {
"enabled": true,
"type": "gradient",
"value": "linear-gradient(135deg,#667eea 0%,#764ba2 100%)"
},
"textColor": "#ffffff",
"style": { "radius": 18, "shadow": "0 10px 26px rgba(102,126,234,.35)" }
}全局背景示例
"globalBackground": {
"enabled": true,
"type": "image",
"value": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2000&auto=format&fit=crop"
}🔧 注意事项
- 确保 JSON 格式正确，使用在线 JSON 校验工具检查
- 图片链接必须是 HTTPS 协议
- 图标建议使用 64x64 或 128x128 的正方形图片
- 修改后如未生效，请强制刷新页面 (Ctrl+F5)