基于Cloudflare worker，简单的导航页 • 三七の小站

图标库 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' },
  })
}