有没有好看一点的个人主页

搞七捻三
,
1
  1. 没有服务器，想部署在cloudflare上，汇总一下我部署在云端的一些项目，有自己写过，但总感觉差点意思，不知道有没有开发好的
    求推荐！
  2. 还有想知道cloudflare pages部署都需要些啥？为什么我把index.html,stytle.css,script.js放进去，根本无法访问，问了ChatGPT，说就是直接放进去就行，但我一直都是失败的
2 个赞
2

看看这个大佬人的

2 个赞
3

谢谢你帮我分享

但是那个是个博客，不是正经的导航页

我写了一个，直接创建worker，编辑代码，粘贴下面的代码，部署就行

worker.js -- 点击展开 
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/[email protected]/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' },
  })
}

1229153743.avif

3 个赞
4

这个可以啊，不错

6

可以来看看我自己的（原作者项目挺好的，不过我后来自己更新，写到后面写成屎山:poop:了）https://me.mysticstars.cn

2 个赞
7

GitHub 搜索 imsyy/home，这个主页源码挺好看的。我是新用户，无法发送链接 : (

1 个赞
8

cf page不应该是从GitHub导入吗…

9

这个我之前用过，颜值很高，里面好像有个字体文件被压缩了，下载原文件替换即可

10

好不好看太主观了，搜’nas导航’有一堆成熟方案