文章详情

返回首页

CF搭建仿google主页

分享文章 作者: Ws01 创建时间: 2025-11-24 更新时间: 2025-11-25 📝 字数: 6,696 字 👁️ 阅读: 23 次

原始 Markdown

export default {
    async fetch(request) {
      const html = `
  <!DOCTYPE html>
  <html lang="zh">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google 风格导航</title>
  <link rel="shortcut icon" href="https://cdn.glitch.global/efdace30-a873-49c7-aaa9-4fa31679ee0c/google-favicon.ico?1741094764151">
  <style>
      body {
          font-family: Arial, sans-serif;
          margin: 0;
          padding: 0;
          background-color: #ffffff;
      }
      .sites {
          width: 860px;
          margin: 15px auto;
          padding: 0px;
      }
      .container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          flex-direction: column;
          margin-top: -1cm;
      }
      .logo {
          margin-bottom: 20px;
          width: 260px; /* 缩小 Logo */
      }
      .search-box {
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 20px;
          width: 710px;
          height: 25px;
          display: flex;
      }
      .search-box input {
          border: none;
          outline: none;
          flex: 1;
          padding: 5px;
          font-size: 16px;
      }
      .search-box button {
          background-color: #4285f4;
          color: white;
          border: none;
          border-radius: 10px;
          padding: 5px 15px;
          margin-left: 5px;
          cursor: pointer;
      }
      .tags {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 30px;
      }
      .tag {
          position: relative;
          text-align: center;
          margin: 0 0.5cm; /* 设置标签之间的间距为1cm */
          width: 80px; /* 设置标签的宽度 */
          margin-bottom: 20px; /* 设置标签之间的垂直间距 */
      }
      .tag a {
          text-decoration: none;
          color: inherit;
          position: relative;
          display: inline-block;
      }
      .tag img {
          border-radius: 50%; /* 圆形图片 */
          width: 40px;
          height: 40px;
          object-fit: cover;
      }
      .tag p {
          margin-top: 5px;
          font-size: 12px; /* 缩小字体大小为15px */
      }
      .tag::before {
          content: "";
          position: absolute;
          top: -5px;
          left: -5px;
          right: -5px;
          bottom: -5px;
          background-color: transparent;
          z-index: -1;
          border: 2px solid transparent;
          border-radius: 10px;
          transition: all 0.3s;
      }
      .tag:hover::before {
          background-color: rgba(0, 0, 0, 0.1);
          border-color: rgba(0, 0, 0, 0.2);
      }
  </style>
  </head>
  <body>
      <div class="sites">
          <div class="container">
              <img src="https://ngohome.eu.org/config/9527def/8f9327db2597fa57d2f42b4a6c5a9855.webp" alt="Google Logo" class="logo">
              <form action="https://www.google.com/search" method="GET" class="search-box">
              <span class="search-icon">🔍</span>
              <input type="text" name="q" placeholder="在 Google 中搜索，或输入网址...">
                  <button type="submit">Search</button>
              </form>
  
              <div class="tags" id="tags"></div>
          </div>
      </div>
  
  <script>
    // 网站列表，一行排列7个
    const sites = [
        { name: "ws01主页1", url: "https://www.199881.xyz/" },
        { name: "ws01主页2", url: "https://www.211119.xyz/" },
        { name: "ws01导航", url: "https://dh.199881.xyz/" },
        { name: "Ws01 Note", url: "https://note.9527.nyc.mn/" },
        { name: "ws01图床", url: "https://ngohome.eu.org/" },
        { name: "简易记事本", url: "https://eyei.eu.org/" },
        { name: "ws01记事本", url: "https://note.211119.xyz/" },

        { name: "密码和UUID", url: "https://pass.keplu.eu.org/" },
        { name: "休闲小屋1", url: "https://boke.199881.xyz/" },
        { name: "休闲小屋2", url: "https://boke.211119.xyz/" },
        { name: "vps信息", url: "https://vps.211119.xyz/" },
        { name: "D77", url: "https://d77.211119.xyz/" },
        { name: "ws01音乐", url: "https://iqiy.eu.org/" },
        { name: "vps计算器", url: "https://keplu.eu.org/" },

        { name: "文本转语音", url: "https://t2v.111178.xyz/" },
        { name: "免费邮箱", url: "https://wszx.us.to/login" },
        { name: "免费图床", url: "https://img.199881.xyz/" },
        { name: "热点新闻", url: "https://freenews.netlib.re/" },
        { name: "ws01哪吒", url: "https://nz.211119.xyz/" },
        { name: "短链接", url: "https://url.199881.xyz/dlj" },
        { name: "deepseek", url: "https://chat.deepseek.com/" },

        { name: "腾讯NBA", url: "https://sports.qq.com/kbsweb/index.htm#nba" },
        { name: "新浪NBA", url: "https://sports.sina.com.cn/nba/index.shtml" },
        { name: "88 NBA", url: "http://www.88kanqiu.us/match/1/live" },
        { name: "NodeSeek", url: "https://www.nodeseek.com/" },
        { name: "YouTube", url: "https://www.youtube.com/" },
        { name: "GitHub", url: "https://github.com/wszx123" },
        { name: "SpeedTest", url: "https://www.speedtest.net/" }
    ];
  
      const tagsContainer = document.getElementById('tags');
  
      sites.forEach(site => {
          const div = document.createElement('div');
          div.className = 'tag';
          
          const hostname = new URL(site.url).hostname;
          const primaryFavicon = \`https://www.faviconextractor.com/favicon/\${hostname}\`;
          const fallbackFavicon = \`https://favicon.cccyun.cc/\${hostname}\`;
          const defaultFavicon = "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🌐</text></svg>"; 
  
          const img = document.createElement("img");
          img.src = primaryFavicon;
          img.onerror = function() { 
              img.onerror = null; // 避免死循环
              img.src = fallbackFavicon;
              
              img.onerror = function() { 
                  img.src = defaultFavicon; 
              };
          };
  
          div.innerHTML = \`
              <a href="\${site.url}" target="_blank">
                  <p>\${site.name}</p>
              </a>
          \`;
          div.querySelector("a").insertBefore(img, div.querySelector("p"));
          tagsContainer.appendChild(div);
      });
  </script>
  </body>
  </html>
      `;
  
      return new Response(html, {
        headers: { "Content-Type": "text/html; charset=UTF-8" },
      });
    },
  };

