⚡

城市旅游网站构建器Skill city-tourism-website-builder

这个技能用于研究和创建现代、动画化的城市旅游网站，包括历史事实、旅游地点和多彩设计。它提供全面研究流程、前端开发技术（如HTML、CSS、JavaScript）和OpenStreetMap集成，适合开发者、设计师或旅游行业构建交互式网站，关键词包括城市旅游网站构建、前端开发、旅游网站设计、OpenStreetMap、IPFS托管。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

name: city-tourism-website-builder description: 研究和创建现代、动画化的城市旅游网站，包含历史事实、旅游地点和多彩设计。

城市旅游网站构建器

为任何城市创建令人惊叹的现代旅游网站，包含全面研究、历史事实和美丽动画。

概述

此技能可创建专业的城市旅游网站，特点包括：

  • 深入研究城市历史、事实和旅游景点
  • 现代、多彩设计，白色背景
  • 平滑动画和悬停效果
  • 响应式布局，适应所有设备
  • 以城市为中心的交互式OpenStreetMap
  • 可选地图截图下载为PNG
  • IPFS托管，永久可用

工作流程

1. 研究阶段

收集城市的全面信息：

# 搜索城市信息
websearch query="CITY_NAME 历史 事实 旅游地点 访问景点"
websearch query="CITY_NAME 著名寺庙 纪念碑 地标"
websearch query="CITY_NAME 最佳访问时间 如何到达"

收集的关键信息：

  • 历史起源和词源
  • 相关著名人物
  • 宗教/精神意义
  • 主要旅游景点
  • 地理和气候
  • 文化遗产
  • 快速事实（人口、距主要城市距离等）

2. 设计原则

配色方案：

  • 白色背景，现代干净外观
  • 鲜艳渐变点缀（珊瑚色、青色、黄色、薄荷色）
  • 深色文本，提高可读性
  • 多彩卡片，带悬停效果

动画：

  • 浮动背景形状
  • 滚动淡入效果
  • 卡片悬停提升效果
  • 平滑滚动导航
  • 渐变文本动画
  • 徽章脉冲效果

3. 网站结构

部分：

  1. 英雄头部

    • 大型渐变文本城市名称
    • 标语
    • 动画徽章
    • 滚动指示器

  2. 历史部分

    • 历史事实卡片网格
    • 交互式时间线
    • 起源故事

  3. 访问地点

    • 分类卡片（宗教、自然、冒险、历史）
    • 图标和表情符号，增强视觉吸引力
    • 距离信息

  4. 快速事实

    • 动画数字计数器
    • 网格布局
    • 关键统计

  5. 交互式城市地图

    • 以城市坐标为中心的OpenStreetMap
    • 城市中心标记，带弹出详情
    • "下载地图PNG"操作

  6. 视觉画廊

    • 多彩占位网格
    • 悬停缩放效果

  7. 页脚

    • 导航链接
    • 版权

4. 技术实现

CSS功能：

/* 动画渐变文本 */
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/* 浮动形状 */
animation: float 20s infinite ease-in-out;

/* 卡片悬停效果 */
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);

/* 滚动触发动画 */
IntersectionObserver for fade-in effects

JavaScript功能：

  • 平滑滚动导航
  • 滚动时导航栏隐藏/显示
  • 交叉观察器，用于揭示动画
  • 移动端响应菜单
  • 交互式OpenStreetMap（Leaflet）
  • 城市中心标记和弹出
  • 下载地图图像为PNG（有回退）

4.1 OpenStreetMap集成（必需）

通过Leaflet使用免费OpenStreetMap图块。

<!-- 在<head>中 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- 在body中 -->
<section id="map" aria-label="城市地图部分">
   <h2>探索城市地图</h2>
   <div id="cityMap" style="height: 420px; border-radius: 16px;"></div>
   <button id="downloadMapBtn" type="button" aria-label="下载地图PNG">下载地图PNG</button>
</section>

// 示例城市中心（按城市替换）
const city = {
   name: 'Kathua',
   lat: 32.3693,
   lon: 75.5254,
   zoom: 12
};

