个人展示网页与成员墙指南
依据首次社团会议整理 · 更新于 2026-10-13
这次活动要做什么
制作一个具有个人特色的展示网页，介绍你的兴趣、爱好、特长，或其他你希望展示的内容。这是加入光圈科技实验室后的第一个实践项目：尝试借助技术把想法变成作品，而不是考核已有的编程水平。零基础同学也可以参加，可以使用豆包或其他 AI 工具辅助制作。
成员墙是大家作品的集中入口：卡片展示成员自选的昵称、可选头像与个人网页链接，点击后进入各自的作品。个人网页由社团统一部署到官网，成员无需自行购买域名、服务器或注册部署平台账号。
内容与风格由你决定
- 主题、内容、布局、配色、字体、动画和交互均可自由设计，没有统一模板。可以加入音乐播放器、视频、小游戏、3D 场景等复杂 JavaScript 组件，不限于文字图片。
- 个人网页无需与官网的黑白风格一致，也无需与其他成员的作品一致。成员墙入口卡片沿用官网布局，不限制个人网页本身的设计。
- 需要一个展示昵称，头像可选，可以使用虚拟形象或插画；无需真实姓名、学号、专业班级、联系方式或真实头像。
- 展示自己愿意分享的兴趣与特长即可；不需要编造项目经历，也不需要先掌握编程知识。
- 鼓励利用 AI 反复修改、尝试和定制。后续示例仅供参考，不是必须照搬的模板。
AI 会先了解哪些内容
AI 会先询问以下内容，已提供的信息无需重复。只使用你愿意公开的资料，不需要填写真实姓名、学号等身份信息。
- 展示昵称：需要一个昵称；头像可选，可以使用虚拟形象或不放头像。
- 兴趣爱好：介绍你喜欢的事情，不限于技术领域。
- 最感兴趣的技术方向：在计算机、人工智能、物联网范围内选择，例如软件开发、网站开发、AI 应用、机器学习、自动化、嵌入式、智能硬件、机器人、网络与系统；可多选，也可暂时不确定。不要求已经掌握。
- 行政或社团协作特长：例如宣传、文案、设计、管理、活动组织、协调沟通、技术支持等。已经擅长与想尝试的内容都可以说，没有也可以如实说明；这不代表已经担任对应职务。
- 想展示的页面：可选提供 GitHub、微博（Weibo）、哔哩哔哩（Bilibili）、博客或作品页链接，仅展示你确认愿意公开的地址。
- 视觉风格与功能偏好：可以自由发挥，加入音乐播放器、视频和复杂 JavaScript 组件；没有具体想法，也可以让 AI 结合你的兴趣设计。
先回答这组问题，再让 AI 制作。除昵称外，暂时没有或不想展示的内容可以说明并省略，不需要编造经历。复杂功能不是必需项；若使用音视频，提供可用且有权使用的素材或链接，支持手动播放与加载失败提示。
如何用 AI 开始
会议现场已使用豆包演示通过自然语言制作网页。你可以先告诉 AI：想介绍哪些兴趣、希望是什么风格、需要哪些互动，再根据实际预览继续修改。一次只调整一个具体问题，会更容易判断效果。
可参考这样的需求描述，并把内容换成自己的想法：
帮我制作一个个人展示网页。请先询问我的昵称、可选头像、兴趣爱好、在计算机/人工智能/物联网中最感兴趣的方向、行政或社团协作特长，以及想展示的 GitHub、微博、Bilibili 等个人链接。等我回答后，再结合我的偏好制作，风格无需与官网一致，可以加入音乐播放器、视频或复杂 JavaScript 组件。不要询问真实姓名、学号等身份信息。完成制作与检查后，把网页和资源打包为 ZIP，提示我发送给社长。
生成后先打开预览，检查文字、图片、按钮和手机显示，再把具体问题反馈给 AI。上面的文字是起步提示，不是已发布的完整操作教程。正式网页示例和 AI 制作教程仍在筹备，以 QQ 群通知为准。
准备哪些提交内容
首次活动的要求是把项目文件打包提交给负责人。以下为便于统一接收与部署的整理建议；具体提交渠道、截止时间和正式基本要求，以后续 QQ 群通知为准。
- 作品文件：网页入口文件、样式、脚本，以及实际使用的图片、字体等资源。只有截图、聊天记录或临时预览链接，不足以还原网页。
- 简单静态网页建议使用 index.html 作为入口，连同资源文件夹一起打包成 ZIP；单文件网页可以只包含 index.html 和说明。
- 如使用需要构建的框架，建议附可编辑源码、依赖清单与锁文件、构建命令和可发布的静态产物。普通 HTML 作品无需安装本官网的开发工具，也无需运行官网的 npm run package。
- 附一份简短说明：展示昵称、入口文件、预览方法、依赖的外部服务，以及已知问题。页面按本人回答介绍兴趣爱好、技术兴趣方向、行政或协作特长；头像和个人页面链接可选，不提供头像也可以展示。
- 需要登录、付费 API 或后端的作品，应先向负责人说明运行条件，确认如何展示。当前官网采用静态部署，支持浏览器内的复杂 JavaScript、音乐播放器与视频，但不能默认直接运行所有后端功能。
- 不把账号密码、API 密钥、.env、聊天隐私、无关个人文件或 node_modules 放进作品包。
建议用相对路径引用作品自身的资源，例如 ./assets/style.css，避免依赖电脑上的绝对路径或把 /assets/ 误指向官网公共资源。个人网页后续可能放在官网子目录下；具体路径由负责人分配，不需要成员预先部署。
提交前自己看一遍
- 从准备提交的文件中预览作品，确认入口正确，图片、字体和脚本没有遗漏。
- 看一遍电脑与手机尺寸，检查文字可读、按钮可用、主要内容没有被遮挡或挤出屏幕。
- 检查链接是否指向预期位置，确认外部资源或服务的依赖已写入说明。
- 确认页面及附件只含自己愿意公开的内容；使用自己有权展示的头像、图片和其他素材。
- 如有功能尚未完成，如实写明，带着问题提交沟通即可；不以复杂特效作为参加门槛。
从提交到成员墙展示
- 按 QQ 群后续公布的方式，将作品 ZIP 和说明提交给负责人；成员无需自行上线。
- 负责人核对文件完整性、运行方式、展示资料及本人公开意愿，有问题时与作者沟通。
- 社团统一部署个人网页，检查实际地址的资源、链接和移动端显示，再把入口加入成员墙。
- 卡片使用成员确认的昵称与可选头像、简介、兴趣方向；未提供头像时显示昵称首字。
- 需要修改、替换或下架时联系负责人，说明对应昵称或网页地址及希望调整的内容。
成员墙和个人网页上线后均可被公开访问。使用昵称不等于页面不可被他人看到。真实姓名、学号、电话、班级等信息不从报名表自动同步公开；发布前应确认作者同意公开的内容。
目前成员墙保留六个无名空白展示位，不代表社团实际人数或六个报名名额。收到并确认作品前，不添加虚构成员或个人网页入口。官网目前没有作品上传、登录或自动审核入口。
同期另一项待办：匿名意向收集
除了个人网页，成员还需关注负责人后续在 QQ 群发布的匿名意向收集表。可以填写感兴趣的技术方向、希望尝试的内容、项目创意和活动建议；零基础、暂时没有实施方案也可以提出想法。建议有机会成为后续活动主题。
匿名问卷与公开成员墙分别处理，不要求把问卷答案写进个人网页，也不将匿名回答作为成员卡片资料。问卷尚待发布，当前没有可填写链接。
活动安排与待发布事项
本周期为 2026 年 10—12 月，预计约 10 次活动。原则上全线上开展，活动与会议的时间和参与方式均由 QQ 群通知；竞赛协作、嵌入式或实体硬件项目可按需要在活动室进行。
- 个人网页示例、完整 AI 制作教程：筹备中。
- 作品提交渠道、正式基本要求和截止时间：待 QQ 群公布。
- 匿名意向收集表及填写安排：待 QQ 群发布。
本指南用于帮助准备作品，不替代上述正式通知，不设置未经公布的截止时间或提交入口。
给官网维护者的接收与录入说明
先确认作品的可发布文件和作者授权，再安排个人网页路径。保留各作品独立的资源目录，不覆盖官网页面与公共资源，不强制注入官网样式。不要直接运行来源不明的安装或构建脚本；需要构建时先查看脚本和依赖，并在隔离环境中处理。
当前成员卡的 url 字段只接受完整 HTTPS 地址。统一部署后的站内个人页面也应填写其完整正式 URL，而不是相对路径。该字段现有校验无需为此活动修改。只有页面实际可访问后才录入链接，不把示例路径当成已发布作品。
在 content/members.json 中维护卡片：id 使用稳定且唯一的小写字母、数字和短横线标识；name 为成员确认的展示昵称（1—40 字符）；directions 为 software、hardware、systems 组成的数组，可为空或多个方向。方向仅用于入口筛选，不限制创作主题。role、bio、avatar、url 均可选，不擅自添加身份或经历。
avatar 只接受 /assets/members/ 下的 PNG 或 WebP 本地图片，文件名只用字母、数字、短横线、下划线。虚拟形象可以作为头像；其他图片格式由维护者协助转换。此限制仅用于成员墙卡片，不限制个人网页内部的素材格式。
完成录入后按开发文档重新构建与检查，核对成员卡、头像、搜索筛选、实际网页入口和隐私信息。当前仓库没有自动部署工作流；提交代码与发布官网是两个步骤，发布后再次确认线上内容。个人作品文件和公开素材进入公开仓库前，也应确认作者同意这一公开范围。