年华の博客

全部文章 技术

No.027 分类技术

标签 技术 / 前端 / Astro

  • 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:2507:25-07:5008:00-11:4112:00-13:3013:40-17:2017: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/

Nearby上下篇

  1. No.028 测试 12 字
  2. No.026 Mobi 转 PDF 完整指南 516 字

Comments评论