const map = L.map('cityMap').setView([city.lat, city.lon], city.zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

L.marker([city.lat, city.lon])
   .addTo(map)
   .bindPopup(`${city.name} 城市中心`)
   .openPopup();

4.2 下载地图为PNG（如果可能）

由于画布/CORS限制，从交互式图块客户端导出PNG在某些浏览器中可能失败。

可靠回退（推荐）： 从免费OSM静态地图端点下载静态PNG。

document.getElementById('downloadMapBtn').addEventListener('click', () => {
   const url = `https://staticmap.openstreetmap.de/staticmap.php?center=${city.lat},${city.lon}&zoom=${city.zoom}&size=1280x720&markers=${city.lat},${city.lon},red-pushpin`;
   const link = document.createElement('a');
   link.href = url;
   link.download = `${city.name.toLowerCase().replace(/\s+/g, '-')}-map.png`;
   link.click();
});

CLI选项（相同免费端点）：

CITY_LAT="32.3693"
CITY_LON="75.5254"
CITY_NAME="kathua"

curl -fsS "https://staticmap.openstreetmap.de/staticmap.php?center=${CITY_LAT},${CITY_LON}&zoom=12&size=1280x720&markers=${CITY_LAT},${CITY_LON},red-pushpin" \
   -o "${CITY_NAME}-map.png"

5. 示例实现

文件结构：

city-website.html
├── 动画背景形状
├── 带模糊效果的固定导航
├── 带渐变文本的英雄部分
├── 带顶部强调线的历史卡片
├── 交替布局时间线
├── 带类别徽章的地点网格
├── 带大数字的事实部分
├── 交互式OpenStreetMap部分（以城市为中心）
├── 下载地图PNG按钮
├── 带颜色块的画廊网格
└── 深色页脚

关键CSS变量：

:root {
  --primary: #FF6B6B;      /* 珊瑚色 */
  --secondary: #4ECDC4;    /* 青色 */
  --accent: #FFE66D;       /* 黄色 */
  --purple: #A8E6CF;       /* 薄荷色 */
  --dark: #2C3E50;         /* 深色文本 */
  --light: #F7F9FC;        /* 浅色背景 */
}

6. 内容指南

历史部分：

  • 4个关键历史卡片
  • 3个时间线项目
  • 专注于起源故事
  • 包括皇家/宗教遗产

地点部分：

  • 6-8个主要景点
  • 分类：宗教、自然、冒险、历史
  • 包括距城市中心的距离
  • 添加表情符号，增强视觉吸引力

事实部分：

  • 6个关键统计
  • 大数字带渐变
  • 混合距离、高度、年份

7. 上传与部署

# 通过Originless上传到IPFS
curl -fsS -X POST -F "file=@city-website.html" https://filedrop.besoeasy.com/upload

# 响应包括：
# - IPFS URL: https://dweb.link/ipfs/{CID}
# - CID用于永久访问

示例输出

Kathua旅游网站：

最佳实践

  1. 彻底研究

    • 使用多个来源
    • 验证历史事实
    • 包括本地传说

  2. 为所有设备设计

    • 移动优先方法
    • 响应式网格
    • 触摸友好交互
    • 地图容器大小适应移动和桌面

  3. 性能

    • 最小化外部依赖
    • 使用CSS动画（GPU加速）
    • 懒加载折叠以下内容

  4. 可访问性

    • 语义HTML结构
    • 需要时添加ARIA标签
    • 键盘导航支持
    • 地图控件保持键盘可达

  5. 内容质量

    • 引人入胜的文案
    • 准确信息
    • 本地背景和风味

  6. 地图质量

    • 保持城市标记在城市中心坐标
    • 包括OpenStreetMap贡献者署名
    • 优选静态地图回退，确保PNG下载

变体

主题选项：

  • 多彩现代（默认）：渐变在白色上
  • 优雅深色：深色模式，金色点缀
  • 极简：干净单色
  • 文化：反映当地文化的颜色

布局选项：

  • 标准：头部 → 历史 → 地点 → 事实 → 画廊
  • 视差：滚动触发深度效果
  • 单页：所有内容垂直滚动
  • 多页：各部分单独页面

资源

配色方案：

  • https://coolors.co/ 用于渐变生成
  • 鲜艳城市：珊瑚色 (#FF6B6B)、青色 (#4ECDC4)、黄色 (#FFE66D)、薄荷色 (#A8E6CF)

图标：

  • 表情符号用于通用识别
  • Lucide图标（轻量级）
  • 自定义SVG用于特定地标

托管：

  • Originless/IPFS用于永久存储
  • GitHub Pages用于传统托管
  • Netlify用于持续部署

此技能结合研究、设计和技术实现，创建展示任何目的地最佳之处的专业城市旅游网站。