Cloudflare Pages部署哪吒探针主题之世界地图基于 Amzayo 设计的主题进行二次修改

前言：此主题支持哪吒v0、哪吒v1 请自行下载对应的主题文件

效果图：

GitHub仓库：https://github.com/reg233/nezha-theme-world-map

部署教程

下载主题文件

https://github.com/reg233/nezha-theme-world-map/releases/tag/v1.3.0

样式一为：nezha-theme-world-map.zip

样式二为：nezha-theme-world-map-tabs.zip

在 index.html 旁边创建一个名为 _worker.js 的文件，将下面的代码粘贴进去，再修改第 1 行中的域名

const domain = "example.com";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    if (url.pathname.startsWith("/api/v1/ws/server")) {
      return handleWebSocket(request);
    } else if (url.pathname.startsWith("/api/")) {
      return handleRequest(request);
    }

    return env.ASSETS.fetch(request);
  },
};

const handleRequest = async (request) => {
  const url = new URL(request.url);
  url.host = domain;

  const modifiedRequest = new Request(url.toString(), {
    headers: request.headers,
    method: request.method,
    body: request.body,
    redirect: "follow",
  });
  const response = await fetch(modifiedRequest);

  return new Response(response.body, response);
};

const handleWebSocket = async (request) => {
  const upgradeHeader = request.headers.get("Upgrade");
  if (upgradeHeader !== "websocket") {
    return new Response("Expected WebSocket", { status: 400 });
  }

  const webSocket = new WebSocket(`wss://${domain}/api/v1/ws/server`);
  webSocket.addEventListener("message", (event) => {
    server.send(event.data);
  });

  const [client, server] = Object.values(new WebSocketPair());
  server.accept();

  return new Response(null, { status: 101, webSocket: client });
};

Cloudflare Page上传主题文件和_worker.js文件

自定义

修改标题

在 index.html 中搜索 监控室 并替换

修改背景图

在 index.html 中搜索 https://imgapi.cn/bing.php 并替换

隐藏地图

在 assets/index-xxxxxxxx.css 底部加入以下内容

样式一

.ant-collapse-item:first-child{display:none}

样式二

.ant-collapse{display:none}@media only screen and (max-width:701px){.tabs{padding:16px}}@media only screen and (min-width:702px){.tabs{padding:4% 16px}}