在线网址导航 - Web Tool

项目特点

在线预览

快速开始

本地预览

git clone https://github.com/geeeeeeeek/web_tool.git
cd web_tool

# 使用 Python 3
python -m http.server 8000
# 使用 Node.js (需要先安装 http-server)
npx http-server -p 8000
# 或者直接用浏览器打开 index.html

部署指南

方式一:Nginx 部署

1. 准备工作

# Ubuntu/Debian
sudo apt update
sudo apt install nginx
# CentOS/RHEL
sudo yum install nginx

2. 上传文件

# 创建网站目录
sudo mkdir -p /var/www/web_tool
# 上传文件(本地执行)
scp -r ./* user@your-server:/var/www/web_tool/
# 或者在服务器上使用 git clone
cd /var/www
sudo git clone https://github.com/geeeeeeeek/web_tool.git

3. 配置 Nginx

sudo vim /etc/nginx/sites-available/web_tool

server {
 listen 80;
 server_name your-domain.com; # 修改为你的域名或服务器 IP
 root /var/www/web_tool;
 index index.html;
 # 启用 gzip 压缩
 gzip on;
 gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
 location / {
 try_files $uri $uri/ /index.html;
 }
 # 静态资源缓存
 location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
 expires 30d;
 add_header Cache-Control "public, immutable";
 }
 # 404 页面
 error_page 404 /404.html;
 location = /404.html {
 internal;
 }
}

4. 启用站点并重启 Nginx

# 创建软链接启用站点
sudo ln -s /etc/nginx/sites-available/web_tool /etc/nginx/sites-enabled/
# 测试配置文件
sudo nginx -t
# 重启 Nginx
sudo systemctl restart nginx
# 设置开机自启
sudo systemctl enable nginx

5. 配置 HTTPS (可选但推荐)

# 安装 certbot
sudo apt install certbot python3-certbot-nginx
# 获取证书并自动配置 Nginx
sudo certbot --nginx -d your-domain.com
# 设置自动续期
sudo certbot renew --dry-run

方式二:Vercel 部署 (推荐)

方法 1: 通过 Vercel Dashboard (最简单)

方法 2: 通过 Vercel CLI

npm install -g vercel

vercel login

cd web_tool
vercel

vercel --prod

自定义域名 (可选)

方式三:其他部署平台

GitHub Pages

Cloudflare Pages

Netlify

二次开发

修改网址导航内容

<div class="url-card io-px-3 io-py-2 mb-2">
 <a href="https://your-website.com" target="_blank" rel="nofollow" class="text-xs">
 <strong>网站名称</strong>
 <span class="url-desc">网站描述</span>
 </a>
</div>

修改关于页面

修改网站提交页面

// 在第 371 行附近,替换为实际的 API 地址
$.ajax({
 url: '/api/submit',
 method: 'POST',
 data: formData,
 success: function(response) {
 // 处理成功响应
 }
});

自定义样式

添加新的分类

<div class="io-title text-sm" id="your-category-id">
 <i class="far fa-star fa-lg fa-fw mr-1"></i>
 分类名称
</div>
<div class="row io-mx-n2">
 <!-- 添加网址卡片 -->
</div>

项目结构

web_tool/
├── index.html # 首页
├── commit.html # 网址提交页面
├── 404.html # 404 错误页面
├── about/
│ └── index.html # 关于页面
├── assets/
│ ├── css/ # 样式文件
│ ├── js/ # JavaScript 文件
│ ├── images/ # 图片资源
│ └── fontawesome-5.15.4/ # 图标库
├── README.md # 项目文档
└── vercel.json # Vercel 配置(可选)

常见问题

1. 图片或样式加载失败

2. 网址提交功能如何实现后端

3. 如何添加网站统计

4. 如何优化 SEO

技术栈

参考资料

许可证

贡献

联系方式