No.027 分类技术
- 448 字
- 约 2 分钟
课表是怎么做的
记录一下给 Firefly 博客主题添加课表组件的过程
起因
这学期课表比较复杂,周一到周五每天十几节课,还有晚自习,周五下午单双周还轮着上不同科目。手动记容易出错,于是想着能不能把这个课表挂到博客上,随时随地就能查。
数据结构
课表的核心是 src/data/timetable.ts,两个数组:
periods:作息时间,定义每一大节的起止时间和标签courses:课程列表,每条记录包含课程名、星期几、第几大节、上课周次规则、地点、教师
周次规则通过 weeks 字段控制,支持三种模式:
{ start: 1, end: 21 }— 全部周次{ start: 1, end: 21, parity: "odd" }— 单周{ start: 1, end: 21, parity: "even" }— 双周
这周五下午就是靠 parity 实现的:单周第一节化学,双周第一节体育,其余课程不变。
排课过程
按时间表逐天录入,day: 1-5 对应周一到周五,slot 对应 periods 的下标。13 个时段分别是:
| 早读1 | 早读2 | 上午1-4 | 中午1-2 | 下午1-4 | 晚自习 |
|---|---|---|---|---|---|
| 07:00-07:25 | 07:25-07:50 | 08:00-11:41 | 12:00-13:30 | 13:40-17:20 | 17:45-20:30 |
周二到周五的课程顺序和周一不同,逐一核对后填入对应 slot。地点和教师目前留空,后续补上。
学期信息
semester 配置了学期的基本信息,startDate 设成 2026-09-01,totalWeeks 设为 21 周。组件会根据当前日期和开学第一天自动计算现在是第几周,高亮当前周的课程。
效果预览
课表页面在 /timetable 路由下,桌面端是表格形式展示,手机端切换为按天列表。课程卡片会自动分配颜色,不同科目不同颜色,一眼就能分辨。
后续
- 补上教室和教师信息
- 如果以后有科目调整,直接改
timetable.ts即可,不需要动代码
License 版权
本文《课表是怎么做的》由 年华 写,按 CC BY-NC-SA 4.0 协议发布。可以转载,但要署名、不能商用,改过的内容也按同样的协议发布。
https://tblog.amamo.top/posts/%E8%AF%BE%E8%A1%A8%E6%98%AF%E6%80%8E%E4%B9%88%E5%81%9A%E7%9A%84/
Comments评论