中华非物质文化遗产传承中心

中华非物质文化遗产传承中心

一、项目简介

本项目为中华非物质文化遗产传承中心宣传展示网站，采用纯前端静态页面实现，无需后端服务。网站以中国传统视觉风格（朱砂红、金色、墨色）为基调，展示非遗项目、传承人、新闻资讯及传承保护相关内容，面向公众传播非遗文化。

技术栈： HTML5 + CSS3 + 原生 JavaScript
数据方式： 本地 Mock 数据（feiyi-data.js），通过 URL 查询参数实现页面间跳转与筛选

---

二、项目功能

2.1 首页（index.html）

功能	说明
品牌首屏	大标题、副标题、行动按钮（探索非遗项目 / 认识传承人）
墨滴入场动画	页面加载时的全屏墨色过渡效果
粒子背景	Canvas 粒子流动动画，营造氛围感
数据统计	国家级/省级非遗项目、传承人、联合国名录等数字滚动增长动画
快捷入口	左下角悬浮按钮，可跳转至 welcome.html 了解更多信息
响应式布局	适配桌面端与移动端浏览

2.2 非遗项目（projects.html + project-detail.html）

功能	说明
分类筛选	按传统美术、传统技艺、传统音乐、传统舞蹈、戏曲曲艺、民俗节庆、传统医药等分类过滤
级别筛选	支持国家级 / 省级 / 市级 / 全部级别切换
URL 参数同步	筛选条件可通过 ?cat=xxx&level=xxx 写入地址栏，便于分享与回退
瀑布流卡片	项目以卡片形式展示封面、级别标签、标题与简介
保护流程说明	页面底部展示「申报调查 → 专家评审 → 认定公布 → 保护传承 → 监督评估」流程
项目详情	通过 project-detail.html?id=xxx 查看完整介绍、图集、关联传承人、相关推荐
图片灯箱	详情页支持图集放大浏览、前后切换
目录锚点导航	详情页滚动时高亮当前章节（Scroll Spy）
复制链接	一键复制当前详情页地址

2.3 传承人（inheritors.html + inheritor-detail.html）

功能	说明
传承人列表	卡片网格展示头像、姓名、级别、技艺、地区等信息
悬停动效	卡片悬停时图片缩放、阴影变化
传承人详情	通过 inheritor-detail.html?id=xxx 查看生平、荣誉、代表语录、关联非遗项目
项目关联	详情页展示该传承人相关的非遗项目，可跳转至项目详情

2.4 新闻资讯（news.html + news-detail.html）

功能	说明
分类筛选	按新闻类别（如政策动态、传承活动、国际交流等）过滤
分页浏览	支持分页切换，页码与分类状态同步至 URL
侧边栏	热门新闻、标签云等辅助浏览
新闻详情	通过 news-detail.html?id=xxx 查看标题、来源、日期、正文与配图
上一篇 / 下一篇	详情页支持同列表内文章导航

2.5 传承保护（protection.html）

功能	说明
保护理念介绍	阐述非遗保护的意义与方针
政策法规卡片	展示相关法律法规与保护政策要点
保护措施	列举记录整理、传习培训、数字化保护等具体举措
保护项目 Tab	多标签切换展示不同保护计划与成果
时间轴 / 数据展示	可视化呈现保护工作进展

2.6 联系我们（contact.html）

功能	说明
联系信息	地址、电话、邮箱、工作时间等
在线留言表单	姓名、电话、咨询类型、留言内容填写与前端校验
表单提交反馈	提交成功后提示（前端模拟，无真实后端接口）
交通指引	地铁、公交、自驾停车及周边地标说明
合作方式	政府、高校、企业、媒体等合作类型介绍

2.7 欢迎页 / 轮播演示（welcome.html）

功能	说明
Swiper 全屏轮播	基于 Swiper 库的全屏幻灯片切换
非遗主题展示	糖画泥人、打铁花、皮影戏等主题图片轮播
过渡动效	自定义切换动画与背景色过渡

2.8 公共能力（shared.js + shared.css）

功能	说明
统一导航栏	自动注入顶部导航，高亮当前页面，支持移动端折叠菜单
页脚	公共页脚结构（可按需启用）
滚动导航样式	页面滚动后导航栏背景变化
滚动显现动画	元素进入视口时触发 reveal 渐显动画
粒子背景	各页面可选的 Canvas 粒子效果
视差滚动	支持 data-parallax 属性的元素视差位移
自定义光标	桌面端鼠标跟随光标与悬停放大效果（触屏设备自动禁用）
设计令牌	全局 CSS 变量统一色彩、字体、间距等视觉规范

2.9 数据层（feiyi-data.js）

集中管理全站 Mock 数据，页面通过全局变量读取：