预览

export default { async fetch(request) { const html = <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google 风格导航</title> <link rel="shortcut icon" href="https://cdn.glitch.global/efdace30-a873-49c7-aaa9-4fa31679ee0c/google-favicon.ico?1741094764151"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #ffffff; } .sites { width: 860px; margin: 15px auto; padding: 0px; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; margin-top: -1cm; } .logo { margin-bottom: 20px; width: 260px; / 缩小 Logo / } .search-box { padding: 10px; border: 1px solid #ccc; border-radius: 20px; width: 710px; height: 25px; display: flex; } .search-box input { border: none; outline: none; flex: 1; padding: 5px; font-size: 16px; } .search-box button { background-color: #4285f4; color: white; border: none; border-radius: 10px; padding: 5px 15px; margin-left: 5px; cursor: pointer; } .tags { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; } .tag { position: relative; text-align: center; margin: 0 0.5cm; / 设置标签之间的间距为1cm / width: 80px; / 设置标签的宽度 / margin-bottom: 20px; / 设置标签之间的垂直间距 / } .tag a { text-decoration: none; color: inherit; position: relative; display: inline-block; } .tag img { border-radius: 50%; / 圆形图片 / width: 40px; height: 40px; object-fit: cover; } .tag p { margin-top: 5px; font-size: 12px; / 缩小字体大小为15px / } .tag::before { content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background-color: transparent; z-index: -1; border: 2px solid transparent; border-radius: 10px; transition: all 0.3s; } .tag:hover::before { background-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.2); } </style> </head> <body> <div class="sites"> <div class="container"> <img src="https://ngohome.eu.org/config/9527def/8f9327db2597fa57d2f42b4a6c5a9855.webp" alt="Google Logo" class="logo"> <form action="https://www.google.com/search" method="GET" class="search-box"> <span class="search-icon">🔍</span> <input type="text" name="q" placeholder="在 Google 中搜索，或输入网址..."> <button type="submit">Search</button> </form>

<div class="tags" id="tags"></div> </div> </div>

<script> // 网站列表，一行排列7个 const sites = [ { name: "ws01主页1", url: "https://www.199881.xyz/" }, { name: "ws01主页2", url: "https://www.211119.xyz/" }, { name: "ws01导航", url: "https://dh.199881.xyz/" }, { name: "Ws01 Note", url: "https://note.9527.nyc.mn/" }, { name: "ws01图床", url: "https://ngohome.eu.org/" }, { name: "简易记事本", url: "https://eyei.eu.org/" }, { name: "ws01记事本", url: "https://note.211119.xyz/" },

{ name: "密码和UUID", url: "https://pass.keplu.eu.org/" }, { name: "休闲小屋1", url: "https://boke.199881.xyz/" }, { name: "休闲小屋2", url: "https://boke.211119.xyz/" }, { name: "vps信息", url: "https://vps.211119.xyz/" }, { name: "D77", url: "https://d77.211119.xyz/" }, { name: "ws01音乐", url: "https://iqiy.eu.org/" }, { name: "vps计算器", url: "https://keplu.eu.org/" },

{ name: "文本转语音", url: "https://t2v.111178.xyz/" }, { name: "免费邮箱", url: "https://wszx.us.to/login" }, { name: "免费图床", url: "https://img.199881.xyz/" }, { name: "热点新闻", url: "https://freenews.netlib.re/" }, { name: "ws01哪吒", url: "https://nz.211119.xyz/" }, { name: "短链接", url: "https://url.199881.xyz/dlj" }, { name: "deepseek", url: "https://chat.deepseek.com/" },

{ name: "腾讯NBA", url: "https://sports.qq.com/kbsweb/index.htm#nba" }, { name: "新浪NBA", url: "https://sports.sina.com.cn/nba/index.shtml" }, { name: "88 NBA", url: "http://www.88kanqiu.us/match/1/live" }, { name: "NodeSeek", url: "https://www.nodeseek.com/" }, { name: "YouTube", url: "https://www.youtube.com/" }, { name: "GitHub", url: "https://github.com/wszx123" }, { name: "SpeedTest", url: "https://www.speedtest.net/" } ];

const tagsContainer = document.getElementById('tags');

sites.forEach(site => { const div = document.createElement('div'); div.className = 'tag';

const hostname = new URL(site.url).hostname; const primaryFavicon = \https://www.faviconextractor.com/favicon/\${hostname}\; const fallbackFavicon = \https://favicon.cccyun.cc/\${hostname}\; const defaultFavicon = "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🌐</text></svg>";

const img = document.createElement("img"); img.src = primaryFavicon; img.onerror = function() { img.onerror = null; // 避免死循环 img.src = fallbackFavicon;

img.onerror = function() { img.src = defaultFavicon; }; };

div.innerHTML = \ <a href="\${site.url}" target="_blank"> <p>\${site.name}</p> </a> \; div.querySelector("a").insertBefore(img, div.querySelector("p")); tagsContainer.appendChild(div); }); </script> </body> </html>

;

return new Response(html, { headers: { "Content-Type": "text/html; charset=UTF-8" }, }); }, };

载入天数... | 总访问量 次

博客 | 主页 | RSS订阅 | 登录

© 2025 Ws01 Note 2.0