
图标库 https://icon-sets.iconify.design/
复制图标名,粘贴到链接的icon即可
addEventListener('fetch', event => { event.respondWith(handleRequest(event.request))})
async function handleRequest(request) { // 配置的分组和链接 const groups = [ { title: '搜索引擎', links: [ { name: 'Google', url: 'https://www.google.com', icon: 'logos:google-icon' }, { name: 'Bing', url: 'https://www.bing.com', icon: 'logos:bing' }, { name: 'DuckDuckGo', url: 'https://duckduckgo.com', icon: 'logos:duckduckgo' }, ], }, { title: '开发工具', links: [ { name: 'GitHub', url: 'https://github.com', icon: 'logos:github-icon' }, { name: 'Cloudflare', url: 'https://www.cloudflare.com', icon: 'logos:cloudflare' }, { name: 'Tailwind CSS', url: 'https://tailwindcss.com', icon: 'logos:tailwindcss-icon' }, ], }, { title: '其他', links: [ { name: 'Example', url: 'https://example.com', icon: 'carbon:link' }, { name: 'Iconify', url: 'https://icon-sets.iconify.design', icon: 'simple-icons:iconify' }, ], }, ]
// HTML 模板 const html = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Static Navigation Page</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script> <style> /* 背景渐变 */ body { background: linear-gradient(to right, #fbc2eb, #a6c1ee); /* 默认渐变 */ }
/* 分组容器样式 */ .group-container { background: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */ backdrop-filter: blur(10px); /* 背景模糊效果 */ border-radius: 12px; /* 圆角 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
}
/* 链接悬停效果 */ a:hover { transform: translateY(-2px); /* 轻微上移 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */ }
/* 标题样式 */ h1 { color: #4a5568; /* 标题颜色 */ }
/* 链接文字颜色 */ .link-text { color: #2d3748; /* 链接文字颜色 */ } </style> </head> <body class="font-sans p-6 bg-gradient-to-r from-pink-100 to-blue-100"> <div class="container mx-auto max-w-6xl px-4"> <h1 class="text-4xl font-bold mb-8 text-center">我的导航页</h1> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> ${groups.map(group => `
<div class="group-container p-6"> <h2 class="text-xl font-semibold text-center mb-4 text-gray-800">${group.title}</h2> <div class="space-y-3"> ${group.links.map(link => ` <a href="${link.url}" class="flex items-center p-3 bg-gradient-to-r from-pink-50 to-blue-50 rounded-lg transition duration-300 hover:bg-gray-50"> <span class="iconify mr-3" data-icon="${link.icon}" data-width="24" data-height="24"></span> <span class="link-text">${link.name}</span> </a> `).join('')} </div> </div>
`).join('')} </div> </div> </body> </html> `
return new Response(html, { headers: { 'Content-Type': 'text/html' }, })}