全局变量	内容
window.FEIYI_PROJECTS	非遗项目列表及详情字段
window.FEIYI_INHERITORS	传承人列表及详情字段
window.FEIYI_NEWS	新闻列表及详情字段
window.FEIYI_NEWS_CATEGORIES	新闻分类配置
window.FEIYI_CATEGORY_MAP	项目分类键值映射
window.FEIYI_LEVEL_MAP	项目级别键值映射

---

三、标准文件夹目录结构

homework-feiyichuancheng/          # 项目根目录
│
├── index.html                     # 首页
├── projects.html                  # 非遗项目列表页
├── project-detail.html            # 非遗项目详情页
├── inheritors.html                # 传承人列表页
├── inheritor-detail.html          # 传承人详情页
├── news.html                      # 新闻资讯列表页
├── news-detail.html               # 新闻详情页
├── protection.html                # 传承保护页
├── contact.html                   # 联系我们页
├── welcome.html                   # 欢迎页 / Swiper 轮播演示页
│
├── shared.css                     # 全站公共样式（导航、页脚、通用组件、CSS 变量）
├── shared.js                      # 全站公共脚本（导航注入、动画、交互）
├── feiyi-data.js                  # 全站 Mock 数据（项目 / 传承人 / 新闻）
├── 项目说明.md                    # 本说明文档
│
└── assets/                        # 静态资源目录
    ├── css/
    │   └── swiper.css             # Swiper 轮播组件样式（第三方）
    ├── js/
    │   └── swiper.js              # Swiper 轮播组件脚本（第三方）
    ├── images/                    # 图片子目录（按模块分类存放）
    │   └── index/                 # 首页 / 欢迎页轮播等图片
    │       ├── 糖画泥人.png
    │       ├── 打铁花.webp
    │       └── 皮影戏.jpg
    │
    ├── hero-bg.jpg                # 首页背景图
    ├── projects-bg.jpg            # 项目页 / 保护页头图
    ├── inheritors-bg.jpg          # 传承人页头图
    ├── contact-bg.jpg             # 联系页 / 新闻页头图
    ├── avatar.png                 # 传承人默认头像
    ├── bg.webp                    # 通用封面占位图
    ├── news.jpg                   # 新闻默认配图
    ├── 更多.png                   # 首页悬浮按钮图标
    ├── 关于.png                   # 首页「关于」入口图标
    ├── btn_hover.png              # 欢迎页按钮悬停图
    └── …                          # 各非遗项目专题图片（按项目名称命名）

3.1 目录职责说明

路径	职责
根目录 *.html	每个页面对应一个独立 HTML 文件，采用多页应用（MPA）结构
shared.css	全站视觉规范与公共组件样式，各页面通过 <link> 引入
shared.js	导航、页脚、动画等可复用逻辑，各页面通过 <script> 引入
feiyi-data.js	唯一数据源，列表页与详情页共用，避免数据重复维护
assets/css/	第三方或独立的样式文件
assets/js/	第三方或独立的脚本文件
assets/images/	按模块分子目录存放图片，便于管理与引用
assets/ 根级图片	全站通用的背景图、占位图、图标等

3.2 页面与资源引用约定

1. 样式引用顺序： shared.css → 页面内 <style> → 第三方 CSS（如 assets/css/swiper.css）
2. 脚本引用顺序： shared.js → feiyi-data.js（数据页）→ 页面内 <script> → 第三方 JS
3. 详情页路由： 通过查询参数传递 ID，例如 project-detail.html?id=jingtailan
4. 图片路径： 统一使用相对路径 ./assets/...，便于本地直接打开或部署到任意目录

---

四、本地运行

本项目为静态网站，无需安装依赖或构建步骤。

方式一：直接打开
用浏览器打开根目录下的 index.html 即可浏览（部分浏览器对 file:// 协议下的脚本有限制，推荐方式二）。

方式二：本地静态服务（推荐）

# 进入项目根目录后，任选一种方式启动

# Python 3
python3 -m http.server 8080

# Node.js（需已安装 npx）
npx serve .

浏览器访问 http://localhost:8080 即可。

---

五、页面导航关系

index.html（首页）
├── projects.html ──→ project-detail.html?id=xxx
├── inheritors.html ──→ inheritor-detail.html?id=xxx
├── news.html ──→ news-detail.html?id=xxx
├── protection.html
├── contact.html
└── welcome.html（首页左下角入口）

---

六、扩展建议

• 新增非遗项目： 在 feiyi-data.js 的 projects 数组中追加条目，并补充 assets/ 下对应图片
• 新增传承人 / 新闻： 同样在 feiyi-data.js 对应数组中维护，注意 id 唯一
• 新增页面： 复制现有页面骨架，引入 shared.css 与 shared.js，在 shared.js 的 NAV_LINKS 中注册导航项
• 接入真实后端： 将 feiyi-data.js 替换为 fetch 请求 API，页面渲染逻辑可基本复用

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-feiyichuancheng